title: Add Table Row Using jQuery - MVC 4
body: <p>I am currently trying to implement an Add functionality to my page. Currently, the add is already functioning but I have to refresh the page in order for the newly added row to appear on the table.</p>
  
  <p>Please see my codes below:</p>
  
  <p>This is how I generate my table:</p>
  
  <pre><code>&lt;table class="webGrid" id="ProductsTable"&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;strong&gt;&lt;span&gt;ProductID&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;
      &lt;td&gt;&lt;strong&gt;&lt;span&gt;ProductName&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;
      &lt;td&gt;&lt;strong&gt;&lt;span&gt;Price&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;
      &lt;td colspan="2"&gt;&lt;strong&gt;&lt;span&gt;Action&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  @foreach (var item in repository.GetAllProducts(ViewData["BranchCode"].ToString()))
  { 
  &lt;tr&gt;
      &lt;td&gt;&lt;span class="ProductID"&gt;@item.ProductID&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;&lt;span class="ProductName"&gt;@item.ProductName&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;&lt;span class="Price"&gt;@item.Price&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;@Html.ActionLink("Edit", "Edit", new { RecordID = item.RecordID }, new { @class = "editLink" })&lt;/td&gt;
      &lt;td&gt;@Html.ActionLink("Delete", "Delete", new { RecordID = item.RecordID }, new { @class = "editLink" })&lt;/td&gt;
  &lt;/tr&gt;
  }
  </code></pre>
  
  <p></p>
  
  <p>Currently, the edit and delete are already functioning well. Below is how I do the edit:</p>
  
  <pre><code>function update(data) {
  if (data.Success == true) {
      var parent = linkObj.closest("tr");
  
      parent.find(".ProductID").html(data.Object.ProductID);
      parent.find(".ProductName").html(data.Object.ProductName);
      parent.find(".Price").html(data.Object.Price);
  }
  else {
      $("#update-message").html(data.ErrorMessage);
      $("#update-message").show();
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Now I am trying to implement an add functionality which is almost the same as the edit jquery i am using. I have tried using the <code>.append</code> method unsuccessfully.</p>
  
  <hr>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I have tried using the code below for the add. But it doesn't seem to do anything. Or perhaps I'm doing something wrong:</p>
  
  <pre><code>    function add(data) {
      if (data.Success == true) {
  
          var rowTemplate = $("#rowTemplate").html();
          var tbl = document.getElementById("ProductsTable");
          var counter = $("#ProductsTable tr").length;
          data.Counter = counter;
          $("#ProductsTable").append(applyTemplate(rowTemplate, data));
  
      }
      else {
          $("#update-message").html(data.ErrorMessage);
          $("#update-message").show();
      }
  }
  
  function applyTemplate(template, data) {
      var str = template;
      if ($.isPlainObject(data)) {
          $.each(data, function (index, value) {
              var find = new RegExp("\\$1" + index, "ig");
              str = str.replace(/\$/g, "\$1");
              str = str.replace(find, value);
          });
      }
      return str;
  }
  </code></pre>
  
  <p>It makes use of a row template such as the following:</p>
  
  <pre><code>&lt;script type="text/x-template" id="rowTemplate"&gt;
          &lt;tr&gt;&lt;td&gt;&lt;input type="text" id="txtName_$Counter" value="" /&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>I just found this solution online but I can't make it to work. I also tried the code below (i just made up based on the edit jquery I have):</p>
  
  <pre><code>    function add(data) {
      if (data.Success == true) {
          var parent = linkObj.closest("tr");
          parent.find(".ProductID").append(data.Object.ProductID);
          parent.find(".ProductName").append(data.Object.ProductName);
          parent.find(".Price").append(data.Object.Price);
      }
      else {
          $("#update-message").html(data.ErrorMessage);
          $("#update-message").show();
      }
  }
  </code></pre>
  
  <hr>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Right now, this is how my jQuery looks like:</p>
  
  <pre><code>function add(data) {
      if (data.Success == true) {
          data = { Counter: 3 };
          $("#rowTemplate").tmpl(data).appendTo("#ProductsTable");
          $('#updateDialog').dialog('close');
      }
      else {
          $("#update-message").html(data.ErrorMessage);
          $("#update-message").show();
      }
  }
  </code></pre>
  
  <p>and this is my template:</p>
  
  <pre><code>&lt;script type="text/x-template" id="rowTemplate"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;span class="ProductID"&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span class="ProductName"&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span class="Price"&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;@Html.ActionLink("Edit", "_EditProduct", new { @class = "editLink" })&lt;/td&gt;
          &lt;td&gt;@Html.ActionLink("Delete", "_DeleteProduct", new { @class = "editLink" })&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks to Sir @Muhammad Adeel Zahid for helping me make the jQuery work to add rows. However, it only adds a new row to my table. What I need now is to make it add the values I have from the <code>data</code> object in the <code>add function</code> of the jQuery. </p>
  
  <p>I have tried following the tutorial from <a href="http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-working-with-the-official-jquery-templating-plugin/" rel="nofollow">THIS LINK</a> but I can't seem to make it work. My code is below:</p>
  
  <pre><code>function add(data) {
      if (data.Success == true) {
          var prod = $.map(data.results, function (obj, index) {
              return {
                  ProductID:  obj.text,
                  ProductName: obj.text,
                  Price: obj.text
              };
          });
  
          prod = { Counter: 3 };
          $("#rowTemplate").tmpl(prod).appendTo("#ProductsTable");
          $('#updateDialog').dialog('close');
      }
      else {
          $("#update-message").html(data.ErrorMessage);
          $("#update-message").show();
      }
  }
  </code></pre>
  
  <p>Thanks a lot for helping!</p>