title: "Uncaught RangeError: Maximum call stack size exceeded" when calling $.ajax jquery function
body: <p>Following code block intends to collect data from the Datatable called <strong>materialsInMaterialsRecieved</strong> and a form called <strong>materials-recieved</strong> and create an object as below sample. </p>
  
  <pre><code>{
      PurchaseOrderId: "1",
      ReceivedDate: "07/23/2016",
      MaterialsInMaterialsRecived: {
          Cost: "2",
          MaterialId: "1",
          MaterialName: "Silk",
          QuantityDispatched: "2",
          QuantityRecieved: "2",
          Remark: "asda"
      }
  }
  </code></pre>
  
  <p>This object is being created and stored as <code>submitData</code>. <code>submitData</code> needs to be sent over ajax to an API url. But when doing so, an error is thrown which says     <code>Uncaught RangeError: Maximum call stack size exceeded.</code></p>
  
  <p>Following is the html markup,</p>
  
  <pre><code>&lt;div class="col-md-6 col-sm-12"&gt;
      &lt;form action="/api/MaterialsRecieveds/AddMaterialsRecieved" id="materials-recieved" method="POST"&gt;
          &lt;div id="name-group" class="form-group"&gt;
  
              &lt;label for="name"&gt;Purchase OrderID&lt;/label&gt;
              &lt;select name="PurchaseOrderId" class="form-control" id="PurchaseOrderList"&gt;&lt;/select&gt;
  
              &lt;label for="date"&gt;P/O sent time&lt;/label&gt;
              &lt;input type="text" class="form-control" name="ReceivedDate" id="receivedDate"&gt;
          &lt;/div&gt;
      &lt;/form&gt;
          &lt;button class="btn btn-success" id="create-materials-recieved-note"&gt;Create Materials Recieved Note&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="col-md-12"&gt;
      &lt;table id="materials-in-materials-recieved" class="display" cellspacing="0" width="100%"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Material Id&lt;/th&gt;
                  &lt;th&gt;Material Name&lt;/th&gt;
                  &lt;th&gt;Quantity Recieved&lt;/th&gt;
                  &lt;th&gt;Quantity Dispatched&lt;/th&gt;
                  &lt;th&gt;Cost&lt;/th&gt;
                  &lt;th&gt;Remarks&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;&lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Following is the javacript code,</p>
  
  <pre><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();
      });
  </code></pre>
  
  <p>If I comment-out the $.ajax(... statement then the error doesn't appear. </p>