Databases
StackOverflow2013
Postsdbo
POForm submit in DIV using jQuery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POForm submit in DIV using jQuery
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USMrG
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POForm submit in DIV using jQuery
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI'm not sure what you're asking -- basically, you're submitting a form using Ajax and loading the response into a div. Where is the div? I don't see it in your posted code. Is the div within the tabs interface?
      singulars
      1. POForm submit in DIV using jQuery
      1. USNathan Loding
    2. COTwo more questions: have you tried it without the tab UI? Just make a mock page to test the form/jQuery? Also, when you say the entire page is refreshed -- like it didn't use Ajax, or the entire page is replaced with the response text?
      singulars
      1. POForm submit in DIV using jQuery
      1. USNathan Loding
    3. COI feel like there's some piece you're missing, as some of your descriptions seems lacking. Can you post your code somewhere so we can see the full thing and try it ourselves? In Firefox, are you using FireBug to debug the program?
      singulars
      1. POForm submit in DIV using jQuery
      1. USNathan Loding
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload