title: How to use ajax and update img src and call php function?
body: <p>There is a list of checkboxes. User clicks on image of a "unchecked checkbox". Ajax sends request to php script which updates database and echo's new image source of a "checked checkbox". This works fine, and is below:</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;a href="" class="markBox" id="&lt;?php echo $box-&gt;id ?&gt;" name="markBox"&gt;&lt;img src="&lt;?php echo ( $box-&gt;complete == 1 ) ? "/images/checkbox-filled.png" : "/images/checkbox-empty.png" ?&gt;" id="checkbox-&lt;?php echo $box-&gt;id ?&gt;" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>markBox.js:</p>
  
  <pre><code>        $.ajax( {
  
              type: "POST",
              url: "/scripts/markBox.php",
              data: data,
              cache: false,
  
              success: function( imageSource ) {
                  image.attr( 'src', imageSource );
              }
          } );
  </code></pre>
  
  <p>markBox.php:</p>
  
  <pre><code>    //Return result
      if ( $box-&gt;complete == 1 )
          echo "/images/checkbox-filled.png";
      else
          echo "/images/checkbox-empty.png";
  
      exit;
  </code></pre>
  
  <p>The challenge is that I have php function that is called earlier, above the list of checkboxes, to display to user how boxes are checked and how many are not. I want this box to be called and refresh as the image does. How do I rerun the php function to run again once the ajax comes back?</p>
  
  <p>HTML:</p>
  
  <pre><code>            &lt;div class="markBox"&gt;&lt;?php echo $results-&gt;getCountComplete() ?&gt; Complete&lt;/div&gt;
          &lt;div class="markBox"&gt;&lt;?php echo $results-&gt;getCountNotComplete() ?&gt; Incomplete&lt;/div&gt;
  </code></pre>