jQuery binding issue after ajax - using $(document).on('submit'

Question

Im having an issue with jQuery losing its binding to a class after an ajax update. Ive done this before, and CANT NOT find where my issue is, so im asking for help.

I have a form:

<div id="confirmed_tile">
<form id="form_id" name="form_name" class='whatsdone'>
</table>
    <tr>
        <td>
        Name
        </td>
        <td>
        Name
        </td>
        <td>
        Name
        </td>
    </tr>
</table>
<input type="submit" id="press_submit">
</form>
</div>

Then I have some jquery that handles the form submittion:

$(document).on('submit','.whatsdone',function(){
    var url = "ajax/update_appointment_clinic.php"; 
        $.ajax({
               type: "POST",
               url: url,
               data: $( this ).serialize(), 
               success: function(data)
               {
                   $( "div#confirmed_tile" ).html(data);
               }
             });
        return false; 
});

This ajax call both submits the form for updating mysql, and echo's back the form with the updated info and sends back to the page with the form on it.

This is all working great, but once I submit and ajax updates the div, the ajax call no longer works. I know this is because of an issue with the form class losing it binding to the jquery function, but I thought my choice of $(document).on('submit','.whatsdone',function() would solve this issue. It does not. Can anyone tell me where I went wrong?

Responce data back from ajax:

<table width='100%' border='0' id='large' cellspacing='0' class='tablesorter table'>
<thead>
<tr>
<th rowspan='3'><p>Time</p></th>
<th rowspan='1'><p>First</p></th>
<th rowspan='1'><p>Last</p></th>
<th rowspan='2'><p>Pet Name</p></th>
<th rowspan='4'><p>APT</p></th>
<th rowspan='4'><p>Species</p></th>
<th rowspan='4'><p>Phone #</p></th>
<th rowspan='4'><p>Status</p></th>
<th rowspan='4'>&nbsp;</th>
<th rowspan='4'>&nbsp;</th>
<th rowspan='4'>&nbsp;</th>
</tr>
</thead>
<tbody>                                 


<tr>
<td><p>2:00 pm</p></td>
<td><p>B</p></td>
<td><p>Bozley</p></td>
<td><p>Holly</p></td>
<td><p>(233)</p></td>
<td><p>Canine</p></td>
<td><p>555-555-5555</p></td>
<form name='6' method='post' class='whatsdone'>
<input type='hidden' name='app_id' value='6'>
<input type='hidden' name='clinic_id' value='20'>
<input type='hidden' name='appointment_date' value='2015-02-05'>
<input type='hidden' name='first_visit_apt' value='233'>
<td style='max-width:100px'><p>
   <select name='confirm_value'>
   <option value='1'><p>Confirmed</p></option>
   <option value=5>Left Voicemail</option>
   <option value=4>Left Message w/ Person</option>
   <option value=3>Rescheduled</option>
   <option value=1>Confirmed</option>
   <option value=0>Unconfirmed</option>
   <option value=2>Cancelled</option>
   <option value=6>Could Not Reach</option>
   </select></p>
</td>
<td style='max-width:30px'>
<input type='submit' data-form='6' class='update_confirmed_button' value='GO'>
</td>
</form>
<td style='max-width:30px'><p>11:11 pm</p></td>
<td style='max-width:30px'>
<div class='color_5' title='Participant with responce'>
<div style='display:none'>5</div>
</div>
</td>
</tr>
</tbody>
</table>

Thank you Jason

It's really hard to answer this type of question without more information. A fiddle or jsbin would be good. Just to start, this doesn't look like it would do anything because $( "div#confirmed_tile" ) doesn't maych anything in the html you provide (did you mean cancelled_tile?) — Jon Surrell
– Jon Surrell, Commented Feb 5, 2015 at 16:34
My bad, mistake on entering question, I fixed. On my server, the div's match and this does work, once, it just wont work again after ajax updates the div. - What more info can I provide? — Jason
– Jason, Commented Feb 5, 2015 at 16:36
my thoughts exactly.. the div that you're replacing confirmed_tile and the div you have in html cancelled_tile did not match. So is that a mistake or you have some oter div with that id — Arkantos
– Arkantos, Commented Feb 5, 2015 at 16:37
can u confirm if the form returned as data in Ajax call has the same class whatsdone ? — Arkantos
– Arkantos, Commented Feb 5, 2015 at 16:38
Is the form still there after the AJAX request has returned a value? And does it still have the class "whatsdone". If so, then your .on() listener should be working. Have you tried putting a console.log('test') at the start of the function, so not in the AJAX request but before it and checking whether it is called at all. Also you could try using $('body').on() instead of $(document).on(), although this is just a hunch. — Thijs Riezebeek
– Thijs Riezebeek, Commented Feb 5, 2015 at 16:39

Arkantos · Accepted Answer · 2015-02-05 19:23:38Z

1

As I mentioned in the comments, issue is with improper html, because of which form is closed without including any input elements. I've edited the structure like below and it works :) Here's the bin to verify

<form name='6' method='post' class='whatsdone'>
<input type='hidden' name='app_id' value='6'>
<input type='hidden' name='clinic_id' value='20'>
<input type='hidden' name='appointment_date' value='2015-02-05'>
<input type='hidden' name='first_visit_apt' value='233'>


<table width='100%' border='0' id='large' cellspacing='0' class='tablesorter table'>
<thead>
 <tr>
  <th rowspan='3'><p>Time</p></th>
  <th rowspan='1'><p>First</p></th>
  <th rowspan='1'><p>Last</p></th>
  <th rowspan='2'><p>Pet Name</p></th>
  <th rowspan='4'><p>APT</p></th>
  <th rowspan='4'><p>Species</p></th>
  <th rowspan='4'><p>Phone #</p></th>
  <th rowspan='4'><p>Status</p></th>
  <th rowspan='4'>&nbsp;</th>
  <th rowspan='4'>&nbsp;</th>
  <th rowspan='4'>&nbsp;</th>
</tr>
</thead>
<tbody>                                 
 <tr>
  <td><p>2:00 pm</p></td>
  <td><p>B</p></td>
  <td><p>Bozley</p></td>
  <td><p>Holly</p></td>
  <td><p>(233)</p></td>
  <td><p>Canine</p></td>
  <td><p>555-555-5555</p></td>
  <td style='max-width:100px'>
     <select name='confirm_value'>
      <option value='1'><p>Confirmed</p></option>
      <option value=5>Left Voicemail</option>
      <option value=4>Left Message w/ Person</option>
      <option value=3>Rescheduled</option>
      <option value=1>Confirmed</option>
      <option value=0>Unconfirmed</option>
      <option value=2>Cancelled</option>
      <option value=6>Could Not Reach</option>
   </select>
 </td>
 <td style='max-width:30px'>
  <input type='submit' data-form='6' class='update_confirmed_button' value='GO'>
 </td>

  <td style='max-width:30px'><p>11:11 pm</p></td>
  <td style='max-width:30px'>
    <div class='color_5' title='Participant with responce'>
       <div style='display:none'>5</div>
    </div>
  </td>
</tr>
</tbody>
</table>

</form>

EDIT: Capturing values of multiple users and do an Ajax post for that user alone.You can remove form and all hidden input elements. We shall make use of data-* attributes for this

<input type='submit' 
       data-user='{ 
          "app_id" : "6",
          "clinic_id" : "20",
          "appointment_date" : "2015-02-05",
          "first_visit_apt" : "233"
       }'
       data-form='6'   
       class='update_confirmed_button postBtn' value='GO'>

Just register a handler for that to fire the ajax call

   $(document).on('click','.postBtn',function(e){
      var postData = $(e.target).data('user');
      // append if any params
      $.ajax({
            url : 'ajax/update_appointment_clinic.php',
            data : postData,
            type : 'POST',
            success : function(data){
                 // deal with ajax response
            }
      });
   });

Hope this helps :)

edited Feb 5, 2015 at 19:23

answered Feb 5, 2015 at 18:19

Arkantos

6,6083 gold badges19 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arkantos Over a year ago

In case this solves your issue, feel free to upvote and accept the answer :)

Jason Over a year ago

So, doing this DID solve my issue, but I cant do my project like this. ISSUE IS: I need the form inside the while loop so there is one form PER person displayed. Im not sure why It wont work with the form inside the while loop? So, knowing that this solved my issue, but also that I need the form inside the while loop so there is one form per line, what can I do?

Arkantos Over a year ago

you can even change submit to button now that you're removing form to make it a valid HTML

Collectives™ on Stack Overflow

jQuery binding issue after ajax - using $(document).on('submit'

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related