show jquery spinner when checkbox is clicked

334

November 23, 2016, at 2:53 PM

I am having a table which is having around 500 rows with fields for every day of the current month. The columns of table are as follows.

Vendor | 1 | 2 | ...... | 31

Now depending on the day the <TD> has class as Mo for Monday , Tu for Tuesday etc.

I also have a table with 7 checkboxes one for each day
i.e. [ ] Monday [ ] Tuesday ..... [ ] Sunday
Code for it is as follows

<table><tr>  
  <td><input type="checkbox" id="Mo" name="Mo" checked onclick="ToggleDay('Mo')">Mo</td>
  <td><input type="checkbox" id="Tu" name="Tu" checked onclick="ToggleDay('Tu')">Tu</td>
  <td><input type="checkbox" id="We" name="We" checked onclick="ToggleDay('We')">We</td>
  <td><input type="checkbox" id="Th" name="Th" checked onclick="ToggleDay('Th')">Th</td>
  <td><input type="checkbox" id="Fr" name="Fr" checked onclick="ToggleDay('Fr')">Fr</td>
  <td><input type="checkbox" id="Sa" name="Sa" checked onclick="ToggleDay('Sa')">Sa</td>
  <td><input type="checkbox" id="Su" name="Su" checked onclick="ToggleDay('Su')">Su</td>
</tr></table>

Code for the function is as follows

function ToggleDay(daynm) {
  loading.open();  
  var myvar1 = "#" + daynm;
  if ($(myvar1).is(":checked"))
    $('.' + daynm).show("slow");
  else
    $('.' + daynm).hide("slow");
  loading.close();
}

The above code should work like when I un-check any day eg. Monday then it should first remove checked mark from check box, show spinner, hide all TD where class is "Mo" and finally hide spinner.

It works, it takes 5 to 6 second to do full operation. But when I un-check the check box it updates the pages all after completing the operation. i.e. the user will still see the check mark even when he has clicked the check-box.

Is there any way to flush the action inbetween show that the page gets refreshed after every logical action is complete. i.e. User should see uncheck the box immediately then see the spinner and after 5 to 6 second when all with the class day "Mo" is hidden should hide the spinner.

Answer 1

Try make the process async:

function ToggleDay(daynm) {
    setTimeout(function() {
        loading.open();  
        var myvar1 = "#" + daynm;
        if ($(myvar1).is(":checked"))
            $('.' + daynm).show("slow");
        else
            $('.' + daynm).hide("slow");
        loading.close();
    }, 1);
}