Member Avatar for RazorRamon

Ok i'm trying to build a forum with jquery ajax characteristics. Below is the html/jquery coding. And i know jquery is loaded because I did the alert(1); inside the document ready and it worked.

<!doctype>
<html>
<head>
	<title>Shouts!</title>
	<script src="jquery.js"></script>
	<script>
	$(document).ready(function() {
		$("#messages").load(function('loadchat.php');
		
		$("#post").submit(function(){
		
			return false;
		});
	});
		
	</script>
</head>
<body>
<div id="messages"></div>
<table width="480" BACKGROUND="images/commentback.jpg">
     <tr>
         <td>             
             <form id="post" method="post" action="datetest.php">
              <span class="whitetitle">Name:<br><input name="messages" type="text" STYLE="background: white; border: 1px #000000 solid;"><br >
              <input type="submit" value="send">
              </form>
         </td>
     </tr>
</table>
</div>
<br><br>
</body>
</html>

Below is the php load I'm using to load my database info. I've ran this without jquery and it works fine but I want it to load in messages id. Do I have to so something different when i integrate php and jquery that I'm not aware of?

<?php

include 'config2.php';
$dbname = 'test';
$tablename = 'time';
include 'opendb.php';

$res = mysql_query("SELECT timestamp, message FROM time ORDER BY timestamp DESC LIMIT 0,10;");

while ( $row = mysql_fetch_array($res) ) {
	echo $row["message"] . "<br />";
	echo $row["timestamp"] . "<br />";
	echo date("g:i a F j, Y ",  $row["timestamp"] ) . "<br /><br />";
}
?>
  • 3 Contributors
  • 3 Replies
  • 589 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by xylude

Dani AI

Generated

The immediate blocker was a small syntax problem in your jQuery call (which spotted) and the simple fix from gets you part way there. After correcting the .load call you still need a reliable pattern for submitting the form and refreshing the messages area without a full page reload. Below is a short checklist of things to verify and a compact, robust example you can drop in.

Checklist

  • Confirm jQuery is loaded before any script that uses it (open the console and ensure no "undefined" errors).
  • Load the PHP file directly in the browser first (e.g. visit loadchat.php) and look for PHP notices/warnings — those break AJAX HTML.
  • Use the browser Network tab to confirm loadchat.php returns HTTP 200 and the expected HTML.
  • Avoid confusing names: having an input named messages and a #messages element is legal but confusing; consider renaming the form field to message.
  • Use e.preventDefault() when handling the form submit and handle success/failure so you see errors in the console.

Example (AJAX submit + periodic refresh)

$(function(){
  function refresh() {
    $("#messages").load("loadchat.php");
  }

  refresh();                     // initial load
  setInterval(refresh, 5000);    // auto-refresh every 5s

  $("#post").on("submit", function(e){
    e.preventDefault();
    var $form = $(this);
    $.post($form.attr("action"), $form.serialize())
      .done(function(){
        refresh();
        $form[0].reset();
      })
      .fail(function(xhr, status, err){
        console.error("Submit failed:", status, err);
      });
  });
});

If that still fails, copy the exact response from the Network tab and any console error text into the thread — that will pinpoint whether it’s a client-side syntax/JS issue or a server-side PHP error.

Recommended Answers

All 3 Replies

Member Avatar for Member #900861

Do you receive an error when you load up the page or does it still display ?

I think the problem might just be the jQuery. I don't really understand what you're trying to do with .load(function('loadchat.php')). Try the following :

<!doctype>
<html>
<head>
<title>Shouts!</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("#messages").load('loadchat.php');
 
$("#post").submit(function(){
 
return false;
});
});
 
</script>
</head>
<body>
<div id="messages"></div>
<table width="480" BACKGROUND="images/commentback.jpg">
<tr>
<td>
<form id="post" method="post" action="datetest.php">
<span class="whitetitle">Name:<br><input name="messages" type="text" STYLE="background: white; border: 1px #000000 solid;"><br >
<input type="submit" value="send">
</form>
</td>
</tr>
</table>
</div>
<br><br>
</body>
</html>
Edited by Member #900861 because: n/a
Member Avatar for RazorRamon

I'm trying to load the data that I have in my database (test1, test2) in the div messages. loadchat.php works alone without jquery

localhost/loadchat.php

but doesn't work when i'm loading it to jquery.

Member Avatar for xylude

$("#messages").load(function('loadchat.php'); should be $("#messages").load(function('loadchat.php'));

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.