Function not working after DOM modification via AJAX

Question

I have a problem I can't solve by myself:

I have a function, getPerimetre() which is supposed to return all the element's id with the class .perimetre

var getPerimetre = function () {
   var perimetre = [];
   $(".perimetre").each(function() {
       perimetre.push($(this).attr("id"));
   });
   return perimetre;
};

Problem is I want to execute this function after an AJAX call which fills my container #prevision_form.

var updateForm = function () {
   var data = getData();

    var form_request = $.ajax({
            url: "lcl-flux-prevision_modification_form.php",
            type: "POST",
            data: data
    });
    form_request.fail(function(jqXHR, textStatus) { alert( "Request failed: " + textStatus ); });
    form_request.done(function(html) { $("#prevision_form").html(html); });
};

So, my code gives something -synthetized- like this:

updateForm();
if(!$._data($("#saveRecord")[0], "events")) {
   $j("#saveRecord").bind("click", function() {
      alert(getPerimetre());
   });
}

When I click my button #saveRecord, the alert is empty. If I put call to my function getPerimetre() before the AJAX call, it works correctly.

Any suggestion?

Are the `.perimetre` elements inside the `#prevision_form` element ? If so, they get overwritten.. — Gabriele Petrioli, Sep 30 '13 at 12:20
Yes they are, and that's probably my problem. Is there a way to get them ? — pistou, Sep 30 '13 at 12:23
possible duplicate of [Jquery doesn't work after ajax loads](http://stackoverflow.com/questions/16062899/jquery-doesnt-work-after-ajax-loads) — Anthony Grist, Sep 30 '13 at 12:43
Hm, actually may have misunderstood the question initially... Just to clarify: The click event handler on the button still works, but the response from the `perimetre` function isn't what you'd expect it to be? Where is that `updateForm(); ...` block of code called? — Anthony Grist, Sep 30 '13 at 12:48

score 0 · Answer 1 · answered Sep 30 '13 at 12:20

0

$.ajax({
        url: "lcl-flux-prevision_modification_form.php",
        type: "POST",
        data: data,
        success: function(){
            // Call your function here
        }
});

answered Sep 30 '13 at 12:20

Jonathon

15,873
11
73
92

score 0 · Answer 2 · answered Sep 30 '13 at 12:26

try something like this,That because your ajax take time (asynchronously )mean while getPerimetre() function get executed so use async.

 var form_request = $.ajax({
        url: "lcl-flux-prevision_modification_form.php",
        type: "POST",
        data: data,
        async :false
});

score 0 · Answer 3 · answered Sep 30 '13 at 12:29

0

use on in place of bind example

  $(document).on("click","#saveRecord",function(){
   ....
   })

answered Sep 30 '13 at 12:29

atul singh

664
5
11

score 0 · Answer 4 · answered Sep 30 '13 at 12:38

Use this instead:

var updateForm = function () {
var data = getData();

var form_request = $.ajax({
        url: "lcl-flux-prevision_modification_form.php",
        type: "POST",
        data: data,
        success: function(){
            updateForm();
            if(!$._data($("#saveRecord")[0], "events")) {
               $j("#saveRecord").bind("click", function() {
                  alert(getPerimetre());
               });
            }
        }
});
form_request.fail(function(jqXHR, textStatus) { alert( "Request failed: " + textStatus ); });
form_request.done(function(html) { $("#prevision_form").html(html); });
};

Gabriele Petrioli · Answer 5 · 2013-09-30T12:53:45.407

If you want the .perimetre elements in the updated html, you will need to access them after the ajax call is completed.

Since you want to do that from a click on another element you will have to check if the ajax is complete.

You can use the $.active for that (which stores the number of active ajax calls).

Something like

   $j("#saveRecord").bind("click", function() {
      if (!$.active){
         alert(getPerimetre());
      } else {
         // notify user that the data is not yet available..
         // or something else..
         alert('AJAX call in progress..');
      }
   });

original answer

The issue is with

form_request.done(function(html) { $("#prevision_form").html(html); });

which overwrites the contents of the #prevision_form element.

If you want to get the .perimetre elements before they get overwritten you need to access them earlier..

var perimetreIds = [];

var getPerimetre = function () {...}
var updateForm = function () {
    ...
    form_request.done(function(html) { 
        perimetreIds = getPerimetre();
        $("#prevision_form").html(html); 
    });
    ...
}

Additionally you can improve your getPerimetre by using the .map() and .get() jquery method

var getPerimetre = function () {
   return $(".perimetre").map(function(){ return this.id }).get();
};

@Pye does the `html` returned from the ajax call contain new `.perimetre` elements ? — Gabriele Petrioli, Sep 30 '13 at 12:43
@pye, you need to make sure the ajax call is finished (*since it is asynchronous, so you may click the button before the ajax is complete*). updated answer.. — Gabriele Petrioli, Sep 30 '13 at 12:55

Function not working after DOM modification via AJAX

5 Answers5