JudeJitsu
JudeJitsu

Reputation: 748

How to load PHP file into DIV by jQuery?

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?

Upvotes: 12

Views: 108366

Answers (4)

TechYogi
TechYogi

Reputation: 371

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

Upvotes: 3

Domenico Luciani
Domenico Luciani

Reputation: 381

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"

Upvotes: 1

Mangala Edirisinghe
Mangala Edirisinghe

Reputation: 1111

add home.php page url instead of file name.

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

Upvotes: 18

Tom
Tom

Reputation: 3040

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

Upvotes: 11

Related Questions