Question

I have a table with 3 row and 3 selectboxes in each of them. On change I want to hide the selectbox, insert a small loader image for 250 ms and then show the selectbox with the selected option. Ex. if I select “completed” in row1, hide the select only in row1, insert the loader image, and then show the selectbox with “completed” as selected( add attribute selected=”selected to the option”).
Here is my demo: http://jsfiddle.net/5ueYw/1/ and what have I got so far. Who can give some tips? Thanks

HTML:

<table id="inbTB">
<thead>
    <tr class="head">
        <th class="sortH alignCenter smSelN header">#</th>
        <th class="sortH alignLeft header headerWidth " nowrap="nowrap">Name</th>
        <th class="sortH alignLeft header smSelR"><tag:lang.stats />Status</th>
    </tr>
</thead>
<tbody>
<tr class="sortRow">
        <td class="alignCenter">#1</td>
        <td class="alignLeft upCase">One</td>
        <td class="alignCenter">
            <select class="stSel smSelR smSelRInput">
                <option value="0">New</option>
                <option value="1">Completed</option>
                <option value="2">Canceled</option>
            </select>
            <div class="loader"></div>
        </td>
    </tr>
 <tr class="sortRow">
        <td class="alignCenter">#2</td>
        <td class="alignLeft upCase">Two</td>
        <td class="alignCenter">
            <select class="stSel smSelR smSelRInput">
                <option value="0">New</option>
                <option value="1">Completed</option>
                <option value="2">Canceled</option>
            </select>
            <div class="loader"></div>
        </td>
    </tr>
 <tr class="sortRow">
        <td class="alignCenter">#3</td>
        <td class="alignLeft upCase">Three</td>
        <td class="alignCenter">
            <select class="stSel smSelR smSelRInput">
                <option value="0">New</option>
                <option value="1">Completed</option>
                <option value="2">Canceled</option>
            </select>
            <div class="loader"></div>
        </td>
    </tr>

JQUERY:

    var gif = $('.alignCenter .loader');
    $('.stSel').change(function(){
     $('select').hide();
   gif.html('<img alt="" src="" />').show().delay(250).fadeOut(function(){  // src    image is a loader gif
     $('.stSel option selected').show();
   });
})

Answer 1

Here is a start, there are some areas that I am sure you can improve upon:

http://jsfiddle.net/5ueYw/6/

HTML

<table id="inbTB">
    <thead>
        <tr class="head">
            <th class="sortH alignCenter smSelN header">#</th>
            <th class="sortH alignLeft header headerWidth " nowrap="nowrap">Name</th>
            <th class="sortH alignLeft header smSelR"><tag:lang.stats />Status</th>
        </tr>
    </thead>
    <tbody>
    <tr class="sortRow">
            <td class="alignCenter">#1</td>
            <td class="alignLeft upCase">One</td>
            <td class="alignCenter">
                <select class="stSel smSelR smSelRInput">
                    <option value="0">New</option>
                    <option value="1">Completed</option>
                    <option value="2">Canceled</option>
                </select>
                <div class="loader" style="display:none;">loading...</div>
            </td>
        </tr>
     <tr class="sortRow">
            <td class="alignCenter">#2</td>
            <td class="alignLeft upCase">Two</td>
            <td class="alignCenter">
                <select class="stSel smSelR smSelRInput">
                    <option value="0">New</option>
                    <option value="1">Completed</option>
                    <option value="2">Canceled</option>
                </select>
                <div class="loader" style="display:none;">loading...</div>
            </td>
        </tr>
     <tr class="sortRow">
            <td class="alignCenter">#3</td>
            <td class="alignLeft upCase">Three</td>
            <td class="alignCenter">
                <select class="stSel smSelR smSelRInput">
                    <option value="0">New</option>
                    <option value="1">Completed</option>
                    <option value="2">Canceled</option>
                </select>
                <div class="loader" style="display:none;">loading...</div>
            </td>
        </tr>
  </tbody>
</table>

JS

$('.stSel').change(function(){
  myselect = $(this); 
  myloader = $(this).parent().children('.loader');

    // Make sure we override animations that are already running, there is probably a
  // better way to do this.  
  $('.stSel').show();
  $('.loader').hide();  

  myselect.hide();
  myloader.show();

  setTimeout(function() {
    showme( myselect, myloader );
  }, 2000)  
});

function showme(el, loader){
  el.show();
  loader.hide();
}