title: Form submit in DIV using jQuery
body: <p>I'm referring to a problem similar to <a href="https://stackoverflow.com/questions/1218245/jquery-submit-form-and-then-show-results-in-an-existing-div">the one in this post</a>, because the solution described there doesn't work for me.</p>
  
  <p>The <b>starting point</b> is a HTML page (called profile) with jQuery UI tabs:</p>
  
  <pre><code>&lt;div id="tabs"&gt; 
      &lt;ul&gt; 
          &lt;li&gt;&lt;a href="#realtab"&gt;Foo Bar&lt;/a&gt;&lt;/li&gt; 
          &lt;li&gt;&lt;a href="?cmd=changePassword" title="pwd-settings"&gt;
                          &lt;span&gt; Dynamic tab &lt;/span&gt;
              &lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <b>HTML rendered within the DIV</b> is:</p>
  
  <pre><code>&lt;form method="post" id="subform" action="http://myhost.com/example.php"&gt;
      &lt;input type="hidden" name="cmd" value="submitChangedPassword"&gt;
  
      &lt;dl&gt;
          &lt;dt&gt;PWD1&lt;/dt&gt;
          &lt;dd&gt;&lt;input type="password" name="password" /&gt;&lt;/dd&gt;
  
          &lt;dt&gt;PWD CHK&lt;/dt&gt;
          &lt;dd&gt;&lt;input type="password" name="passwordChk" /&gt;&lt;/dd&gt;
  
          &lt;dt&gt;&amp;nbsp;&lt;/dt&gt;
          &lt;dd&gt;&lt;input type="submit" value=" Apply " /&gt;&lt;/dd&gt;
      &lt;/dl&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>In addition, I use the following <b>JS script</b> (based on the post linked in the introduction):</p>
  
  <pre><code>$('#subform').submit(function() { // catch the form's submit event - should I use the form id?
      $.ajax({ // create an AJAX call...
          data: $(this).serialize(), // get the form data
          type: $(this).attr('method'), // GET or POST
          url: $(this).attr('action'), // the file to call
          success: function(response) { // on success..
              $('#pwd-settings').html(response); // update the DIV - should I use the DIV id?
          }
  });
  return false; // cancel original event to prevent form submitting
  });
  </code></pre>
  
  <p>The record is submitted, but the behavior is different depending on the browser:</p>
  
  <ul>
  <li><p>IE, Firefox, Opera: correct content into DIV, excellent!</p></li>
  <li><p>Safari, Chrome: correct content, but the <b>entire page is refreshed</b> with the results</p></li>
  </ul>
  
  <p>Please let me know what I'm doing wrong. Many many thanks!</p>
  
  <p><b>UPDATE 1:</b> The DIV named pwd-settings is created by the tab interface only. Please note that the behavior is the same, even if I add it to the HTML (with <code>&lt;div id ="pwd-settings"&gt;&lt;/div&gt;</code>).</p>
  
  <p><b>UPDATE 2:</b> I also removed the JavaScript above and all browsers became "correct content, but the entire page is refreshed" = "old URL, new content". As soon as I added the JavaScript to the HTML page rendered within the DIV, it started working in the browser described above. Hence I see two possible error reasons:</p>
  
  <p>1) The JS is simply not executed in the browsers having errors or</p>
  
  <p>2) The JS within the DIV doesn't work because it addresses a DIV which only exists outside</p>