CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Kumar
Kumar

Reputation: 1114

Jquery Loop through table with multiple class

I am trying to loop through the table after the AJAX call is finished using the Jquery. But I am not able to loop through that. My HTML Looks like this :

    <table id="planyourwork" class="data-view plan-internal displayTable">
     <thead>All Headers</thead>
     <tbody>
          <tr class="odd">
                 <td class="invisible"></td>
                 ....
                 ....
                 <td class="cell-status"></td>
          </tr>
          <tr class="odd">
                 <td class="invisible"></td>
                 ....
                 ....
                 <td class="cell-status"></td>
          </tr>


          <tr class="odd">
                 <td class="invisible"></td>
                 ....
                 ....
                 <td class="cell-status"></td>
          </tr>

     <tbody>

In JS file after calling the AJAX 

$('.data-view > tbody > tr > td.cell-status').each(function() {
   trying to add tool tip
}

When I debug, I see that Loop is not getting through. Debugger is stopping at data-view, but not looping through.

Please help me to resolve this problem

Below is the whole On Click event

filterBtn.click(function() {
            loadData();
            $('#planyourworktd.cell-status').each(function() {
                var typeCell = $(this);
                var tooltip = typeCell.parent().find('td.fullNotes').html();
                alert("tooltip");
                typeCell.attr('title', tooltip);
                typeCell.tooltip({track: true,show: 100});
            });
            return false;
        });

// Load the request and planner data
        function loadData() {
         $.ajax({
                type: 'post',
                url: url,
                data: data,
                cache: false,
                success: function(html) {
                    initResults();
                         enableButtons();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    filterBtn.removeClass('invisible');
                },
                async: true
             });
        }

And DOM structure is quite complicated, when I run this in Fiddle it works but not on Page. I am not sure why? Thank you every one for helping me to resolve this. Please Note : Syntax check may be typo error as I am removing production code, sorry for that.

Upvotes: 0

Views: 314

Answers (2)

Kumar
Kumar

Reputation: 1114

I solved the problem. Its quite "sad", I missed few bits here. I am using struts 2 and AJAX call. and when an AJAX call is done, my event is called but by the time it is called data is not loaded. Reason is when an AJAX call is made, data is populated as "tile" which runs on its own. Rest of the elements are populated and data is loaded in parallel. Changing the location of the page solved the problem. Thank you for all your help.

Upvotes: 0

dops
dops

Reputation: 800

There are a few mistakes in your html a javascript but I can't be sure whether it was when you typed it up here.

Anyways

  1. '' is not closed, you have another '' instead of ''

  2. You javascript is not closed properly, here is how it should look

    $('.data-view > tbody > tr > td.cell-status ').each(function() { console.log(this); });

Notice the extra ');' at the end.

Now when I make these changes the output is fine.

Upvotes: 1

Related Questions