Show PHP output in jQuery Dialog box.

Question

There is a ping.php file, which is works great on its own:

Ping the given host, and shows the ping result immediately row by row on a web-page.

But I would like to show the ping result in a jQuery Dialog box,

Similarly, row_by_row.

Here is the jQuery code:

  $(function() {
    var tag = $("<div></div>");
    $("#button").on('click', function() {
      $.ajax({
        url: "/modules/ping.php?host=172.16.1.1",
        success: function(data) {
          tag.html(data).dialog({title: 'Ping', modal: false}).dialog('open');
        }
      });
    });
  });

But in this case the Dialog box only appears (and show the result), when the ping.php Completed the run, and I do not see the ping result row by row! This is not good.

Is it possible to fix this?

Answer 1

I'm assuming ping.php was previously included in an iframe or visited directly? This works because the PHP flushes it output to the browser after each ping and the data sent to your computer. The browsers holds a constant connection to the server while downloading these results.

Note, however, that when using ajax you're using the success callback, which fires when the page has finished loading, this is not compatible with the way your php script works.

You're going to have to look at a more complex solution, such as the javascript calling the PHP for each ping (so it can show the progress), or something that relies on websockets to push updates to the browser.

More detail can be found in questions like: What is the best way of showing progress on an Ajax call?