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.

Alex · Accepted Answer · 2011-09-16 00:20:22Z

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

answered Sep 16, 2011 at 0:20

Alex

9,5011 gold badge41 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

EnexoOnoma Over a year ago

Thank you for this, it worked like charm! I have accepted your answer. One simple question though, is there any way when I double click on a textbox (in my case I use datePicker in a textbox) not to show any previous suggestions ?

Alex Over a year ago

Do you mean previous suggestions as in browser autocomplete? Not sure, a very different question from this one. By all means open a new question though!

Mikk · Accepted Answer · 2011-09-16 00:17:59Z

1

You should try jQuery trigger

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

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

answered Sep 16, 2011 at 0:17

Mikk

2,2293 gold badges32 silver badges44 bronze badges

Comments

Kalle H. Väravas · Accepted Answer · 2011-09-16 00:38:55Z

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);
});

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related