0

I'm trying to load a page when a div from my content is loaded , but isn't working. Can you help me and tell me where is my error or why isn't working ? Thanks !

Here's the code

index.php 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul id="nav">
<li><a href="index">index</a></li>
<li><a href="about">contact</a></li>
</ul>

<div id="content"></div>
<script src="http://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
</body>
</html>

hello.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<h1>Hello World</h1>
</body>
</html>

And javascript

$(document).ready(function() {
$('#content').load('hello.php');
});
Improve this question
5
  • 1
    Try using the browser debugger/console.
    – Brad M
    Commented Jun 18, 2013 at 14:42
  • Is hello.php in the same directory as index.php?
    – Filippos Karapetis
    Commented Jun 18, 2013 at 14:44
  • @Filippos Karapetis yes , it is. It seems when i open with chrome i get this error in console : origin null is not allowed by access-control-allow-origin
    – Luican Adrian
    Commented Jun 18, 2013 at 14:47
  • Maybe try looking at this answer. Your code works perfectly for me.
    – galdre
    Commented Jun 18, 2013 at 14:51
  • @LuicanAdrian: Check this answer: stackoverflow.com/questions/3595515/…
    – Filippos Karapetis
    Commented Jun 18, 2013 at 14:51

3 Answers 3

Reset to default
1

Use this in head section

<script src="http://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
Improve this answer
0

Change your html like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>

</head>

<body>
<ul id="nav">
<li><a href="index">index</a></li>
<li><a href="about">contact</a></li>
</ul>

<div id="content"></div>

</body>
</html>

And your Jquery like th is:

$("#content").load("/hello.php", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});

This should work, and if not it will let you know what happened.

Improve this answer
0

You have to make sure this script tag 

<script src="http://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script>

is executed before

$(document).ready(function() {
     $('#content').load('hello.php');
});
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.