CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Sree Ram
Sree Ram

Reputation: 859

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 ?

Upvotes: 0

Views: 1017

Answers (1)

jedifans
jedifans

Reputation: 2297

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.

Upvotes: 2

Related Questions