Jquery Loop through table with multiple class

Question

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.

share your ajax call... I'm assuming your loop is not inside the success callback - http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Arun P Johny, May 06 '14 at 09:12
@Arun How do you say that, when I am saying it is. And I said debugger is pointing at the line as well. — Kumar, May 06 '14 at 09:17
@Kumar. Your syntax in JS isn't correct. You're missing `);` at the end of the third line. Also if your selector would be just `td.cell-status` that would be good enough ;) — Luuuud, May 06 '14 at 09:20
@LuudJacobs That's not true without knowing the entire DOM structure. There could be other `td.cell-status` which shouldn't be looped through. — Curtis, May 06 '14 at 09:24
@Curt: you're correct! It should've been `#planyourwork td.cell-status` — Luuuud, May 06 '14 at 09:26
@Kumar, I'm not quite sure what you mean. If you want to know wether you can combine ID's and classnames in CSS/jQuery selectors, then well, you can! — Luuuud, May 06 '14 at 09:31
@LuudJacobs, I have given a try but did not worked. Please let me know if you need any more information. — Kumar, May 06 '14 at 09:40
could you put both your HTML & JS in a fiddle somewhere? @laaposto got it working in his... — Luuuud, May 06 '14 at 09:57

score 1 · Answer 1 · answered May 06 '14 at 09:28

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

'' is not closed, you have another '' instead of ''
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.

score 0 · Answer 2 · answered May 06 '14 at 10:07

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.

Jquery Loop through table with multiple class

2 Answers2