Jump to content

Help with ob_flush and jquery


Ed_Dunn

Recommended Posts

I am having a bit of an issue with ob_flush in particular.  What's happening is I am using jquery UI to create a tabbed div.  With in one of the DIV's I print out the live output on an apache ant command using ob_flush, however that also seems to flush jquery as well which breaks all of my formating.  Once the ant command is complete, the formatting returns to normal.  Does any one know any way around this issue?  I am assuming that jquery is being flushed as well.

 

Here is the page I am running, the live output of ant is displaying like I would like but like I said the formatting get's flushed

<html>
    <head>
        <link rel="stylesheet" href="css/jquery-ui.css">
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <script src="scripts/jquery-ui.min.js"></script>
        <script src="scripts/jquery-ui.js"></script>
        <script language="javascript">
            function clearform() {
                document.getElementById("json").value="";
            }
        </script>
        <script>
            $(function() {
                $( "#tabs" ).tabs();
            });
        </script>
        <title>Add Manual Event Data</title>
        <?php
            if (empty($_POST["comment"])) {
                $comment = "";
            }
            else {
                $cleaned = test_input($_POST["comment"]);
                $comment = ($_POST["comment"]);
            }

            function test_input($data) {
                $data = trim($data);
                $data = addslashes($data);
                return $data;
            }
        ?>
    </head>
    <body>
        <div id="tabs" class="body-check">
            <ul>
                <li><a href="#tabs-1">Event By String</a></li>
                <li><a href="#tabs-2">Add Event Form</a></li>
            </ul>
            <div id="tabs-1">
                <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
                    <center><h1>Add Event Data:</h1></center>
                    <p>
                        <textarea id="json" name="comment"><?php echo $comment;?></textarea>
                    </p>
                    <input type="submit" name="submit" value="Submit">
                </form>
                <?php
                    if (isset($cleaned)){
                        echo '<div id="ant">';
                        $json_arg = escapeshellarg($cleaned);
                        $proc = popen("sudo /var/www/html/scripts/set_vars.sh $json_arg 2>&1", 'r');
                        echo '<pre>';
                        while (!feof($proc)){
                            echo fread($proc, 1024);
                            @ob_flush();
                            @flush();
                        }
                        echo '</pre>';
                        echo '</div>';
                        echo '<script>';
                        echo 'setTimeout( function ( ) { alert( "Event Added!" ); }, 2000 );';
                        echo 'clearform();';
                        echo '</script>';
                    }
                ?>
            </div>
            <div id="tabs-2">
                <h1>Hello!</h2>
            </div>
        </div>
    </body>
</html>

Link to comment
Share on other sites

Not sure if I understand you correctly. Are you saying that jQuery is unnecessary, bloated and buggy? Then I have to disagree.

 

jQuery is an excellent framework which does make life a lot easier, because you don't have to write tons of low-level boilerplate code to get things done. It's not huge at all. The compressed file of jQuery 2 is just 80 kB, which is probably less than the website logo. I don't remember encountering a single bug in jQuery, but I do remember a lot of bugs in plain JavaScript code (especially browser incompabilities).

 

Personally, I've andoned plain JavaScript entirely (even for small project), and I certainly don't want to go back to the days where I had to write 100 lines of code only to make a friggin' Ajax request. ;)

  • Like 1
Link to comment
Share on other sites

I have adjusted my code slightly to call the file a file from Ajax however it does not show it in real time, it just prints it out once the script is complete.  I am sure this is an Ajax thing, maybe some one could help? 

 

index.php

<html>
    <head>
        <link rel="stylesheet" href="css/jquery-ui.css">
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <script src="scripts/jquery-ui.min.js"></script>
        <script src="scripts/jquery-ui.js"></script>
        <script language="javascript">
            function clearform() {
                document.getElementById("json").value="";
            }
        </script>
        <script>
            $(function() {
                $( "#tabs" ).tabs();
            });
            
            $.ajax({
                url: "ant.php",
                type: 'GET',
                dataType: 'html',
                success: function(data){
                    $("#ant").html(data);
                }
            });
        </script>
        <title>Add Manual Event Data</title>
        <?php
            if (empty($_POST["comment"])) {
                $comment = "";
            }
            else {
                $cleaned = test_input($_POST["comment"]);
                $comment = ($_POST["comment"]);
            }

            function test_input($data) {
                $data = trim($data);
                $data = addslashes($data);
                return $data;
            }
        ?>
    </head>
    <body>
        <div id="tabs" class="body-check">
            <ul>
                <li><a href="#tabs-1">Event By String</a></li>
                <li><a href="#tabs-2">Add Event Form</a></li>
            </ul>
            <div id="tabs-1">
                <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
                    <center><h1>Add Event Data:</h1></center>
                    <p>
                        <textarea id="json" name="comment"><?php echo $comment;?></textarea>
                    </p>
                    <input type="submit" name="submit" value="Submit">
                </form>
                
                <?php
                    if (isset($cleaned)){
                        echo '<div id="ant"></div>';
                    }
                ?>
            </div>
            <div id="tabs-2">
                <h1>Hello!</h2>
            </div>
        </div>
    </body>
</html>

ant.php

<?php
     $json_arg = escapeshellarg($cleaned);
     $proc = popen("sudo /var/www/html/scripts/set_vars.sh $json_arg 2>&1", 'r');
     echo '<pre>';
     while (!feof($proc)){
        echo fread($proc, 256);
        @flush();
        @ob_flush();
        echo "<script>window.scrollTo(0,99999);</script>";
        usleep(200);
     }
     pclose($proc);
     echo '</pre></div>';
     echo '<script>';
     echo 'window.scrollTo(0,99999);';
     echo 'setTimeout( function ( ) { alert( "Event Added!" ); }, 2000 );';
     echo 'clearform();';
     echo '</script>';
?>

I am assuming that it's because AJAX waits for the script to complete before showing it.  I also know that I haven't completed the function yet as I still need to 'POST' a variable, but 1 thing at a time.

 

Thank you

Link to comment
Share on other sites

I don't think you've understood Ajax yet. Please give yourself at least a day or two to learn the basics. And then try to actually conceptualize the code before you write it.

 

I mean, sure, we could do this the trial-and-error way. But then we'll spend at least a week on bugfixes, which IMHO sucks.

Link to comment
Share on other sites

You're right, I don't understand it, 99% of my coding is in Perl and I've been asigned this task because I am the only one in my company that has any experience with PHP at all which is why I am asking for help so that I may be pointed in the right direction.

 

Thanks

Link to comment
Share on other sites

You need to run the set_vars.sh in the background so that the first Ajax request returns immediately. Then you periodically make a new Ajax request to get the current output of the long-running set_vars.sh process.

 

As a basic example:

  • When you first start the process, you generate a random identifier and pass it to the process as well the the client.
  • The process runs in the background and appends its output to a file named something like <identifier>.txt.
  • Each Ajax request reads from <identifier>.txt, starting at the last offset of the previous request. So the first request starts at offset 0 and gets, say, 38 bytes of output. The next request starts at 38 etc.
  • When the process is done, the server tells the client to stop making requests.

There are certainly more sophisticated solutions, but this should be the easiest one.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.