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.

Is the content of the ‘some’/‘other’ HTML actually dependent on client-side actions at all? If you just want to switch between one and the other you can wrap each in a div and show/hide each div to switch between the two. — bobince
– bobince, Commented Apr 14, 2010 at 22:44

Alex · Accepted Answer · 2020-11-06 04:01:16Z

2

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.

edited Nov 6, 2020 at 4:01

Alex

1,6001 gold badge16 silver badges27 bronze badges

answered Apr 14, 2010 at 22:12

timdev

63.1k6 gold badges86 silver badges93 bronze badges

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

4 Comments

Vonder Over a year ago

That's quite nice. What if I would like to load Javascript as well (not to the container, but entire document)? Should it be something like document.load(content + '.js');?

Vonder Over a year ago

OK,thanks a lot. One more thing - the code you provided doesnt load the file actually. When I change content + '.html' to "1.html" it does. Maybe a syntax error?

timdev Over a year ago

Not entirely sure why that would be. I'm sure you'll figure it out.

Vonder Over a year ago

Yes, missing '' in loadContent('1').

leepowers · Accepted Answer · 2010-04-14 22:10:08Z

0

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

answered Apr 14, 2010 at 22:10

leepowers

38.4k24 gold badges103 silver badges132 bronze badges

Collectives™ on Stack Overflow

Loading HTML dynamically using JavaScript and PHP

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related