title: Toggling mysql databse display with button, the updated icon is only changing on page refresh
body: <p>I have managed to edit a specific value in my mysql database with a single click on the currently displayed icon. This changes the value from a 0 to 1 and vice versa if you click again.  Problem is the icon  updates the the new one only if you refresh the page. In fact when I click the current icon I get a sort of invalid icon.  See image.  I have attached my code, can anyone suggest what is wrong.
  <a href="http://i.stack.imgur.com/kd1Gk.jpg" rel="nofollow">displayed table</a></p>
  
  <p>Here is the code</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
  function getXMLHTTPRequest() {
     var req =  false;
     try {
        /* for Firefox */
        req = new XMLHttpRequest(); 
     } catch (err) {
        try {
           /* for some versions of IE */
           req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (err) {
           try {
              /* for some other versions of IE */
              req = new ActiveXObject("Microsoft.XMLHTTP");
           } catch (err) {
              req = false;
           }
       }
     }
     return req;
  }
  function updateToggle(obj,id){
      obj.style.backgroundColor = '#cc0000';
      var updReq = getXMLHTTPRequest();
      var url = 'updateToggle.php';
      var vars = 'id='+id+'&amp;value='+obj.value;
      updReq.open('POST', url, true);
      updReq.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      updReq.onreadystatechange = function() {//Call a function when the state changes.
          if(updReq.readyState == 4 &amp;&amp; updReq.status == 200) {
              if(updReq.responseText == 'N'){
                  obj.style.backgroundColor = '#cc8800';
              }else{
                  if(obj.value == '1'){
                      obj.value = '0';
                  }else{
                      obj.value = '1';
                  }
                  obj.src = updReq.responseText;
                  obj.style.backgroundColor = '#0000cc';
              }
          }
      }
      updReq.send(vars);
  }
  &lt;/script&gt;
  
  
  
  &lt;?php include("e:\\wamp\\www\\IR_Timecapture\\protector\\password_protect.php"); ?&gt;
  &lt;?php
  include "db.inc.php";
  
  if (isset($_GET["page"])) { $page  = $_GET["page"]; } else { $page=1; }; 
  $start_from = ($page-1) * 15; 
  $sql = "SELECT * FROM ircb ORDER BY id DESC LIMIT $start_from, 15";
  
  $rs_result = mysql_query ($sql);
  $num_rows = mysql_num_rows($rs_result);
  $query = mysql_query("SELECT * FROM ircb"); 
  $number=mysql_num_rows($query); 
  
  print "&lt;img src=\"backgrounds/untitled2.png\" border=\"0\"&gt; &lt;/P&gt;";
  
  
  print "&lt;table class=\"table1\"    STYLE=\"word-wrap:break-word;\"   width=1210 border=\"1\"  bordercolor=\"#000000\" bgcolor=\"E6E6E6\" style=\"border-collapse: collapse\"   cellpadding=\"2\" cellspacing=\"1\"&gt; 
  
  
  &lt;tr&gt;
  &lt;td  height=\"44px\"  background=backgrounds/marblish.jpg&gt;&lt;font size=5 color=\"#FFFF00\"&gt;&lt;b&gt;Entry Date&lt;/b&gt;&lt;/font&gt;&lt;/td&gt; 
  &lt;td  height=\"44px\"  background=backgrounds/marblish.jpg&gt;&lt;font size=5 color=\"#FFFF00\"&gt;&lt;b&gt;Staff&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
  &lt;td  height=\"44px\"  background=backgrounds/marblish.jpg&gt;&lt;font size=5 color=\"#FFFF00\"&gt;&lt;b&gt;Start Time&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
  &lt;td  height=\"44px\"  background=backgrounds/marblish.jpg&gt;&lt;font size=5 color=\"#FFFF00\"&gt;&lt;b&gt;End Time&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
  &lt;td  height=\"44px\"  background=backgrounds/marblish.jpg&gt;&lt;font size=5 color=\"#FFFF00\"&gt;&lt;b&gt;Total Time&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
  &lt;td  height=\"44px\"  background=backgrounds/marblish.jpg&gt;&lt;font size=5 color=\"#FFFF00\"&gt;&lt;b&gt;Service&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
  &lt;td  height=\"44px\"  background=backgrounds/marblish.jpg&gt;&lt;font size=5 color=\"#FFFF00\"&gt;&lt;b&gt;Entry&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
  &lt;td  height=\"44px\"  background=backgrounds/marblish.jpg&gt;&lt;font size=5 color=\"#FFFF00\"&gt;&lt;b&gt;Comp&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
  &lt;td  height=\"44px\"  background=backgrounds/marblish.jpg&gt;&lt;font size=5 color=\"#FFFF00\"&gt;&lt;b&gt;Travel&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
  &lt;td  height=\"44px\"   background=backgrounds/marblish.jpg&gt;&lt;font size=5 color=\"#FFFF00\"&gt;&lt;b&gt;Info&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
  &lt;td  height=\"44px\"   background=backgrounds/marblish.jpg&gt;&lt;font size=5 color=\"#FFFF00\"&gt;&lt;b&gt;Edit&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
  &lt;td  height=\"44px\"   background=backgrounds/marblish.jpg&gt;&lt;font size=5 color=\"#FFFF00\"&gt;&lt;b&gt;Entered&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
  
  \n";
  
  
  // Define $color=1
  $color="1";
  
  while($rows=mysql_fetch_array($rs_result))
  {
      $id = $rows["id"];
      $enter = $rows ["enter"];
  
  
  // If $color==1 table row color = #9B9D9F
      if($color==1){ ?&gt;
         &lt;tr bgcolor='#9B9D9F'&gt;
             &lt;td&gt;&lt;?= $rows['cdate'] ?&gt;&lt;/td&gt;
             &lt;td&gt;&lt;?= $rows['staff'] ?&gt;&lt;/td&gt;
             &lt;td&gt;&lt;?= $rows['start'] ?&gt;&lt;/td&gt;
             &lt;td&gt;&lt;?= $rows['end'] ?&gt;&lt;/td&gt;
             &lt;td&gt;&lt;?= $rows['totalt'] ?&gt;&lt;/td&gt;
             &lt;td&gt;&lt;?= $rows['service'] ?&gt;&lt;/td&gt;
             &lt;td&gt;&lt;?= $rows['item'] ?&gt;&lt;/td&gt;
             &lt;td align="center"&gt;
                 &lt;img src="backgrounds/&lt;?= $rows['mort'] ?&gt;.png"&gt;
             &lt;/td&gt;
             &lt;td&gt;&lt;?= $rows['travel'] ?&gt;&lt;/td&gt;
             &lt;td align="center"&gt;
                 &lt;a href="#" data-tooltip="&lt;?= $rows['id'] ?&gt;"&gt;
                     &lt;img src="backgrounds/&lt;?= $rows['cmtad'] ?&gt;.png" border="0"&gt;
                 &lt;/a&gt;
             &lt;/td&gt;
             &lt;td align="center"&gt;
                 &lt;a href="edit_form.php?id=&lt;?= $rows['id'] ?&gt;"&gt;
                     &lt;img src="backgrounds/edit1.png" border="0" align="center"&gt;
                 &lt;/a&gt;
             &lt;/td&gt;
             &lt;td align="center"&gt;
                 &lt;?php 
          if($enter == '1'){
              ?&gt;
              &lt;input type="image" onclick="updateToggle(this,'&lt;?php echo $id;?&gt;'); " src="backgrounds/bg/1.png" border="0" name="enter" value="0"/&gt;
              &lt;?php 
          }else{
              ?&gt;
              &lt;input type="image" onclick="updateToggle(this,'&lt;?php echo $id;?&gt;'); " src="backgrounds/bg/0.png" border="0" name="enter" value="1"/&gt;
              &lt;?php
          }
      ?&gt;
             &lt;/td&gt;
         &lt;/tr&gt;
  </code></pre>
  
  <p>And the updateToggle php</p>
  
  <pre><code>&lt;?php 
  
  include "db.inc.php";
  
  $id = $_POST['id'];
  $enter=$_POST['enter'];
  $value = $_POST['value'];
  if(ctype_digit($id) &amp;&amp; ctype_digit($value)){
      //mysql_connect();
      $Q = "UPDATE `xacall`.`ircb` SET enter='$value' WHERE `id` = '$id'";
      if(mysql_query($Q)){
          if($value == '1'){
              echo "status-toggle_enabled.png";
          }else{
              echo "status-toggle_disabled.png";
          }
      }else{
          echo 'N';
      }
  }else{
      echo 'N';
  }
  ?&gt;
  </code></pre>
  
  <p>I have tried modifying the onClick to include 
  location.reload();</p>
  
  <pre><code>&lt;input type="image" onclick="updateToggle(this,'&lt;?php echo $id;?&gt;'); location.reload();" src="backgrounds/bg/1.png" border="0" name="enter" value="0"/&gt;
                  &lt;?php 
              }else{
                  ?&gt;
  </code></pre>
  
  <p>This does work but I wonder if it can be done without this refresh which is a bit visually annoying.
  Thanks</p>