DataTable not reloading after the form is submitted[Answered] RSS

• • Reply
  scala_1988

  Member

  42 Points

  184 Posts

  DataTable not reloading after the form is submitted

  Jan 12, 2020 10:06 AM|scala_1988|LINK

  After submitting the form via pop up form the datatable is not reloading. I tried testing using alert box, the alert box is showing when the page loads for the first time but after the pop up form is submitted the alert box is not showing.

  <script>
          var Popup, dataTable;
          $(document).ready(function () {
  		
              alert("testing...");
  			
              dataTable = $("#tbl_vehicle").DataTable({
                  
                  "ajax":{
                      "url": "/Vehicles/GetVehicle",
                      "type": "GET", 
                      "datatype": "json"
                  },
                  "columns": [
                      { "data": "VehicleType" },
                      { "data": "Amount" },
                      { "data": "RenewPeriod" },
                      { "data": "RegisteredDate" },
                      { "data": "RegisteredBy" },
                      { "data": "Status" },
                      { "data": "ModifiedBy" },
                      { "data": "ModifiedDate" }
                  ],
                  "language": {
                      "emptyTable" : "No data available, please click on <b>Add</b> button"
                  }
  
              });
  
          });
         
          function PopupForm(url) {
              var formDiv = $('<div/>');
              $.get(url).done(function (response) {
                  formDiv.html(response);
  
                  Popup = formDiv.dialog({
                      autoOpen: true,
                      resizable: false, 
                      title: 'fill details',
                      height: 500,
                      width: 700,
                      close: function () {
                          Popup.dialog('destroy').remove();
                      }
                  });
              });
          }
  
          function SubmitForm(form) {   
              //console.log($(form).serialize());
              $.ajax({
  
                  type: "POST",
                  url: "/Vehicles/AddorEdit",  //form.action,
                  data: $(form).serialize(),
                  
                  success: function (data) {
                      if(data.success)
                      {
                          Popup.dialog('close');
                          dataTable.DataTable(ajax.reload());                        
                      }
                  }
              });
              return false;
          }
      </script>

• • Reply
  yij sun

  Contributor

  3990 Points

  1566 Posts

  Re: DataTable not reloading after the form is submitted

  Jan 13, 2020 08:07 AM|yij sun|LINK

  Hi scala_1988,

  Accroding to your codes,I think your reload() method is wrong.I suggest you could definded this on your table.

  More details,you could refer to below codes:

   success: function () {
                      $("#tbl_vehicle").DataTable().ajax.reload();
                  }

  Result:

  

  Refresh datatable:https://datatables.net/forums/discussion/38969/reload-refresh-table-after-event

  Best regards,

  Yijing Sun

  ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >
• • Reply
  scala_1988

  Member

  42 Points

  184 Posts

  Re: DataTable not reloading after the form is submitted

  Jan 13, 2020 09:12 AM|scala_1988|LINK

  Thank You very much. It helped me a lot!!!