JQuery firing before my data is loaded in the page controls

Question

I am using ASP.NET MVC and jQuery.

I have this code in my js file. It should hide and show certain divs when a user clicks on a radio button. I would also like to fire this on the page load using the trigger method. My problem seems to be that when the event is trigger my default values from the model haven't been loaded into the control and both checkboxes are false. My code would seem to be correct, but the trigger is just firing too soon. Is there a way to tell the jQuery trigger not to fire until my model data has been loaded into the controls?

 $(function() { $('table#ScheduleTable
 input.DailyFrequency,
 input.WeeklyFrequency').click(function()
 {
     if ($(this).attr('checked') == true & $(this).val() == "Daily") {
         $('.dailyOption').children().show();
         $('.weeklyOption').children().hide();
     };
     if ($(this).attr('checked') == true & $(this).val() == "Weekly") {
         $('.dailyOption').children().hide();
         $('.weeklyOption').children().show();
     } });

 $('table#ScheduleTable
 input.DailyFrequency,
 input.WeeklyFrequency').trigger('click');
 });

Answer 1

you shoudl use the ready event instead:

$(document).ready(function () {
  // do you jquery initialization here
   $('table#ScheduleTable....
  ...
});

http://docs.jquery.com/Events/ready

Answer 2

I have just tried it in firefox and $(function() { }) and $(document).ready(function() { }) seem to behave the same, although the .ready form seems to be recommended by jquery. Maybe $(document).load would work better, as it might happen that on some browsers the default values get filled later? Does it behave the same on all browsers or only on some of them?

Answer 3

How are you loading the values onto the page? as normally its not a problem as they are in the html output and JQuery waits until that is loaded by using the $(function() {} logic.

As your trigger is in the $(function() {} logic it will just run the click event right away once the page is loaded.

If you are loading the values via ajax for example, you will need to call the trigger once the ajax call has completed.

Answer 4

What happens if you chain these commands instead? E.g.

$(function() { $('table#ScheduleTable
 input.DailyFrequency,
 input.WeeklyFrequency').click(function()
 {
     if ($(this).attr('checked') == true & $(this).val() == "Daily") {
         $('.dailyOption').children().show();
         $('.weeklyOption').children().hide();
     };
     if ($(this).attr('checked') == true & $(this).val() == "Weekly") {
         $('.dailyOption').children().hide();
         $('.weeklyOption').children().show();
     } }).trigger('click');
 });

I suspect that with your current script, jQuery goes and sets up the click event function first, and as that's being geared up jQuery has then moved on to set up the trigger event.

Perhaps if you chain them jQuery will be forced to finish the click segment before assigning the trigger?

Answer 5

Code updated to the following. It now works. thanks for your replys! :)

$('table#ScheduleTable input.DailyFrequency,

input.WeeklyFrequency').click(function() { UpdateScheduleView(); });

function UpdateScheduleView() {
    if ($('input.DailyFrequency').attr('checked')

== true) { $('.dailyOption').children().show(); $('.weeklyOption').children().hide(); } else { $('.dailyOption').children().hide(); $('.weeklyOption').children().show(); } }

if ($('table#ScheduleTable input.DailyFrequency').length > 0) {
    UpdateScheduleView();