Databases
StackOverflow2013
Postsdbo
POjQuery ajax only works first time
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery ajax only works first time
    primarykey
    data
    text
    <p>I have a table of data that on a button click certain values are saved to the database, while other values are retrieved. I need the process to be continuous, but I can only get it to work the first time.</p> <p>At first I was using <code>.ajax()</code> and <code>.replaceWith()</code> to rewrite the entire table, but because this overwrites the DOM it was losing events associated with the table. I cannot use <code>.live()</code> because I'm using <code>stopPropagation()</code> and <code>.live()</code> doesn't support it due to event bubbling. I was able to essentially re-bind the click event onto the table within the <code>.ajax()</code> callback, but a second call to the button click event did nothing.</p> <p>I changed the code to use <code>.get()</code> for the ajax and <code>.html()</code> to put the results in the table (the server-side code now returns the complete table sans the <code>&lt;table&gt;</code> tags). I no longer have to rebind the click event to the table, but subsequent clicks to the button still do nothing.</p> <p>Finally, I changed it to <code>.load()</code>, but with the same (non-) results.</p> <p>By "do nothing" I mean while the ajax call is returning the new HTML as expected, it's not being applied to the table. I'm sure it has something to do with altering the DOM, but I thought since I'm only overwriting the table contents and not the table object itself, it should work. Obviously I'm missing something; what is it?</p> <p><strong>Edit:</strong></p> <p>HTML:</p> <pre><code>&lt;table id="table1" class="mytable"&gt; &lt;tr&gt; &lt;td&gt;&lt;span id="item1" class="myitem"&gt;&lt;/span&gt;&lt;/td&gt; &lt;td&gt;&lt;span id="item2" class="myitem"&gt;&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;input id="Button1" type="button" value="Submit" /&gt; </code></pre> <p>jQuery:</p> <pre><code>$( "Button1" ).click( function() { $( "table1" ).load( "data.aspx", function( data ) { //... } ); } ); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMichael Itzoe
    1. USMichael Itzoe
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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. POjQuery ajax only works first time
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POjQuery ajax only works first time
      1. This table or related slice is empty.
      1. VTDownMod
    1. COIt would be helpful to have some code snippets, or even some source examples from before and after the ajax events. You have a lot of information here and it's hard to follow what exactly you're doing.
      singulars
      1. POjQuery ajax only works first time
      1. USShaded
    2. COYou explained *By "do nothing" I mean while the ajax call is returning the new HTML as expected, it's not being applied to the table*, so this means your Ajax calls succeeds, it's the DOM manipulation or usage of innerHTML that fails.
      singulars
      1. POjQuery ajax only works first time
      1. USKevin Le - Khnle
    3. CO@Shaded: Though the problem ended up not being strictly jQuery, I added some sample code of what I'm doing.
      singulars
      1. POjQuery ajax only works first time
      1. USMichael Itzoe
 

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