Can I get realtime PHP data to appear in a jquery dialog box?

Question

I'm trying to combine two ideas but I am not sure if they are compatible with one another.

Idea 1: Have a php script run a command (EG: ping) and provide live results of the command in the web browser.

Idea 2: Have a jQuery dialog box appear which, on open, runs the php script and provides the live results in the dialog box.

Idea 1 was fairly easy to accomplish (ping.php):

<?php
header('Content-Type: text/html; charset=utf-8');
set_time_limit(1800);
ob_implicit_flush(true);
ob_end_flush();

$exe_command = 'C:\\Windows\\System32\\ping.exe -n 10 google.com';

$descriptorspec = array(
    0 => array("pipe", "r"),  // stdin
    1 => array("pipe", "w"),  // stdout -> we use this
    2 => array("pipe", "w")   // stderr 
);
flush(); 

$process = proc_open($exe_command, $descriptorspec, $pipes);
echo "<pre>";  

if (is_resource($process))
{
    while ($s = fgets($pipes[1])) {  
        print $s; 

        flush();  
    }  
}
echo "</pre>"; 
?>

If I open ping.php in my browser I get a line by line response YAY!!

Idea 2 is whats giving me trouble. I can get the dialog box to open but the data does not appear until after the php finished working. This is likely the nature of ajax so I am probably way off the mark on the right way to do this.

Here is the javascript I have in my index.html:

<script language="Javascript">

function testGetScript() {
    $.getScript("./cgi-bin/ping.php", function(data) {
        var divResults = document.getElementById('pingMe');
        divResults.innerHTML = data;
    });
}

function initDialogs() {
    $('#testDialog').dialog({
        autoOpen: false,
        width: 800,
        title: "PINGING.....",
        modal: true,
        open: function(event, ui) {
            testGetScript();
        },
        close: function() {
            $(this).dialog("close");
            },
        buttons: [
            {text: "Done", click: function() {
                $(this).dialog("close");
            }}
        ]
    });

}

$(document).ready(function(){
    initDialogs();

    $("*[class='btn']").button().click(function() {
            $('#testDialog').dialog('open');
    });

</script>

Anyone have any thoughts on whether or not this is possible? If so do you have any advise on how this can be accomplished?

What you're trying to accomplish is often called "streaming", which [this question tries to resolve](http://stackoverflow.com/questions/7740646/jquery-ajax-read-the-stream-incrementally). Good luck, not an extremely simple thing to do. — , Jul 29 '13 at 18:57

score 2 · Answer 1 · edited May 23 '17 at 12:29

2

Use jQuery.get() to request your PHP page, getScript is for loading javascript files.

$.get('yourpage.php', {}, function(data, status, xhr) {
    // all done, get your content from the data variable.
});

If you show your popup in the body of the get call instead of calling the get from the dialog then the dialog will show after it has all the data.

EDIT: AJAX seems to wait for readyState 4 before displaying any information. PHP flush seems to send a readyState of 3. You will need to listen for that and fill in the responseText.

There are a few potential bugs that may require disabling compression and setting the content type to application/octet-stream.

edited May 23 '17 at 12:29

Community

1
1

answered Jul 29 '13 at 18:51

CuddleBunny

1,941
2
23
45

1

This is the way I thought I would need to go but unfortunately it only displays the final outcome of the ping.exe command. Its not a live view. – Satarian Jul 30 '13 at 17:01
1

Just a hunch, I have little experience in the matter: perhaps there is something to do with that output buffering that could cause/fix that issue? This question has some information: http://stackoverflow.com/questions/3276542/does-php-flush-work-with-jquerys-ajax – CuddleBunny Jul 31 '13 at 14:20
Some further searching lead me to this post on php.net: http://www.php.net/manual/en/function.flush.php#91556 – CuddleBunny Jul 31 '13 at 14:29
what I did as a work around what created an iframe inside my dialog box and on open a had a function which updated the SRC to my PHP this worked successfully. Thanks everyone for the advise and suggestions. – Satarian Jul 31 '13 at 19:17
You should add it as an answer in case anyone needs to do something similar in the future. – CuddleBunny Aug 02 '13 at 18:43

score 0 · Answer 2 · answered Jul 29 '13 at 18:52

You can do this the way you are doing it except you need to use the done function for jQuery's getScript.

http://api.jquery.com/jQuery.getScript/

I prefer using their ajax function

http://api.jquery.com/jQuery.ajax/

If you need it to update setup a js interval/timeout

score 0 · Accepted Answer · answered Aug 30 '13 at 17:22

As suggested I am marking down my work around as an answer to this question so that others may benefit from this.

First I added an iFrame to the dialog box in the index.html:

<div id="pwrShellDiagWC" style="display: none;">
<iframe id="ajaxFrameWC" src="" width="100%" height="60%"; frameborder="0"></iframe>
</div>

Then in Javascript (using jQuery) I initialized this dialog box adding code to the "open" option to load the php url into the iFrame:

$('#pwrShellDiagWC').dialog({
autoOpen: false,
width: 800,
title: "Processing your request",
resizable: false,
modal: true,
open: function(event, ui) {
    var frameAttrib = $('#ajaxFrameWC').attr('src');
    var phpURL = './cgi-bin/test.php?value1=arg1';

    if (frameAttrib) {
         // do nothing!
    }
    else {
         $('#ajaxFrameWC').attr('src',phpURL)
    }
});

I had some buttons added as well but I don't believe you need to see that for this to work. The test.php uses the code I put in my question and displays line by line in the dialog box.

The only aspect I am working out now is to force the iFrame to stay scrolled at the bottom but I am sure a few well placed searches will get my past that small hurtle.

Cheers, Hope this is helpful to some!

score 0 · Answer 4 · edited May 23 '17 at 12:23

I meet the same problem, as my search result, you can use XMLHttpRequest.

<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript" language="javascript">
function changeText() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/test.php', true);
    xhr.send(null);
    var timer;
    timer = window.setInterval(function() {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            window.clearTimeout(timer);
            $('body').append('done <br />');
        }
        $('#phanxMessage').html(xhr.responseText);
        console.log(xhr.responseText);
    }, 1000);
}

</script> 
</head>
<body>
<input id="submit" onclick="changeText();" type="button" value="Get PHP Response"/>
<textarea id="phanxMessage" rows="30" cols="100">
</textarea>
</body>
</html>

see [1]: jquery ajax, read the stream incrementally?

Can I get realtime PHP data to appear in a jquery dialog box?

4 Answers4

Linked