CODEWITHSUNDEEP
phpjavascriptjqueryhtmlajax
PJCH
PJCH

Reputation: 9

Jquery Not Loading PHP File

I have not been able to use JQuery/Ajax to load the content of my PHP file into a div tag.

Here is my page that is loading the file:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script>
function init() {
    reloadChat();
    setInterval (reloadChat, 5000);
}

function reloadChat() {
    $.ajax({  
        url: "chat.php",  
        cache: false,  
        success: function(){
            $("#chatmenu").load("chat.php");
        },  
    });  
}
</script>

<body onLoad='init()'></body>

<div id='chatmenu'></div>

The PHP file I am loading (chat.php) is in the same folder, and is just an echo statement:

<?php echo "test"; ?>

To make sure it was not a problem with my Javascript functions, I added an alert under the success function, and it did alert me every 5 seconds, so I think it is something with the load statement.

Upvotes: 0

Views: 1934

Answers (4)

blockhead
blockhead

Reputation: 9705

Try this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script>

function init() {
    reloadChat();
    setInterval (reloadChat, 5000);
}

function reloadChat() {
    $.ajax({  
        url: "chat.php",  
        cache: false,  
        success: function(response){
            $("#chatmenu").text(response);
        },  
    });  
}

</script>

<body onLoad='init()'></body>

<div id='chatmenu'>

</div>

Also, for the love of god, please use an up-to-date version of jQuery

Upvotes: 2

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

Use .load() straight away, no need to make an Ajax request first:

function reloadChat() {
    $("#chatmenu").load("chat.php");  
}

Update:

I notice that in your example code, you close your body-tag before your div element.

<body onLoad='init()'></body> <!-- This ain't right --> 
<div id='chatmenu'></div>

Try this instead:

<body onLoad='init()'>
    <div id='chatmenu'></div>
</body>

Upvotes: 4

KGZM
KGZM

Reputation: 414

It looks your first request from $.ajax will return 'test', and then you're using that as the URL for $("#chatmenu").load.

Try this:

function reloadChat() {
    $.ajax({  
        url: "chat.php",  
        cache: false,  
        success: function(data){
            $("#chatmenu").append(data);
        },  
    });  
}

Or, if you want to replace the contents of #chatmenu the method posted by Christofer Eliasson where you just call $("#chatmenu").load("chat.php") in reloadChat will work.

Upvotes: 1

Martin
Martin

Reputation: 6687

Putting it all together:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div id="chatmenu"></div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
      $(function() {
        setInterval (function() { 
           $("#chatmenu").load("chat.php");
        }, 5000);
      });
    </script>
  </body>
</html>

Upvotes: 0

Related Questions