Search code examples
jqueryajaxfindjquery-selectors

jQuery to toggle waiting image while ajax call is made

I'm learning how to traverse the DOM so this question is related to that.

I'm using Coldfusion to output some database results. The loops are looping over table data, not looping over table rows. Within each table, I have buttons to perform various ajax calls (I already have this working). When a button is clicked, I'd like to show or toggle animated spinner so the user knows something is going on and then hide or toggle when the ajax call has completed. Basically I just need help identifying the spinner in order to toggle it. ID's are not unique

My first attempt was to locate the closet span tag to the button clicked. I coudn't get that to work. My second attempt was to use .parent() to obtain the TD and then from there, use the .next() to locate the span tag which would allow me to toggle it. I couldn't get that to work either. After writing it out here, the next() may not be the right option but again, I'm still learning how to traverse the DOM. :)

NOTE: The code below shows the spinner by default but I have a function not shown here which will hide it via jQuery's toggle function. 

<table cellpadding="3" class="tablesorter" id="table_id">
<tr>
    <th class="form"><label>System Name</label></th>
    <td>
        <button type="button" id="removeButton" class="fg-button ui-state-default ui-corner-all remove_SystemName" >Remove</button>
        <button type="button" id="checkButton" class="fg-button ui-state-default ui-corner-all check_SystemName" >Check</button>
        <span id="statusInfoDiv" class="statusInfoDiv"><img src="/assets/images/working.gif"> Working...</span></td>
</tr>

jQuery Option 1 I tried 

$(".check_SystemName").live("click", function(){
var spinner = $(this).closest('span').find("statusInfoDiv");
spinner.toggle();
});

jQuery Option 2 I tried

$(".check_SystemName").live("click", function(){
var spinner = $("this").parent().next(".statusInfoDiv");
spinner.toggle();
});
Solution

  • You need to traverse "up" the DOM using parent... and then you can traverse back "down" the DOM using chiildren or siblings.

    so you could do soemthing like:

    $(this).parent().children('.statusInfoDiv').toggle();