View Full Version : First ajax project, not doing so well

The reaper
02-22-2011, 05:08 AM
Hello there!

I decided to put a ajax refresh in my page to try to incorporate better dynamics into my web building.

I have a page, getmail.php which is below.

require_once 'database.php';
$userid = $_SESSION['user'];
$mail_sql=mysql_query("SELECT COUNT(*) FROM mail WHERE receiver='$userid' and hasread='1' and send='0'");
echo $mail_result;

Which just selects the count from the mail table.
Here is index.php where the javascript is.

You have <a href="?page=mail">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script language="JavaScript">
setInterval( "mailajax();", 5000 );
$(function() {
mailajax = function(){
unread messages</a>.<br />

As it does not return a number under any amount of time. Which if I visit getmail.php directly, it does return a number. But it doesn't seem to work on the index page where the javascript calls it.

Any ideas? Any tutorials that covers this?

02-22-2011, 09:11 AM
Did you copypaste that Javascript snippet from somewhere? It's missing two closing braces! Please use a debugger, so you don't trip up on such trivial errors. Also, be extra careful to always use correct indentation, which would make mistakes like that impossible.

Another thing: You have a race condition in there (mailajax could get called before it is defined), which you definitely should get rid of. Also, passing a string instead of a function to setInterval is something to be avoided, and using setInterval for AJAX calls is bad, too, because on slow connections a huge queue of unfinished AJAX requests can build up. And use the var keyword to define your variables, otherwise they will be global, which is bad, and might even error out your script! And there's no reason to use the ancient jQuery 1.3.0 instead of the current 1.5.0.

So, your script should really look something like this:

$(function() {
var mailajax = function(){
$('#result').load('getmail.php', function () {
setTimeout(mailajax, 5000);

I suppose a general Javascript tutorial would help you more than anything AJAX specific, which is not the problem here.

The reaper
02-22-2011, 01:24 PM
Thank you very much!
What would you recommend for a debugger? I was using a google based one, but obviously it missed the two brackets that you picked up.

And yes, this Javascript was from two different tutorials, one demonstrating the .load() method and the other demonstrating the function and refresh. So didn't just copy the entire thing, tried to make it myself :p

Should I change the library to 1.5 instead?

Thank you though!

The reaper
02-22-2011, 01:31 PM
Switched over to the fixed version, still a no go. Doesn't display any number on the index page, nor doesn't it seem to change in 5 seconds (the refresh time).

Is it because PHP session's to not go through javascript gets?

On the getmail.php, it pulls it from the active session. require_once and include() for PHP will work doing it, but will javascript do it?

Not really sure how else to word it?

The reaper
02-22-2011, 01:35 PM
I put an if(isset($_SESSION['user'])) statement into getmail.php to see if it would echo if it wasn't set, but nothing was pulled on index.php

02-22-2011, 04:31 PM
I don't know what you mean with "a google based debugger". I'm talking about something like the Firebug plugin for Firefox, or the built-in debuggers in Chrome or Safari.

Yes, you should swith to 1.5. The only reason for using an old version is if you are using old plugins which won't work with the current one because of API changes (which are very rare in jQuery anyway).

If your code is still not working, you would have to show it to us on a live site, because if you're not using a debugger, there could be a million things wrong with it. The session shouldn't be a problem, though; for your server, an AJAX request is just a standard HTTP request.

The reaper
02-22-2011, 09:14 PM
The site is under heavy development, so don't worry about images not appearing/css issues etc.

info removed by admin as requested

Once you login, there will be a box a bit under the navigation will have in the box.

"Sup coding forums! Logout(link)"
"You have unread messages."
But it should read, "You have 0 unread messages." Or more if there are any unread.

Please get back to me whenever you are done looking at it, as I would like to take the site link off and close the account.

Thank you!

02-22-2011, 09:26 PM
Sorry, the corrected code I gave you above was still missing a parenthesis. I fixed it there, but the advice that accompanied that snippet still stands: Please use a debugger, so you don't trip up on such trivial errors. It will reliably notify you of those errors, so you can instantly fix them without playing help-ping-pong on some forum.

The other advice I gave you also still stands why did you remove all the indentation when you copy-pasted that snippet into your code?

The reaper
02-22-2011, 09:54 PM
Did it show as removed? I did have to add extra indentation so that it fits the div that it is in.

I've installed firebug and think I've opened it? Not really sure on how to run the debugger for ajax/javascript.

Also, is this the right javascript source?

02-22-2011, 10:41 PM
Yes, the indentation was removed. Now it's there again.

You click on the little bug at the bottom left. Then the Firebug panel opens, and you should take some time to explore the different tabs and what you can do with them.

The jQuery source is the right one.

Ok, now to the problem: There seems to be a severe misunderstanding on your part how the code you gathered is supposed to work, which shows in you putting it right into HTML body where you eventually want the response of the AJAX request to go.

First of all, the code is supposed to go into the <head>. Passing a function to $() makes sure it won't get called before the DOM is loaded, so that's ok. $('#result') is a jQuery object, which corresponds to the HTML element with the id 'result'. If you call one of its methods, the action is carried out for each DOM object that matches the selector (the action in your case being the AJAX request and subsequent DOM manipulation). You don't have an object with id property 'result' in your DOM (meaning HTML element with id attribute 'result') though, so nothing happens. You would have to put the selector of the element where you want the server response to go there!

I strongly suggest you read the jQuery documentation (http://docs.jquery.com/Main_Page), and especially the load method reference (http://api.jquery.com/load/), before attempting to do what you want to do.

The reaper
02-22-2011, 11:00 PM
I have bookmarked both those pages, I thank you for taking your time to help me out.