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, Sep 21 '12 at 04: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, Sep 21 '12 at 04:44
I've been testing this all morning, and can't get $.load('file.html') NOT to work. It seems to get it always. Can you tell about your folder structure, do you include files from subfolders and such. — Tom, Sep 21 '12 at 06:53

score 18 · Accepted Answer · answered Sep 21 '12 at 04:42

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 '12 at 04:42

Mangala Edirisinghe

1,111
2
15
32

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? – JudeJitsu Sep 21 '12 at 04:48
Yes, relative URL's should work. Try appending using `/home.php`? – Mike H. Oct 16 '13 at 12:32
how can you load two different pages in two different div in one click of a button? – Aug 06 '14 at 03:38
after loading dose it takes the CSS style from the destination page? – Kamel Labiad Jun 19 '20 at 23:21

score 11 · Answer 2 · answered Sep 21 '12 at 04:34

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);
  }
});

score 3 · Answer 3 · answered May 20 '16 at 12:50

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 '16 at 12:50

TechYogi

371
3
12

dose it maintain the css style too? – Kamel Labiad Jun 19 '20 at 23:23
@KamelLabiad Yes it does maintain because normally you load your CSS in the HEAD section so it's available in DOM already. – TechYogi Dec 15 '21 at 16:51

score 1 · Answer 4 · edited Apr 17 '15 at 07:18

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 '15 at 07:18

Code Lღver

15,573
16
56
75

answered Oct 10 '12 at 04:58

Domenico Luciani

381
4
9

How to load PHP file into DIV by jQuery?

4 Answers4

Linked

Related