Im running into a problem where i have an ajax driven page that is drawn when a user selects something from a simple drop down:

<select id = "selectdepartment">
    <option id = "default">Select an option...</option>
    ....
</select>

and the remainder of the page is drawn using the jquery .change() :

$('#selectdepartment').change(function(){

});

Which then runs some ajax to php script. everything works great, the problem is when i submit a form that was drawn with ajax (using $_SERVER['PHP_SELF'];), the data gets submited, the page reloads, and the page is cleared but the select box is still left where it was. The user has to move to a different option then back to the one the selected originally to re-fire the .change(). that sucks.

I could fix this by passing a php variable in all of my forms, then checking to see the variable set on every page load and if it is draw the page parts then, but this would lead to pretty messy code and it's less than desirable.

There has to be a way to do this with the jquery library, though my knowledge of the javascript language in general is not what i would like it to be. If anyone has any helpful hints please share, dont do it for me though, i wont learn that way :)

edit: code with .trigger

$('#selectdepartment').change(function(){
var department = $('#selectdepartment').val();
var day = $('#data').data('day');
var month = $('#data').data('month');
var year = $('#data').data('year');
//alert (department);

if(department === "Select an option..."){
    $('.hiddenuntildepartmentisselected').css({"display":"none"});
}
else{
$('.hiddenuntildepartmentisselected').css({"display":"block"});
}

showpoints(department);
drawpointstable(department, day, month, year);
displaytheuseresforselecteddepartment(department, '');

$('#sendthedepartment').val(''+department+'');
$('#hiddendepartmentidforaddinganewpoint').val(''+department+'');

}).trigger('change');//end run functions

Im running into a problem where i have an ajax driven page that is drawn when a user selects something from a simple drop down:

<select id = "selectdepartment">
    <option id = "default">Select an option...</option>
    ....
</select>

and the remainder of the page is drawn using the jquery .change() :

$('#selectdepartment').change(function(){

});

Which then runs some ajax to php script. everything works great, the problem is when i submit a form that was drawn with ajax (using $_SERVER['PHP_SELF'];), the data gets submited, the page reloads, and the page is cleared but the select box is still left where it was. The user has to move to a different option then back to the one the selected originally to re-fire the .change(). that sucks.

I could fix this by passing a php variable in all of my forms, then checking to see the variable set on every page load and if it is draw the page parts then, but this would lead to pretty messy code and it's less than desirable.

There has to be a way to do this with the jquery library, though my knowledge of the javascript language in general is not what i would like it to be. If anyone has any helpful hints please share, dont do it for me though, i wont learn that way :)

edit: code with .trigger

$('#selectdepartment').change(function(){
var department = $('#selectdepartment').val();
var day = $('#data').data('day');
var month = $('#data').data('month');
var year = $('#data').data('year');
//alert (department);

if(department === "Select an option..."){
    $('.hiddenuntildepartmentisselected').css({"display":"none"});
}
else{
$('.hiddenuntildepartmentisselected').css({"display":"block"});
}

showpoints(department);
drawpointstable(department, day, month, year);
displaytheuseresforselecteddepartment(department, '');

$('#sendthedepartment').val(''+department+'');
$('#hiddendepartmentidforaddinganewpoint').val(''+department+'');

}).trigger('change');//end run functions

• javascript
• jquery
• reload

2 Answers 2

You can use the .trigger() function to immediately trigger the change event handler when the page has loaded:

$('#selectdepartment').change(function() {
    // code here
}).trigger('change');

Or if you need to call it elsewhere via JavaScript/jQuery:

$('#selectdepartment').trigger('change'); // or just .change() as a shorthand

Updated

Your button for the form could make use of the onClick attribute, which would invoke a method to parse the form fields and post the data to your php script via .ajax().

In the success event method you then check any flags you need to and modify the element as you desire if needed.

Basic example:

Inside of .ajax():

...

url: 'xxx.xxx.xxx',
async: true,
type: 'POST',
dataType: 'html',
data: JSON.stringify( form_fields ),
beforeSend: function()
{
     // Pre send stuff, like starting a loading gif
},
success: function( data, textStatus, xhr )
{
    // Be sure you load the page with the content first
    $( '#containing-div' ).html( data );

    // Do  your check here, and modify your element if needed here
    if( flagtocheck === 'xxx' )
    {
        // Modify the element in question...
    }

    // I call a custom method termed `.ctrls()` here that makes any 
    // adjustments to the DOM once its loaded/updated.
},
error: function( xhr, textStatus, errorThrown )
{
}

Of course, you'll want to set flagtocheck appropriately in your case.

Hope that helps!

Note regarding edit This post was edited to be a little more descriptive and more easily understood. Since the person asking the question is already using the .ajax() method, the success event method is the ideal place for doing what the person asking the question is requesting. It is 1 less method invocation to directly modify the element there than using it to call .trigger() or .change() which then also directly modifies the element.