Sree Ram Sree Ram - 3 months ago 10
HTML Question

Page getting stuck after Ajax Call

So this is the form I have

<form action="javascript:void(0);" class="form-inline" id="receive-order-form"> By Receiving you agree that you have received the item <b> {{ x.item_name }} </b> at the store. </br> Order Id <b> {{ x.order_id }} </b></br><input class="btn btn-primary center-block" onclick="execute({{x.linq_order_num}})" type="submit" id= 'receive-btn' value="Receive" ></form>


On submit the remote call gets executed and I get the success pop up but somehow the screen gets stuck like this. Page becomes unresponsive.Page becomes unresponsive after ajax call success.

Execute Function Definition:

function execute(linq_order_num) {
var result = "";
var tableRow=document.getElementById("order_num1_"+String(linq_order_num));
var modalId = "exampleModal1_" + "{{ linq_order_num }}";
jQuery.ajax ({
url: "/receive-order/",
type: "POST",
data: JSON.stringify({"linq_order_num":linq_order_num}),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function(data){
result = data;
$("#modalId").modal('hide');
$('#alert_placeholder').html('<div class="alert
alert-success"><a class="close" data-
dismiss="alert">&times;</a>
<span>Successfully received the product</span>
</div>');
var htmlElement = document.getElementById("deliver-
order_"+ String(linq_order_num));
var cln = htmlElement.cloneNode(true);
cln.style.display = null;
tableRow.cells[7].innerHTML = cln.outerHTML;

}
});
return result;
}


how can I solve this ?

Answer

Assuming you were wanting to hide the modal id referenced in:

var modalId = "exampleModal1_" + "{{ linq_order_num }}"; 

Change:

$("#modalId").modal('hide');

Into:

$("#" + modalId).modal('hide');

In the current version, you are trying to hide the element with id="modalId" in the HTML.

Comments