Michael Michael - 1 year ago 52
Ajax Question

Ajax: in case of GET request, the page clears

EcmaScript 6, jQuery 3.1.0

Fiddle: https://jsfiddle.net/Kifsif/k6gw1gnw/10/

Heroku: https://morning-headland-78510.herokuapp.com/frame/1/

There is a plus sign on the page. Clicking it should add a form right above the plus.

The problem is that when I add a form via AJAX, it is shown on a blank page.

Well, I can't imitate it in Fiddle. In the fiddle the page is not cleared. In other words, in the Fiddle everything is correct, like I want it to be.

Please, in Chrome or other browser open debugger. I have placed two breakpoints.

In the debugger at breakpoint 1:

this._url = "/frame/1/frame_date_create/"

I checked without AJAX. Look: https://morning-headland-78510.herokuapp.com/frame/1/frame_date_create/.

The form appears correctly. This means that server seems to response correctly.

As for working via AJAX, the trouble is that the page clears and the form appears alone before the user. On a clear page.

What the form returned by the server looks like is shown below in the code section. Status is 200.

Let's return to JavaScript. The success function is empty. It should show the form in the appropriate place, but in this case it contains just a breakpoint.

In the debugger the troubles continue. At breakpoint 2, usually the page is already cleared, and form is already on the screen. But sometimes the page at breakpoint 2 is not cleared yet. This difference in the behaviour astonishes me a bit.

I have created a video: https://www.youtube.com/watch?v=EhEZVBCK_hw

Unfortunately, the cursor is not visible. At 0:28 is a case when I'm at breakpoint 2, but the page is still unchanged.

Usually clearing the page in case of AJAX requests happens in case of POST request. I managed to find one question on Stackoverflow about such case for GET request: jquery Ajax goes to a blank page

Could you help me understand what is going on here, where I have made mistakes and how to solve the problem.

<form id="object_form" action="/frame/1/frame_date_create/" method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="9UWsO6nYgQYHvo0W1QdclHG229IkaDV01YWl4j2Ug1DSOEf4kG5X87vZSsNNWre8">
<tbody><tr><th><label for="id_date">Date:</label></th><td><input id="id_date" name="date" placeholder="ГГГГ-ММ-ДД" type="text" required=""></td></tr>
<tr><th><label for="id_precision">Точность:</label></th><td><select id="id_precision" name="precision" required="">
<option value="">----</option>
<option value="F">Month</option>
<option value="Y">Year</option>
<option value="d">Day</option>
</select><input id="id_frame" name="frame" type="hidden" value="21"></td></tr>
<a id="submit" href="javascript:void(0)"><span class="glyphicon glyphicon-floppy-save" aria-hidden="true">Save</span></a>

<a id="cancel" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign" aria-hidden="true">Cancel</span></a>



class CreateManager{


debugger; // 1
method: "GET",
url: this._url,
dataType: "html",
success: this._show_form.bind(this),
error: general_fail

debugger; // 2
// let element = $('#' + this._data_table);
// element.after(data);
// this._button_manager.handle_cancel();
// this._button_manager.handle_submit(this._send_post_request.bind(this));

Answer Source

remove the control class from the frame_date_create button you are triggering both the click event for the add and the click event for update, this does 2 ajax calls, the ajax call for the update appends the ajax result to the dom document

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download