Databases
StackOverflow2013
Postsdbo
POJS function doesn't work when AJAX request is done (Maybe a $(this) problem)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJS function doesn't work when AJAX request is done (Maybe a $(this) problem)
    text
    copied!<p>My site has a form which insert records in a database using ajax, at the same time, it "refreshes" a table also using AJAX in the same page showing this new record.</p> <p>So I have the JS code</p> <pre><code>// New Record Div $('button[type=submit]').click(function() { // Read all the form content var creditor = $('#selCreditor').val(); var reason = $('#txtReason').val(); var value = $('#txtValue').val(); var debtor = $('#selDebtor').val(); $.ajax({ type: 'POST', url: 'index/insert/creditor/'+creditor+'/reason/'+reason+'/value/'+value+'/debtor/'+debtor, success: function() { $('#status').slideDown(); $('#latestRecords').fadeOut(); $.ajax({ type: 'POST', url: 'index/latest', success: function(html) { $('#latestRecords').fadeIn(); $('#latestRecords').html(html); } }); } }); return false; }); </code></pre> <p>Basically, it inserts a new record in the database, then on success, it requests a page which contains only the table and populate the div with the returned data. It's sort of a refresh when the data is submitted. Everything is done using AJAX.</p> <p>I've uploaded the situation image for a better understanding. <a href="http://rookery9.aviary.com.s3.amazonaws.com/4344000/4344071_8da9.png" rel="nofollow noreferrer">image</a></p> <h2>The Problem</h2> <p>Everything goes fine until you try to delete a "refreshed" table row. Without the AJAX (only press F5) I can delete any row I want through the delete button, but when I insert a row and the try to delete any row in the table won't do. This is the Delete button code</p> <pre><code>// TR Fading when deleted $('.delete').click(function() { $.ajax({ type: 'POST', url: 'history/delete/id/'+$(this).attr('id') }); $(this).closest('tr').fadeOut('slow', function() { $(this).remove(); }); $('#latest') return false; }); </code></pre> <p>I suspect that the problem is <code>$(this)</code> which not refers to the delete button element once the table is refreshed, but I don't know how to fix it.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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