CODEWITHSUNDEEP
phpjqueryhtmlajax
Satarian
Satarian

Reputation: 107

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

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?

Upvotes: 2

Views: 2833

Answers (4)

phanx
phanx

Reputation: 41

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?

Upvotes: 0

Satarian
Satarian

Reputation: 107

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!

Upvotes: 0

CuddleBunny
CuddleBunny

Reputation: 1981

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.

Upvotes: 2

hendr1x
hendr1x

Reputation: 1501

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

Upvotes: 0

Related Questions