Notice: This is a discussion thread for comments about the SitePoint article, Easy Ajax with jQuery.
Excelent article
Very simple way of explaining, its awesome. Thanks Akash for this post.
Thanks a lot for this. Really well written. Just for fun, I added the following line just before the closing brace of the addMessages() function:
$(“#msg”).val(“”);
This clears the message input field when you send a message, so you can just start typing your next message without having to backspace.
This is just too funny…not two weeks ago was I required to build an intranet chat room for my company. We didn’t want to use anything big and bulky, so HTML seemed the logical choice. Almost idea-for-idea, I used the exact same method to put together a chat program with the ability to have operator status, kick users, send pop-ups to other users’ machines, have sounds (with [FONT=Georgia]Scott Schiller[/FONT][FONT=Georgia]'s excellent [/FONT][URL=“http://www.schillmania.com/projects/soundmanager2/”][FONT=Georgia]SoundManager2 JS library[/FONT]), and a veritable slew of commands using the standard “/<commandname>” format used in so many chat rooms today.
I must add, however, that I would tend to shy away from jQuery, as it uses the Prototype library. I have heard of many a memory leak from browsers as a result of using getElementById so repetatively. The smart way to handle things is to grab an element, then store the reference to it in a variable. Heck, use "var e = $(‘ElementId’);" if necessary if you’re using jQuery (or any Ajax library that uses Prototype for that matter), because every time document.getElementById() is called it has to look through the DOM for the element that is being looked for. If you do a little benchmarking, you can see the difference it makes. Take the following two pieces of code for example:
[FONT=Courier New][B]/* jQuery without reference */[/B][/FONT]
[FONT=Courier New][B]for (i = 0; i < 5000; i++)[/B][/FONT]
[FONT=Courier New][B] $('ElementId').innerHTML = i;[/B][/FONT]
[FONT=Courier New][B]/* jQuery with reference */[/B][/FONT]
[FONT=Courier New][B]var e = $('ElementId');[/B][/FONT]
[FONT=Courier New][B]for (i = 0; i < 5000; i++)[/B][/FONT]
[FONT=Courier New][B] e.innerHTML = i;[/B][/FONT]
Obviously the second snippet of code will run much faster. In the case of an application like the chat program above, this probably won’t make too much of a difference, but when you get into writing massive Ajax applications, speed and memory issues become a real problem.
Sorry if this sounds like such a rant. 
Mike, your post is inaccurate. JQuery does not use the Prototype library. You may be thinking of Scriptaculous, which does indeed use the Prototype library. Don’t confuse the two.
Is there an easy way to fade in each new post added?
Excellent!
We need more of this kind of article.
Please continue in this direction.
I would like to see how to implement blog, forum, visual designer form, web mail client, image gallery and so on using javascript library.
Also would be interesting to see different implementations of the same application by most popular javascript libraries. And comparing those implementations would be also very useful.
Thank you very much for your very valuable writing.
Your chat is great right up to the end, however the use of setTimeout() isn’t great. In this case, it might have been better to use setInterval(), so as to avoid recursing too deeply.
Hey Joel,
Why don’t you try .fadeIn(milliseconds)
That should do it 
Cheers,
–
Trefex
Thankyou to everyone for the feedback, it is greatly appreciated.
Mike - I am not aware that jQuery is based on Prototype, although it does share some basic characteristics, you are probably thinking of Scriptaculous as Sparky suggests. However, your comment about references to DOM elements for performance is valid, and would probably make a difference on slower machines in this chat application.
Joel - you could add a CSS attribute to each message of hidden visibility, then fade it in immediately after it is inserted into the page as Trefex suggests.
Vladmir - some applications probably shouldn’t be written entirely with a JavaScript library. The issue of state becomes a problem - how do you deal with different types of changes in a page? Beyond a point such applications become highly complex and do not justify the time taken to entirely AJAX enable them. I could probably demonstrate a blog, however it would be a full blown application and beyond the scope of a short SitePoint article.
Chris - thanks for the suggestion, I’ll keep it in mind for my future development. I’m not much of a JavaScript developer myself, and a similar AJAX chat example I saw a few years ago used setTimeout() so it was all I knew how to use at the time.
Show demos…
I’m happy that someone has posted a tutorial on using jQuery with PHP/MySQL as there isn’t that many tutorials out there on this subject.
Could we have a tutorial on X-browser auto-complete with jQuery with PHP/MySQL as a compliment to this tutorial?
demo’s please?
Lovely article, It has jump started my jquery education. Thanks
Picture in your mind if you will, a scene in ‘The Matrix’ where Neo has ‘Kung Fu’ downloaded into his brain.
In my best Keanu Reeves voice:
I know Ajax.
Thank you.
Hey, where i have to put that damn $time??
If I use $time = time(); it obviously don’t get any message.
Hi there,
I have a part of an InfoWindowHtml in Google Maps like this:
/*+g.prmPolygons[k][3]+*/ editInfoWindowHtml4:'</textarea></div><table style="margin-top:20px"><tbody><tr><td class="navLeft"><span class="lk"></span><a id="polyDelete" style="cursor: pointer;" href="javascript:void(0)">Borrar </a> <span class="lk"></span><a id="polyEdit" style="cursor: pointer;" href="javascript:void(0)"> Editar</a></td><td class="navRight"><button id="cancelPoly">Cancelar</button></td><td class="navRight"><button id="okPoly">OK</button></td></tr></tbody></table></div><div class="msstyle" style="display:none; position: absolute; left: 0px; top: 0px;"/></div></div>'
with an OK button, the click function of the OK button is:
// ok button
$("#okPoly").click(function() {
var newPolygon = me.recreatePolygon(currentPolygon,g.lineColor,g.lineWeight,g.lineOpacity,g.currentcolor,g.fillOpacity,k);
map.addOverlay(newPolygon);
g.prmPolygons[k][1] = newPolygon;
//racj 270608
$.post(“twbscripts/action.php”, {titlePoly: $(“#titlePoly”).val(), namePoly: $(“#namePoly”).val(), action:“postdata”});
//racj 270608
g.prmPolygons[k][2] = $(“#titlePoly”).val();
g.prmPolygons[k][3] = $(“#descPoly”).val();
g.prmPolygons[k][4] = g.currentcolor;
g.prmPolygons[k][8] = $(“#namePoly”).val();
g.prmPolygons[k][9] = $(“#atrb1Poly”).val();
map.closeInfoWindow();
$('#colorPickerDiv').css("display", "none");
});
My question is how can I submit the values of the form elements to MySQL table as I defined in the action.php file?
Can I do that by using this OK button?
Thank you, I will appreciate any help.
This is really amazing, and really what I was looking for. keep it up dude…
Just want to know why is that Jquery function encrypted?
thanks
Very well explained article!
Your approach to explaining the concepts and way of posing questions a reader would have at that point are spot-on (IMHO)! I don’t usually take the time to comment on stuff I come across on the net but you are deserve my gratitude sir. I truly await whatever you post next! Many thanks.