Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

firing a jQuery change function at document ready

Tags:

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;         
    }
});
});
like image 851
Mike_Laird Avatar asked May 16 '11 20:05

Mike_Laird


People also ask

Which jQuery function can you use to execute when the document finished loading?

ready( handler )Returns: jQuery. Description: Specify a function to execute when the DOM is fully loaded.

What is difference between $( function () and document Ready?

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.

Can we define function in document ready?

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.


2 Answers

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
like image 181
user113716 Avatar answered Sep 18 '22 02:09

user113716


Why not just trigger change after selecting the appropriate radio buttons?

$('input[name=country]').change();

This is equivalent to

$('input[name=country]').trigger('change');
like image 39
no.good.at.coding Avatar answered Sep 17 '22 02:09

no.good.at.coding