jQuery have to wait for php

Question

I'm devloping a tool with MySQL, HTML5, jQuery and Json. On my website I have 3 tables, but one of them has to be transposed. So I write this:

$(document).ready(function () {
  $('#druckerdetails').dataTable({
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": false,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false,
    "bProcessing": true,
    "bServerSide": false,
    "sAjaxSource": 'php/index_druckerdetails.php?druckername=RAGPLM002'
  });
  $(function () {
    var table = $('#druckerdetails');
    alert('Besten Dank, dass Sie isyPrint benutzen :)');
    table.find('thead tr').detach().prependTo(table.find('tbody'));
    var t = table.find('tbody').eq(0);
    var r = t.find('tr');
    var cols = r.length;
    var rows = r.eq(0).find('td,th').length;
    var cell, next, tem, i = 0;
    var tb = $('<tbody></tbody>');
    while (i < rows) {
      cell = 0;
      tem = $('<tr></tr>');
      while (cell < cols) {
        next = r.eq(cell++).find('td,th').eq(0);
        tem.append(next);
      }
      tb.append(tem);
      ++i;
    }
    table.find('tbody').remove();
    $(tb).appendTo(table);
    $(table)
      .find('tbody tr:eq(0)')
      .detach()
      .appendTo(table.find('thead'))
      .children();
    table.show();
  });
});

With this alert all is fine and works, because the php-file has enough time to return the Json-String. But if there is no alert, the JavaScript doesn't wait for the data of the php whith the MySQL-query. So the data is missing in on the website.

Without alert: http://www.computerbase.de/forum/attachment.php?attachmentid=359923&d=1377067918

So here is the timeline (isyprint_home.js & index_druckerdetails.php): http://www.computerbase.de/forum/attachment.php?attachmentid=359927&d=1377072271

So what I have to do, that the js-file waits until the json-string was returned?

Thanks and sorry for my bad English

Guerra · Accepted Answer · 2013-08-22 14:48:18Z

1

You can use deferred render:

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "sAjaxSource": "sources/arrays.txt",
        "bDeferRender": true
    } );
} );

Font

if the datatable can't treat you problem, i recomend you to get the json feed from separated ajax call, and when its finish you put it in the datatable. Like this:

var feed;
 $.ajax({
   type: 'POST',
   url:  'www.test.com/mydatatablefeed',
   success: function(data){
      feed = data;    
   }
   });

 $('#example').dataTable( {
        "aaData": feed
    } );   
} );

edited Aug 22, 2013 at 14:48

answered Aug 22, 2013 at 14:23

Guerra

2,7882 gold badges24 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mateusz · Accepted Answer · 2013-08-22 14:20:59Z

0

Use ajaxComplete or data table callback which should be called when data is actually returned. You can also add callback to event when loading data has failed, so you can notify user about failure.

answered Aug 22, 2013 at 14:20

Mateusz

2,32720 silver badges29 bronze badges

Comments

Nick Veys · Accepted Answer · 2013-08-22 14:26:46Z

The ajax source is used to load the data asynchronously, so this behavior is expected. You need to link your "transposition" code to a notification that data was loaded, or modify it as it's being loaded. Personally, I would fix this "problem" in the PHP returning the JSON, so it gives the table data in a format it understands.

But if you want to go with this, the callbacks have a function where you can override the data fetching: http://datatables.net/usage/callbacks

fnServerData This parameter allows you to override the default function which obtains the data from the server ($.getJSON) so something more suitable for your application. For example you could use POST data, or pull information from a Gears or AIR database.

Here's an example showing how to do additional processing w/the data: http://datatables.net/examples/server_side/custom_vars.html

Collectives™ on Stack Overflow

jQuery have to wait for php

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related