Load a .php file into a div using JQuery

Question

I've been searching around and nothing quite fits what I need. Here's what I'm trying to accomplish:

<a href="">TSConfig</a> <!-- When clicked, it loads tsconfig.php which contains a form and some php code into #main_content -->
<a href="">MVSN</a> <!-- When clicked, it loads mvsn.php which contains a form and some php code into #main_content -->
<a href="">Fulfillment</a> <!-- When clicked, it loads maint_fulfil.php which contains a form and some php code into #main_content -->

<div class="grid_3" id="main_content">

    <!-- PHP CONTENT TO LOAD HERE -->

</div>

I have tried different variants of JQuery examples to try and make this work, however most examples contain pulling an id from with the .php file and manipulating the url somehow, which is something I didn't want to do.

Many thanks and I hope I explained it right.

Answer 1

Change your html to this...

<a class="ajax-link" href="tsconfig.php">TSConfig</a> <!-- When clicked, it loads tsconfig.php which contains a form and some php code into #main_content -->
<a class="ajax-link" href="mvsn.php">MVSN</a> <!-- When clicked, it loads mvsn.php which contains a form and some php code into #main_content -->
<a class="ajax-link" href="maint_fulfil.php">Fulfillment</a> <!-- When clicked, it loads maint_fulfil.php which contains a form and some php code into #main_content -->

<div class="grid_3" id="main_content">

    <!-- PHP CONTENT TO LOAD HERE -->

</div>

and here's the script that loads the required pages for you...

$(function() {
    $("a.ajax-link").on("click", function(e) {
        e.preventDefault();
        $("#main_content").load(this.href);
    });
});

I added the class ajax-link to each of the links so you can apply the above script to them, but not any other links on the page.

Answer 2

jQuery.load

Last example is quite clear, too:

$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {
  alert( "The last 25 entries in the feed have been loaded" );
});