Using jQuery to load page into a div element and remove current loaded page

Question

I'm trying to load content/pages dynamically without having to leave the page, or, the page changing. Assume the following:

I have four pages: index.php, about.php, contact.php, products.php and when a visitor visits the website, by entering "http://mysite.com" they are greeted with the "index.php" page.

If they click onto a link, let's say "about" then the "index" page is removed and the contents of "about.php" is displayed inside the div content-loaded I have tried the following:

jQuery:

$(document).ready(function() {

   $("#content-loaded").load("index.php");

   $('.about').click(function() {

       $("#content-loaded").load("about.php");
   });

   //....
});

HTML:

<div class="menu">
   <a href="#" class="home">Home</a>
   <a href="#" class="about">About</a>
</div>

  <div id="content-loaded">

  </div>

But this does not work. It displays both the index page AND the about page. Could anyone suggest any improvements/answers or a more elegant way to structure this?

Thanks

DanielX2010 · Accepted Answer · 2013-07-24 00:49:35Z

4

Try cleaning the previous content. See if this works:

$(document).ready(function() {

   $("#content-loaded").load("index.php");

   $('.about').click(function(evt) {
       $("#content-loaded").empty();
       $("#content-loaded").load("about.php");
       evt.preventDefault();
   });

   //....
});

edited Jul 24, 2013 at 0:49

answered Jul 24, 2013 at 0:25

DanielX2010

1,9081 gold badge24 silver badges27 bronze badges

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

4 Comments

Phorce Over a year ago

I tried this, it clears it but then the "index.php" page just comes back

DanielX2010 Over a year ago

@user1326876 try $('.about').click(function(evt) { $("#content-loaded").empty(); $("#content-loaded").load("about.php"); evt.preventDefault(); });

Phorce Over a year ago

Thank you! This now works =) I don't suppose you could recommend a way of allowing for say, if someone entered http://mysite.com/about.php into their browser, then it would show the page as if they were clicking on the link? So at the moment, it just shows the text and not the actual layout of the site.. If this makes sense?

DanielX2010 Over a year ago

My suggestion to you is not to use JS for that. Just add a variable to your index.php page. For instance, mysite.com/index.php?page=about That is common practice and is much easier to do. All you have to do is to check your $_GET['page'] variable in the beginning of your index.php file and then add the specific content. you can insert the content from others php files (about, contact, ...) directly in your index.php by doing using include.

miguelcaires · Accepted Answer · 2013-07-24 00:47:34Z

1

Using jQuery 1.9.1 and the following source code, worked for me.

<script type="text/javascript"> 
$(document).ready(function() {

   $("#content-loaded").load("index.php");

   $('.about').click(function() {
       $("#content-loaded").empty();
       $("#content-loaded").load("about.php");
   });

   $('.home').click(function() {
       $("#content-loaded").empty();
       $("#content-loaded").load("index.php");
   });

   //....
});
</script>

answered Jul 24, 2013 at 0:47

miguelcaires

6841 gold badge4 silver badges5 bronze badges

Collectives™ on Stack Overflow

Using jQuery to load page into a div element and remove current loaded page

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