text: Q:
  
  How to use ajax and update img src and call php function?
  
  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:
  HTML: 
  <a href="" class="markBox" id="<?php echo $box->id ?>" name="markBox"><img src="<?php echo ( $box->complete == 1 ) ? "/images/checkbox-filled.png" : "/images/checkbox-empty.png" ?>" id="checkbox-<?php echo $box->id ?>" /></a>
  
  markBox.js:
          $.ajax( {
  
              type: "POST",
              url: "/scripts/markBox.php",
              data: data,
              cache: false,
  
              success: function( imageSource ) {
                  image.attr( 'src', imageSource );
              }
          } );
  
  markBox.php:
      //Return result
      if ( $box->complete == 1 )
          echo "/images/checkbox-filled.png";
      else
          echo "/images/checkbox-empty.png";
  
      exit;
  
  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?
  HTML:
              <div class="markBox"><?php echo $results->getCountComplete() ?> Complete</div>
          <div class="markBox"><?php echo $results->getCountNotComplete() ?> Incomplete</div>
  
  A:
  
  you don't need ajax at all: (unless you don't want to store your data to a database or a file): I hope this helps:
  http://jsfiddle.net/teeEx/
  HTML:
  <a href="javascript:;" id="check1"><span class="checked">&nbsp;</span></a>
  <a href="javascript:;" id="check2"><span class="unchecked">&nbsp;</span></a>
  <a href="javascript:;" id="check3"><span class="unchecked">&nbsp;</span></a>
  
  <div id="result"></div>
  
  CSS: 
  a{
      text-decoration: none;
  }
  span{
      display: block;
      width: 30px;
      height: 30px;
      margin: 20px;
  }
  span.checked{
     background: green;
  }
  span.unchecked{
     background: black;
  }
  
  JS:
  $('a').click(function(){
      var a_obj = $(this);
      var obj = a_obj.children('span');
      if( obj.is('.checked')){
       obj.removeClass('checked').addClass('unchecked');   
      } else {
       obj.removeClass('unchecked').addClass('checked');   
      }
  
      var all = a_obj.parent();
      var countChecked = all.find('span.checked').length;
      var countunChecked = all.find('span.unchecked').length;
      $('#result').html('checked '+countChecked+'; unckecked: '+countunChecked);
  });
  
  