Loading HTML dynamically using JavaScript and PHP

Question

I have the following code:

 <?php
 
 if ($x == 1){

 ?>
   <b>Some html...</b>
   <?php
             }
    else if ($x==2){ ?>

<b> Other html...</b>
<?php
}
?>

Now I would like to have two links below ( a href ) and somehow pass the variable $x (so Link1 passes x=1 and Link2 passes x=2 ) in order to load the relevant bit of code from if statement. I know I can pass $x using the form and then test its value and load required a bit of code, but I would like to do it smoothly, without reloading the page. I think that jQuery could help it, but I have no idea how to do it. Any ideas greatly appreciated.

Answer 1

Forgetting about PHP for the moment, you're looking for jQuery's .load() :

<div id="container"></div>
<a href="javascript:void(0);" onclick="loadContent(1);">Load 1</a>
<a href="javascript:void(0);" onclick="loadContent(2);">Load 2</a>

<script type="text/javascript">
loadContent = function(content){
   $('#container').load(content + '.html');
}
</script>

The above code (not tested, but it's at least close) will insert the contents of 1.html , or 2.html (on the server) into the div with id="container" .

There are plenty of tutorials, like the one linked in pygorex1' answer, that cover various ways of doing this.

Answer 2

What you're looking for is AJAX - the ability to load server content using background HTTP requests in Javascript. Here's a tutorial I've found useful for implementing AJAX using JQuery:

http://articles.sitepoint.com/article/ajax-jquery