Help with ob_flush and jquery

Ed_Dunn · November 10, 2015

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>

Jacques1 · November 10, 2015

This whole approach is just weird. You should look into Ajax and set up a proper PHP API to be accessed by JavaScript instead of messing with spaghetti code and ob_flush().

Edited November 10, 2015 by Jacques1

Ed_Dunn · November 10, 2015

ok, I will look into that. No very familiar with Ajax or really any of this for that matter. Thanks for the response.

QuickOldCar · November 10, 2015

Jquery is a combination of javascript and ajax supposedly to make everything easier.

As can see it's not, I'm not a jquery person myself, loads a huge library to do simple functions, buggy and unreliable.

Jacques1 · November 10, 2015

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.

benanamen · November 10, 2015

I have to agree with @Jaques1.

This: "I'm not a jquery person myself" pretty much disqualifies you to say this: "buggy and unreliable"

Jquery is VERY stable.

Edited November 10, 2015 by benanamen

Ed_Dunn · November 10, 2015

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

Jacques1 · November 10, 2015

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.

Ed_Dunn · November 10, 2015

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

Jacques1 · November 10, 2015

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.

Sign In

Help with ob_flush and jquery

Recommended Posts

Ed_Dunn

Link to comment

Share on other sites

Jacques1

Link to comment

Share on other sites

Ed_Dunn

Link to comment

Share on other sites

QuickOldCar

Link to comment

Share on other sites

Jacques1

Link to comment

Share on other sites

benanamen

Link to comment

Share on other sites

Ed_Dunn

Link to comment

Share on other sites

Jacques1

Link to comment

Share on other sites

Ed_Dunn

Link to comment

Share on other sites

Jacques1

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information