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

• • Reply
  scala_1988

  Member

  39 Points

  163 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

  Participant

  760 Points

  324 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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• • Reply
  scala_1988

  Member

  39 Points

  163 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!!!