AJAXing of a form field generated via another AJAX

Question

I have a form created from the following action,

USER selects a link
using $('#livesearch').on('click', 'a', function(e){}); accesses and gets some information from MySQL db through .php via AJAX call
based on the response data, it populates the content div in the bootstrap 3 modal window
in the modal window populated via javascript, I have another form field for submission,
in this form field, I'm trying to do a POST/Response through AJAX call and it just takes me to the php page and not doing anything..

suppose is it not possible to AJAX on a form field dynamically generated by another AJAX call?

to explain in more detail, I've included my codes here below,

for point 3 and 4,

// AJAX call from a link selected
$('#livesearch').on('click', 'a', function(e) {
var selectedValue = $(this).attr("value");

 $.ajax({
  type: 'POST',
  async: true,
  url: "../../../avocado/private/functions/measures.php",
  data: {name:selectedValue},
  success: function(data, status){
      var selectedData = JSON.parse(data);
      console.log(selectedData);
      // populates contents for the modal body        
      $.each( selectedData, function( i, val ) {
          document.getElementById("measures").innerHTML+= "<table class=\"table table-condensed\">"
                                                       + "<tr><th>desc1</th><td>"+selectedData[i][6]+"</td><td rowspan=\"4\">Quantity"
                                                       + "<form role=\"form\" action=\"../../../avocado/private/functions/food_save.php\" id=\"measure_quantity\" method=\"POST\">"
                                                       + "<div class=\"form-group\">"
                                                       + "<label class=\"sr-only\" for=\"quantity\">quantity</label>"
                                                       + "<input type=\"Number\" name=\"quantity\" class=\"form-control\" id=\"quantity\" placeholder=\"desc"+i+"\">"
                                                       + "<input type=\"hidden\" id=\"food_name\" name=\"food_name\" value=\""+selectedValue+"\">"
                                                       + "<input type=\"hidden\" name=\"food_type\" value=\"nutrients\">"
                                                       + "<input type=\"hidden\" name=\"food_id\" value=\""+selectedData[i][0]+"\">"    
                                                       + "<input type=\"hidden\" name=\"measures_id\" value=\""+selectedData[i][4]+"\">"
                                                       + "<input type=\"hidden\" name=\"grams\" value=\""+selectedData[i][10]+"\">"
                                                       + "</div>"
                                                       + "<button type=\"submit\" class=\"btn btn-default\">Save</button>"
                                                       + "</form>"
                                                       + "</td></tr>"
                                                       + "<tr><th>desc2</th><td>"+selectedData[i][7]+"</td></tr>"
                                                       + "<tr><th>desc3</th><td>"+selectedData[i][8]+"</td></tr>"
                                                       + "<tr><th>desc4</th><td>"+selectedData[i][9]+"</td></tr>" 
                                                       + "<tr><th>(g)</th><td>"+selectedData[i][10]+"</td></tr>" 
                                                       + "</table>";   


       });
  },
  error: function(xhr, status, err) {
    alert(status + ": " + err);
  }
});

});

for point 5,

$('#measure_quantity').submit(function(){
postData = $(measure_quantity).serialize();
 $.post("../../../avocado/private/functions/food_save.php",postData+'&action=submit&ajaxrequest=1',function(data, status){
     $("#measure_quantity").before(data);
 });
});

If the form you are ajaxing in does not exist on the original page, jQuery will not recognise a `.submit()` on it. Instead, have a look into the `.on()` jQuery method. It will allow you to listen for events on elements which do not exist on `$(document).ready()` — Djave, Dec 26 '14 at 13:52

score 0 · Answer 1 · answered Dec 26 '14 at 13:53

Try something like the below:

$( "#measure_quantity" ).on( "submit", function( event ) {
  event.preventDefault();
  postData = $("#measure_quantity").serialize();
  $.post("../../../avocado/private/functions/food_save.php",postData+'&action=submit&ajaxrequest=1',function(data, status){
     $("#measure_quantity").before(data);
 });
});

This will still work with dom elements that do not exist on the initial page load because of the .on() statement.

Also its not something silly like the typo:

postData = $(measure_quantity).serialize();

Should be...

postData = $("#measure_quantity").serialize();

Ok.. tried this code snippet and its still not working.. I think for some reason AJAXing is not happening at all, meaning jQuery is not able to find #measure_quantity ID.. the form field and the connection to PHP works perfectly fine as I'm getting the results printed on the particular .php file, its just that I don't know why AJAX is not working when this code looks fine.. — lukieleetronic, Dec 26 '14 at 14:06

score 0 · Accepted Answer · edited May 23 '17 at 12:20

I have found the problem, for dynamically loaded contents such as this case, I have to add a selector parameter otherwise the event is directly bound instead of delegated, which only works if the element already exists (so it doesn't work for dynamically loaded content

$(document.body).on('submit', '#measure_quantity' ,function(e){
    console.log("heeeellllo");
    e.preventDefault();
    var postData = $("#measure_quantity").serialize();
    $.post("../../../avocado/private/functions/food_save.php",postData+'&action=submit&ajaxrequest=1',function(data, status){
    $("#measure_quantity").before(data);
    });
});

But then again, I have another question... if the modal window has already been populated with the form, direct bound method should work fine right? still kind of cloudy on what direct and delegated bound means.. and what the difference between the two is,

AJAXing of a form field generated via another AJAX

2 Answers2