How to load a php file on page load (jQuery provided)

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

First of all, this kind of event should be a function:

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

Then why not use ajax() instead of load()?

$(document).ready(function () {
    load_article = function (article_id) {
        $.ajax({
            url: '../kratisis/forms/' + article_id + '.php',
            beforeSend: function () {
                $('#reservationdetails').html('').addClass('loading')
            },
            success: function (data){
                // Assuming that #reservationdetails is the articles text area
                $('#reservationdetails').html(data).removeClass('loading')
            }
        });
    };
});

And now you can add a default article on the first page load. And also the change event too:

$(document).ready(function () {
    var default_article = 1;

    // Article chaning function
    load_article = function (article_id) {
        $.ajax({
            url: '../kratisis/forms/' + article_id + '.php',
            beforeSend: function () {
                $('#reservationdetails').html('').addClass('loading')
            },
            success: function (data){
                // Assuming that #reservationdetails is the articles text area
                $('#reservationdetails').html(data).removeClass('loading')
            }
        });
    };

    // Add the change event to the select
    $('#termid').change(function () {
        load_article($(this).val());
    });

    // Sets a default article on first page load
    load_article(default_article);
});

Answer 2

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.)

Answer 3

You should try jQuery trigger

$('#termid').trigger('change');

Be sure to use trigger AFTER you have binded callback function for change event though.