How to load PHP file into DIV by jQuery?

Question

I am developing a website and I have this on the side menu :

<a href="#" class="leftMenu" id="contact">Contact Us</a>

then I have this script

$(document).ready(function(){
  $("#contact").click(function(){
    $("#contents").load('home.php');
  });
});

and I have this DIV inside my page :

<div class="contentWrapper" id="contents"></div>

Obviously, what I am trying to do is to load home.php when I click on the Contact Us hyperlink, which doesn't work. What is wrong with my code?

Your error is probably in home.php. Try using firebug (or Developer console) to watch the request and response. — Ben D
– Ben D, Commented Sep 21, 2012 at 4:29
Sorry, I cannot show where this is set up due to customer request. However, I am very sure that my jQuery is working as the toggling of link display works. However, when I click on the Contact Us link, it doesn't load up the contents inside the div as it should. — JudeJitsu
– JudeJitsu, Commented Sep 21, 2012 at 4:44

Mangala Edirisinghe · Accepted Answer · 2012-09-21 04:42:45Z

18

add home.php page url instead of file name.

$(document).ready(function(){
  $("#contact").click(function(){
    $("#contents").load('url to home.php');
  });
});

answered Sep 21, 2012 at 4:42

Mangala Edirisinghe

1,1012 gold badges16 silver badges32 bronze badges

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

4 Comments

JudeJitsu Over a year ago

Thanks, for some weird reasons, it worked! But I am wondering why it doesn't work without the URL. It should be the same, right?

Mike H. Over a year ago

Yes, relative URL's should work. Try appending using /home.php?

user2805663 Over a year ago

how can you load two different pages in two different div in one click of a button?

Kamel Labiad Over a year ago

after loading dose it takes the CSS style from the destination page?

Tom · Accepted Answer · 2012-09-21 04:34:07Z

11

You can use $.load() like this, to get more data of whats happening. When you see the error message, you probably can solve it yourself ^^

$("#contents").load("home.php", function(response, status, xhr) {
  if (status == "error") {
      // alert(msg + xhr.status + " " + xhr.statusText);
      console.log(msg + xhr.status + " " + xhr.statusText);
  }
});

answered Sep 21, 2012 at 4:34

Tom

3,0601 gold badge21 silver badges23 bronze badges

Comments

TechYogi · Accepted Answer · 2016-05-20 12:50:28Z

3

@user2805663 I know this post is pretty old but though let me post the solution it might help someone else, as it helped me.

Thanks to @Mangala Edirisinghe

by following method you can load two separate files in two different DIVs with single click(Link).

$(document).ready(function(){ 
 $("#clickableLink").click(function(){ 
  $("#contents").load('url/file1.php');
  $("#contents2").load('url/file2.php'); 
 }); 
});

answered May 20, 2016 at 12:50

TechYogi

3713 silver badges12 bronze badges

2 Comments

Kamel Labiad Over a year ago

dose it maintain the css style too?

TechYogi Over a year ago

@KamelLabiad Yes it does maintain because normally you load your CSS in the HEAD section so it's available in DOM already.

Code Lღver · Accepted Answer · 2015-04-17 07:18:23Z

1

You have to use the path of "home.php" from index dir and not from script dir.

If you site is :

/
  index.php  
  scripts
     /script.js 
     /home.php

You have to modify your parameter passing "scripts/home.php"

edited Apr 17, 2015 at 7:18

Code Lღver

15.6k16 gold badges61 silver badges75 bronze badges

answered Oct 10, 2012 at 4:58

Domenico Luciani

3814 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to load PHP file into DIV by jQuery?

4 Answers 4

4 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related