My change function allows users to switch from country to country and get different text and features. It works when changing country selections. But at initial page load, it does not fire jQuery change to set the hide and show text divs for the default / initial country.
Both divs display at initial page load. When I change away and then back to the default/initial country, change fires, hide and show fire, and shows the proper information and features.
I have tried document.ready
with a change function both inside the switch selections and outside the change function. Neither work - they don't fire the hide, show and other jQuery in the switch cases at doc ready. Its not clear to me whether 'ready' is a valid trigger event.
I have also tried:
$('input[name=country]').value('US').trigger('click');
but it broke the change function. Here's the code. The country selection below is just 2 countries to keep it simple, but actually, there are many.
$(document).ready(function()
{
//1st tier - select country via radio buttons:
//Initialize country
$('input[name=country]:first').attr('checked', true); //Set first radio button (United States)
//$('input[name=country]:first').attr('checked', true).trigger('ready'); //sets 1st button, but does not fire change
//$('input[name=country]:first').trigger('click'); //sets 1st button, but does not fire change
$('input[name=country]').change(function ()
{
// change user instructions to be country specific
switch ($('input[name=country]:checked').val())
{
case 'US':
$('#stateMessage1').text('2. Select a state or territory of the United States.');
$('#stateMessage2').text('Start typing a state of the United States, then click on it in the dropdown box.');
$('#threeSelects').show();
$('#twoSelects').hide();
//select via 3 steps
break;
case 'CA':
$('#stateMessage1').text('2. Select a province or territory of Canada.');
$('#stateMessage2').text('Start typing a province of Canada, then click on it in the dropdown box.');
$('#twoSelects').show();
$('#threeSelects').hide();
//select town via 2 steps - country, town
break;
}
});
});
ready( handler )Returns: jQuery. Description: Specify a function to execute when the DOM is fully loaded.
So technically they are both the same. Not major difference between these two declaration. They used based on weather you use JavaScript then you should use $(document). ready declaration in other case you use jQuery library which is a part of JavaScript then you should use $(function) declaration.
The ready() method is used to make a function available after the document is loaded. Whatever code you write inside the $(document ). ready() method will run once the page DOM is ready to execute JavaScript code.
Just chain .trigger('change')
to the end of the handler assignment.
// ----------v-------v-----quotation marks are mandatory
$('input[name="country"]').change(function ()
{
// change user instructions to be country specific
switch ($('input[name="country"]:checked').val())
{
case 'US':
$('#stateMessage1').text('2. Select a state or territory of the United States.');
$('#stateMessage2').text('Start typing a state of the United States, then click on it in the dropdown box.');
$('#threeSelects').show();
$('#twoSelects').hide();
//select via 3 steps
break;
case 'CA':
$('#stateMessage1').text('2. Select a province or territory of Canada.');
$('#stateMessage2').text('Start typing a province of Canada, then click on it in the dropdown box.');
$('#twoSelects').show();
$('#threeSelects').hide();
//select town via 2 steps - country, town
break;
}
}).trigger('change'); // <--- RIGHT HERE
Or if you only want it to fire on the first element, use triggerHandler()
instead.
// ...
$('#twoSelects').show();
$('#threeSelects').hide();
//select town via 2 steps - country, town
break;
}
}).triggerHandler('change'); // <--- RIGHT HERE
Why not just trigger change
after selecting the appropriate radio buttons?
$('input[name=country]').change();
This is equivalent to
$('input[name=country]').trigger('change');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With