title: Send jquery datatable column value to Javascript Function (Asp.Net MVC)
body: <p>I am binding data to jquery datatable in asp.net mvc, i have an anchor tag in one of the columns of the grid where i am accessing / reading row data and sending that data to a javascript function. The problem which i am facing is, i am able read and send row values to the function which are numbers for example ProductID="1" or CategoryID="3" , but if i try to send ProductName="Chai" to the javscript function i get an error in the console, and if i remove the parameter "ProductName" everything works fine and the javascript function also gets triggered.</p>
  
  <p><strong>Following the console error:</strong></p>
  
  <p>"Index:1 Uncaught ReferenceError: Chai is not defined
      at HTMLAnchorElement.onclick (Index:1)"</p>
  
  <p><strong>Following is my Code:</strong></p>
  
  <pre><code>var BindDataTable = function (response) {
      $("#tbProduct").DataTable({
          "aaData": response,
          "aoColumns": [
              { "mData": "ProductID" },
              { "mData": "ProductName" },
              { "mData": "SupplierID" },
              { "mData": "SupplierName" },
              { "mData": "SupplierCountry" },
              { "mData": "CategoryID" },
              { "mData": "CategoryName" },
              { "mData": "QuantityPerUnit" },
              { "mData": "UnitPrice" },
              {
                  "render": function (data, type, full, meta) {
                      return '&lt;a href="#" data-toggle="modal" data-target="#myModal1" onclick="EditProduct(' + full.ProductID + ',' + full.SupplierID + ',' + full.CategoryID + ',' + full.ProductName + ')"&gt;&lt;i class="glyphicon glyphicon-pencil"&gt;&lt;/i&gt;&lt;/a&gt;'
                  }
              }
          ],
          "columnDefs": [
              {
                  "targets": [2],
                  "visible": false,
                  "searchable": false
              },
              {
                  "targets": [5],
                  "visible": false,
                  "searchable": false
              }
          ],
          "aaSorting": []
      });
  }
  
  var EditProduct = function (ProductID, SuppID, CatID,PrdName) {
      var url = "/Product/EditProduct?ProductID=" + ProductID + "&amp;SuppID=" + SuppID + "&amp;CatID=" + CatID;
      $("#myModalBodyDiv1").load(url, function () {
          $("#myModal1").modal("show");
      })
  }
  </code></pre>
  
  <p><strong>Error:</strong>
  <a href="https://i.stack.imgur.com/uVY7w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uVY7w.png" alt="enter image description here"></a></p>