CODEWITHSUNDEEP
jqueryajaxdomeach
PatKeav412
PatKeav412

Reputation: 17

JQuery handler can't access data after Ajax function

I made a Javascript object for updating and handling data using $.ajax({}) and external php scripts. The table element returned from the object when the object is called contains a number of hidden tr's (using the class "hidden", which is set to display:none).

Here is the display function inside the object:

this.displayData = function(location_div) {
    var location_div = location_div;
    $.ajax({
            url:"display_data.php",
            type: "POST", 
            success:function(response){ 
                $(location_div).html(response);
                },
            error:function(response){alert("Error Displaying Problems." + response)},
        });
    };

which displays:

<div id="location_div">
    <table>
        <tbody>
            <tr class="hidden"></tr>
            <tr class="hidden"></tr>
            <tr class="hidden"></tr>
            <tr class="hidden"></tr>
        </tbody>
    <table>
</div>

(note: "#location_div" is the element passed to "displayData(location_div)")

The problem I'm having is when the JQuery tries to access the returned data. I have a function that looks for all of the tr's, pushes each to an array, and then fades each one in one-by-one.

var elements_array = new Array();
$("#location_div table tbody").children().each(function() {
    elements_array.push(this);
});
//function for fading in each element in the array
fadeAllIn(elements_array);

As I understand it, elements that are Ajax-loaded are not part of the DOM, and so one needs to use a JQuery function such as $(element).on(); or $(element).live(); However, nothing I have tried has worked. The table is being loaded, but JQuery can't seem to select each tr using .each() because the table is Ajax-loaded.

Does anyone know the solution/workaround for this? Is there a better solution than using JQuery to fade in each tr in the table?

Upvotes: 0

Views: 1639

Answers (2)

face
face

Reputation: 1505

I think you just need to bind your events/animations after the dynamic data has been loaded.

this.displayData = function(location_div) {
var location_div = location_div;
$.ajax({
        url:"display_data.php",
        type: "POST", 
        success:function(response){ 
            $(location_div).html(response);
            bind_events();                
        },
        error:function(response){alert("Error Displaying Problems." + response)},
    });
};

var bind_events = function(){
    var elements_array = new Array();
            $("#location_div table tbody").children().each(function() {
                 elements_array.push(this);
            });
            fadeAllIn(elements_array);
};

Upvotes: 2

Spencer
Spencer

Reputation: 942

It sounds to me like you need to use delegation via the .on method. What you need to do to use javascript/jquery to fade the elements is attach the event handler to an element that is on the page when the page loads.

eg:

$("location_div").on("click", "table tbody", function() { [function] });

or something similar where "click" is your event.

Upvotes: 2

Related Questions