title: Javascript $.get not always updating on click
body: <p>I'm wondering why my code is not updating the the ajax call when I click on a button. It shows only after I do page refresh. My Code below:</p>
  
  <p>Here is the complete jquery/javascript code:
      $(document).ready(function() { 
      $("#savesubmainbutton").live('click',function(){</p>
  
  <pre><code>           $.post('save-sub-main.php',  $("#submainform").serialize(), function(data) {
                $('#submain_save_message').html(data);
              });
  
              $('#submain').hide();
  
              // Load data after submission
                  $.get('getsubmain.php', { mainid: "&lt;?php echo $_GET['id'];  ?&gt;" },
                  function(data) {
                    $('.submain_message').html(data);
  
                  });
  
  
  
          });
  
      }); //end
  </code></pre>
  
  <p>This is the HTML form part</p>
  
  <pre><code>&lt;div id="submain"&gt;
  
      &lt;form id="submainform" name="submainform" method="post" action="" enctype="multipart/form-data" &gt;
      &lt;table&gt;&lt;input type="hidden" name="MAX_FILE_SIZE" value="1000000" /&gt;
      &lt;!--&lt;tr&gt;&lt;td width="289" align="right"&gt;Jou naam:&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="yourname" id="yourname" style="background-color:lightblue;" /&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td width="289" align="right"&gt;Jou e-posadres:&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="email" id="email" style="background-color:lightblue;"/&gt;&lt;/td&gt;&lt;/tr&gt;--&gt;
      &lt;tr&gt;&lt;td width="289" align="right"&gt;Naam van die geskiedkundige figuur (bv. Jan van Riebeeck):&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="name" id="name" /&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td width="289" align="right"&gt;Foto van die geskiedkundige figuur :&lt;/td&gt;&lt;td&gt;&lt;input id="file_upload" name="file_upload" type="file" /&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td width="289" align="right"&gt;&lt;div id="filname"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;input id="filename2" name="image" type="hidden" value=""  /&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;!--&lt;tr&gt;&lt;td width="289" align="right"&gt;Naam van jou inskrywing :&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="title" id="title" /&gt;&lt;/td&gt;&lt;/tr&gt;--&gt;
      &lt;tr&gt;&lt;td width="289" align="right"&gt;Datum waarop die inskrywing gemaak is (bv. 1652):&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="date" id="date" /&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td width="289" align="right"&gt;Status update (bv. Wat sien ek daar in die verte? Is dit 'n tafel?):&lt;/td&gt;&lt;td&gt;&lt;textarea name="message" id="message"&gt;&lt;/textarea&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;input type="hidden" name="mainid" value="&lt;?php echo $_GET['id']; ?&gt;" /&gt;
      &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;div id="savesubmainbutton" style="color:blue"&gt;&lt;input type="button" value="Save" /&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p></p>