Question

Each article of my site has a unique ID number. When a user clicks to read an article I use a function to get the current’s article ID, so the option of the same value in a drop down list to be selected automatically.

For example if I click in the article with ID = 79

<option value="0" >Please Choose</option>
<option value="97" <?php echo $postid == '97' ? 'selected="selected"' : '';?> >This is 97</option>
<option value="98" <?php echo $postid == '98' ? 'selected="selected"' : '';?> >This is 98</option>

my dropdown list will have “This is 97” option selected.

The problem here is that I use a jQuery script that displays a form upon selection as below:

<script language='JavaScript'>
$(document).ready(function() {
$('#termid').change(function() {
var val = $(this).val();
$('#reservationdetails').empty().addClass('loading').load('../kratisis/forms/' + val + '.php', function(){$('#reservationdetails').removeClass('loading') });
});
});
</script>

<div id="reservationdetails"></div>

When a user enters to read article 97, the selected option will be “This is 97” but the requested php file (from jQuery) will not be shown unless I choose 98 and then back to 97.

My question is how to handle this? I mean how to show the additional php file when a user enters the article at first but replace it when the dropdown value is changed?

I thought of using <?php include("") ?> but assuming that I am on 97 and click on 98 there will be 2 additional php files.

Thank you for your ideas.

Answer 1

You’re firing the anonymous function on change, but you also need to fire it on page load. Abstract the anonymous function to a named one:

var loadPage = function(val) {
  $('#reservationdetails')
    .empty()
    .addClass('loading')
    .load('../kratisis/forms/' + val + '.php', function(){
      $('#reservationdetails').removeClass('loading');
    });
}

Then bind it to change, and initially call it:

loadPage($('#termid').change(function() { loadPage($(this).val()); }).val());

(you can do this all on one line because .change() will return the jQuery object of #termid.)