table .draw(); not working in jquery and laravel

waweru99 karanja

i have a data table whereby upon adding or updating a specific record in a data table it automatically updates the row without table refresh. I have been able to achieve all that but when it comes to updating the data table row it doesn't work. am using a table.draw();, but it doesn't fire up.I have initialized the data table accordingly but when I run the draw() code it doesn't work. where might I be doing it wrong. here is my code

// show products in a datatable

    var propertycatstable = $('#propertycategorytable').DataTable({
      processing:true,
      serverside:true,

      ajax:"{{ route('get_propertycategories') }}",
      columns: [
        { data: 'id' },
        { data: 'propertycat_title' },
        {data: 'status',
                "render": function (data, type, row) {

                  if ( row.status == '1') {
                    return 'Active';
                  }else {
                      return 'In_Active';
                  }
                }

            },
        { data: 'action',name:'action',orderable:false,searchable:false },
      ]
    });

    // add a new property category
    $(document).ready(function(){

      $('.modal-title').html('Create A New Property Category');
      $('.save_button').html('Save Property Category');

      var form = $('#propertcat_form')[0];

      $('.save_button').click(function(){
        $('.error_messages').html('');

        var formdata=new FormData(form);
        console.log(formdata);

        $.ajax({
          url:'{{ route("storepropertycat") }}',
          method:'POST',
          processData:false,
          contentType:false,
          data:formdata,
          success:function(response)
          {

            alertify.set('notifier','position', 'top-right');
            alertify.success(response.success);
            propertycatstable.draw(); //this is the code that isn't firing
            $('.propertycategory').modal('hide');
            console.log(response)

          }
        }

allan

That looks like it should work. You are using server-side processing, so a call to draw() will trigger an Ajax call and fetch the latest data.

Can you give me a link to a page showing the issue so I can debug it please?

Allan

waweru99 karanja

hi allan sorry for the slow response..its on localhost but I will upload the necessary files have a look

allan

There is nothing obvious I'm afraid. If you can give me a link to the page so I can see it running, that would help.

Allan

kthorngren

//this is the code that isn't firing

When you say its not firing do you mean you don't see an Ajax request to the server?

Do you get errors in the browser's console?

Kevin

waweru99 karanja

@kthorngren am not seeing any error,but the ajax request works on all the other codes that are above it and below it

kthorngren

propertycatstable.draw();

With server side processing this will send an ajax request to the server to refresh the page data. Are you seeing the request to the server? Use the browser's network inspector tool to see if the XHR request is being sent to the ajax url defined.

As Allan asked please post a link to your page so we can take a look.

Kevin

waweru99 karanja

i have attached the controller that process the and send the response and the file that contains the script in one my comments above...
this code is the one that processes the response sent back to script

 // add a new property category
    $(document).ready(function(){

      $('.modal-title').html('Create A New Property Category');
      $('.save_button').html('Save Property Category');

      var form = $('#propertcat_form')[0];

      $('.save_button').click(function(){
        $('.error_messages').html('');

        var formdata=new FormData(form);
        console.log(formdata);

        $.ajax({
          url:'{{ route("storepropertycat") }}',
          method:'POST',
          processData:false,
          contentType:false,
          data:formdata,
          success:function(response)
          {

            alertify.set('notifier','position', 'top-right');
            alertify.success(response.success);
            propertycatstable.Draw();
            $('.propertycategory').modal('hide');
            console.log(response)

          }

        });
      })
    })

kthorngren

Line 26 now has this:

propertycatstable.Draw();

The d in draw is lower case not upper.

You aren't answering my question. You say that propertycatstable.draw(); doesn't fire. I'm trying to understand what that means. Do you see the XHR request being sent using the browser's network inspector tool. You should see the request sent to ajax:"{{ route('get_propertycategories') }}",. If you can't provide a link to your page so we can help debug then please provide more details of exactly what happens. Saying it doesn't fire is not enough for us to help.

Kevin

waweru99 karanja

i changed the code from propertycatstable.draw(); to propertycatstable.ajax.reload(); and the line of code executes..i think it all depends with the datatable version

allan

Perhaps - if you were previously using a very old one. However, without a test case showing the issue it is really impossible for us to say what was wrong.

Allan