This topic contains 10 replies, has 2 voices, and was last updated by Sean Sean 2 years, 9 months ago.

Ajax Table Refresh Data


  • mcelikbnp
    Participant

    Posts: 11
    Member Reply #3471

    Hello

    I am using Ajax Datatable example from the theme. First it loads the data initially as soon as we open up the page.

    Then I added a textbox and I want to change data as soon as user stars typing a word. So if they are looking for “Test”, as soon as they type T I want to show only those that starts with T, then Te, then Tes and finally ONLY “Test” entry.

    So I have two issues:

    This is my code (my addition) in datatable.js:

    table.on(‘keypress’, ‘.cam_id’, function(e) {
    e.preventDefault();
    the.submitFilter();

    });

    Now, when user types a word, textbox gets stuck! It doesn’t allow user to type! This is issue #1

    Issue #2 is it does refresh the table at all! I changed “OnKeyPress” to “Blur” so when the textbox loses focus my code will be called:

    table.on(‘blur’, ‘.cam_id’, function(e) {
    e.preventDefault();
    the.submitFilter();

    });

     

    I can see in Network tab of Firebug, clearly, filters worked, my PHP code in backend, returned correct result, which is only 1 entry, but the table does not get refreshed! It stays same!

    What am I missing?

     

    Thank you!


    mcelikbnp
    Participant

    Posts: 11
    Member Reply #3486

    Hello?

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #3492

    Hi,

    Can you provide us a test link to your developing site in a private reply or provide us your JS script(as file attachment) file where you are put the above code. We will need to check your entire code and debug it in order to advise further.

    Thanks.


    mcelikbnp
    Participant

    Posts: 11
    Member Reply #3493

    Hello Sean,

     

    I tried two different methods:

    1) I put this in table-datatable.ajax.js (assets\pages\scripts\table-datatable.ajax.js)

    grid.getTableWrapper().on(‘blur’, ‘.cam_id’, function (e) {
    grid.setAjaxParam(“cam_id”, $(‘#cam_id’).val());
    grid.getDataTable().ajax.reload();
    grid.clearAjaxParams();
    TableDatatablesAjax.init();
    handleRecords();
    });

     

    2) I tried this in datatable.js (assets\global\scripts\datatable.js)

     

    table.on(‘blur’, ‘.cam_id’, function(e) {
    e.preventDefault();
    the.submitFilter();

    });

    Please let me know how can I destroy current table, refresh/reload/redraw table with newly received JSON. I can see new JSON in jqXHR.

    It is a little urgent now as I’m stuck at step 101 of implementing this theme now for several days. You can tell me any location to put the right code, I can place the right code in any location. Please advise!

    • This reply was modified 2 years, 9 months ago by  mcelikbnp.
    • This reply was modified 2 years, 9 months ago by  mcelikbnp.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #3513

    Hi,

    Below code should be able to reload the datatable on input blur event.

    grid.getTableWrapper().on(‘blur’, ‘.cam_id’, function (e) {
    grid.setAjaxParam(“cam_id”, $(‘#cam_id’).val());
    grid.getDataTable().ajax.reload();
    grid.clearAjaxParams();
    });

    But not sure why you are calling TableDatatablesAjax.init(); and handleRecords() ?

    I would suggest you to try to run the datatable reload function somewhere else as testing:

    grid.setAjaxParam(“cam_id”, $(‘#cam_id’).val());
    grid.getDataTable().ajax.reload();
    grid.clearAjaxParams();

    And put it into the blue event once table reload code works as expected.

    Thanks.

     


    mcelikbnp
    Participant

    Posts: 11
    Member Reply #3516

    I did this:

     

    grid.getTableWrapper().on(‘blur’, ‘.cam_id’, function (e) {
    grid.setAjaxParam(“cam_id”, $(‘#cam_id’).val());
    grid.getDataTable().ajax.reload();
    grid.clearAjaxParams();
    });

     

    Didn’t work. I already tried this before. As it didn’t reload/refresh, I ended up trying those additional function calls.

    Still no progress, it’s not working.

    • This reply was modified 2 years, 9 months ago by  mcelikbnp.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #3542

    Hi,

    Please try to code outside grid.getTableWrapper().on(‘blur’, ‘.cam_id’, function (e) { event.

    I am not sure how you are accessing to cam_id elements but first just double check the datatable’s API to reload the grid is working.

    Can you try below event handler also:

    grid.getTableWrapper().find(‘.cam_id‘).on(‘blue’, function(){
    alert(1);
    });

    First please try to test .cam_id blur event first before you execute the grid load.

    Thanks.


    mcelikbnp
    Participant

    Posts: 11
    Member Reply #3543

    Hi,

    Thank you. I tried the code and yes I get alert. I know those parts are just fine. There is something wrong in the your wrapper code I would say. I also have several console.log different places.

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #3551

    Hi,

    Can you please provide a test link to your developing page in a private reply ? If we can test your page online we will be able to help you more effectively. We have checked the the grid reload API in your end it seems working fine. Just need to check it in your end.

    Thanks.


    mcelikbnp
    Participant

    Posts: 11
    Member Reply #3608

    Hey,

    You have another big problem in Ajax table, this is guaranteed bug.

    Go here: http://www.keenthemes.com/preview/metronic/theme/admin_3/table_datatables_ajax.html

    Then open Network console. Click next page, it will increase “Draw” parameter to next page. Then click BACK, it will still INCREASE “Draw” not decrease.

    Can you tell me where should I fix this one? This one is more urgent. I somehow fixed the ajax table refresh one.

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #3609

    Hi,

    Please note the draw parameter is number of requests and its not used to for pagination. To detect the pagination you can refer to “start” and “length” parameters.

    If you need any further clarifications please let us know.

    Thanks.

You must be logged in to reply to this topic.