title: Update page content from live PHP and Python output using Ajax
body: <p>Long-time user, first-time asker. I've learned so much from the community and I love this site. </p>
  
  <p>So here is what I'm shooting for. I want to have a web interface that runs ping commands on the backend. I ideally want a website that has a text input that allows you to enter an IP address or domain, a button that runs the command and a python script that runs from PHP to actually run the ping command. The tricky part for was to get the output to print to the website live as it is outputted on the command line. I want to do it this way as a way to future-proof the concept and eventually use different iperf parameters. </p>
  
  <p>I built a little PHP page that "technically" gets the job done but I can't figure out how to only call the PHP script when the button is clicked. Since it's a PHP page, it runs whenever the page is loaded. So after some research, I figure ajax jquery is what I'm looking for. I've spent about 2 days trying different things that get me really close but it seems that I'm dancing around my solution. </p>
  
  <p>From what I've learned about ajax, I essentially need a button that runs an ajax function that is linked to my working php script. I can get it to run the script but I can't get it to update the page content in a live/continuous manner. Only when the command is finished running. </p>
  
  <p>Here is my php page that does what it needs to do but does it everytime the page is loaded/reloaded. Not ideal. I want the script to only run when the button is pressed. </p>
  
  <p>liveping.php:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;form action="liveping.php" id="ping" method="post" name="ping"&gt;
    Domain/IP Address: &lt;input name="domain" type="text"&gt; &lt;input name="ping" type="submit" value="Ping"&gt;
   &lt;/form&gt;&lt;?php
  
   if (isset($_POST['ping'])) {
     function liveExecuteCommand($cmd)
     {
         while (@ ob_end_flush()); // end all output buffers if any
  
         $proc = popen("$cmd 2&gt;&amp;1", 'r');
  
         $live_output     = "";
         $complete_output = "";
  
         while (!feof($proc))
         {
             $live_output     = fread($proc, 4096);
             $complete_output = $complete_output . $live_output;
             echo "&lt;pre&gt;$live_output&lt;/pre&gt;";
             @ flush();
         }
  
         pclose($proc);
     }
   }
  
   $domain =  $_POST['domain'];
  
   $pingCmd = "python /var/www/html/ping.py ".$domain;
  
   if (isset($_POST['ping'])) {
     liveExecuteCommand($pingCmd);
   }
  
   ?&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>ping.py:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>#!/usr/bin/python
  import cgi
  import os
  import sys
  ping = "ping -c 5 -W 2 "+sys.argv[1]
  os.system(ping)</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>Some things I've tried:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script&gt;
          var ajax = new XMLHttpRequest();
          ajax.onreadystatechange = setInterval(function() {
              if (ajax.readyState == 4) {
                  document.getElementById('content').innerHTML = ajax.responseText;
              }
          },100);
          function updateText() {
              ajax.open('GET', 'ajax.php');
              ajax.send();
          }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;button onclick="updateText()"&gt;Click Me&lt;/button&gt;
          &lt;div id="content"&gt;Nothing here yet.&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
  OR </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;body&gt;
    &lt;head&gt;
     &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"&gt;&lt;/script&gt;
  
     &lt;script type="text/javascript"&gt;
        var auto_refresh = setInterval(
           function ()
           {
              $('#load_tweets').load('ajax.php').fadeIn("slow");
           }, 1000); // refresh every 10000 milliseconds
     &lt;/script&gt;
  
    &lt;/head&gt;
  
       &lt;div id="load_tweets"&gt; &lt;/div&gt;
   
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>WITH ajax.php</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  while (@ ob_end_flush()); // end all output buffers if any
  
  $proc = popen("ping -c 5 -W 2 google.com", 'r');
  
  $live_output     = "";
  $complete_output = "";
  
  while (!feof($proc))
  {
      $live_output     = fread($proc, 4096);
      $complete_output = $complete_output . $live_output;
      echo "&lt;pre&gt;$live_output&lt;/pre&gt;";
      @ flush();
  }
  
  pclose($proc);
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for any help!</p>