„Uncaught Auslöser Range: Maximale Call-Stack-Größe überschritten“, wenn $ .ajax jquery Funktion

Question

Nach Codeblock Aufruf beabsichtigt materialsInMaterialsRecieved genannt Daten aus der Datentabelle zu sammeln und eine Form genannt Materialien-empfangen und erstellen ein Objekt wie unten Probe .

{ 
    PurchaseOrderId: "1", 
    ReceivedDate: "07/23/2016", 
    MaterialsInMaterialsRecived: { 
     Cost: "2", 
     MaterialId: "1", 
     MaterialName: "Silk", 
     QuantityDispatched: "2", 
     QuantityRecieved: "2", 
     Remark: "asda" 
    } 
} 

Dieses Objekt wird erstellt und gespeichert als submitData. submitData muss über Ajax an eine API-URL gesendet werden. Aber wenn dies zu tun, wird ein Fehler ausgegeben, die besagt, Uncaught RangeError: Maximum call stack size exceeded.

Nach dem HTML-Markup ist,

<div class="col-md-6 col-sm-12"> 
    <form action="/api/MaterialsRecieveds/AddMaterialsRecieved" id="materials-recieved" method="POST"> 
     <div id="name-group" class="form-group"> 

      <label for="name">Purchase OrderID</label> 
      <select name="PurchaseOrderId" class="form-control" id="PurchaseOrderList"></select> 

      <label for="date">P/O sent time</label> 
      <input type="text" class="form-control" name="ReceivedDate" id="receivedDate"> 
     </div> 
    </form> 
     <button class="btn btn-success" id="create-materials-recieved-note">Create Materials Recieved Note</button> 
</div> 
<div class="col-md-12"> 
    <table id="materials-in-materials-recieved" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Material Id</th> 
       <th>Material Name</th> 
       <th>Quantity Recieved</th> 
       <th>Quantity Dispatched</th> 
       <th>Cost</th> 
       <th>Remarks</th> 
      </tr> 
     </thead> 
     <tbody></tbody> 
    </table> 
</div> 

Es folgt der Javacript Code,

$("#create-materials-recieved-note").on('click',function (event) { 
     var submitData = {}; 
     var materials = materialsInMaterialsRecieved.rows().data(); // materialsInMaterialsRecieved is a handle for a Datatable 

     $("#materials-recieved .form-control").each(function() { 
      submitData[$(this).attr2("name")] = $(this).val(); 

     }) 

     submitData["MaterialsInMaterialsRecived"] = materials; 
     console.log(submitData); 

     $.ajax({ 
      type: 'post', // define the type of http verb we want to use (post for our form) 
      url: '/api/MaterialsRecieveds/AddMaterialsRecieved', // the url where we want to post 
      data: submitData, // our data object 
      dataType: 'json', // what type of data do we expect back from the server 
      contentType: 'application/json',  
      success: function (data) { 
       console.log(data); 
      } 
     }); 
     event.preventDefault(); 
    }); 

Wenn ich Kommentar-out die $. Ajax (... Anweisung, dann erscheint der Fehler nicht.

Answer 1

submitData ist ein riesiges array-like-Objekt. Wenn ich submitData direkt übergeben ly in die $.ajax JQuery versucht, Nutzdaten in einen json zu serialisieren, weil ich dataType als 'json' angegeben habe. Diese JQuery-Serialisierung erstellt viele Methodenrückrufe und friert den Browser ein und löst dann den Fehler aus, der ihn benachrichtigt.

Die einfache Lösung für dieses Problem war die Vermeidung von JQuery-Serialisierung und die Übergabe einer stringifizierten Version der Nutzdaten an den Ajax-Aufruf.

$.ajax({ 
    type: 'post', 
    url: '/api/MaterialsRecieveds/AddMaterialsRecieved', 
    data: JSON.stringify(submitData), // stringyfy before passing 
    dataType: 'json', // payload is json 
    contentType : 'application/json', 
    success: function (data) { 
     console.log(data); 
     } 
    }); 

Answer 2

In meinem Fall und ähnlichen Code, JSON

Zusammenhang

"uncaught range error maximum call stack..."

Fehler, indem sichergestellt wird aufgelöst wurde ich auf klicken usw. nicht Radsport-Events wie eine Taste Auslösen andere haben, die dann die erste Taste auslöst .

Und indem sie sicher, dass ich

return false; 

nach jedem auf Klick hinzugefügt haben Veranstaltung/Trigger ...

So zum Beispiel meine Tabellenzeile - Ereignis klicken, die Radio-Buttons löst nun geprüft werden wie folgt aussieht:

$("tr").click(function(){ 
    $(this).find("input").prop("checked", true).trigger("click"); 
    return false; 
}); 

Während meine Radio-Buttons wie folgt aussehen:

$("input[type='radio']").click(function(){ 
    var customer = $.parseJSON($(this).val()); 
    $("#customer_id").val(customer.id); 
    $("#company_name").val(customer.company_name); 
    $("#contact_info").val(customer.contact_info); 
    return false; 
}); 

Und ohne falsche Rück, dieser Code bewirkt, dass die oben genannten Fehler ...