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);
}
Rent Charter Buses Company
READ ALSO
Pass dynamic image parameter to modal-dialog

Pass dynamic image parameter to modal-dialog

I am implemeting a system where the user clicks on an image and is redirected to another website. Before redirecting a modal dialog appears and confirms that they will be redirected to another website.

439
Array access not working

Array access not working

I have a data structure that looks like this:.

334
Colorbox + Form, Submit only working on Enter button (not onclick)

Colorbox + Form, Submit only working on Enter button (not onclick)

I integrated a popup upon landing on our page http://www. showstye.

324
How to get Page Flipper animation for next / prev pages

How to get Page Flipper animation for next / prev pages

I have a page flipper animation for a notebook styled divs:.

255