SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 36
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    Finland
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Notice: This is a discussion thread for comments about the SitePoint article, Easy Ajax with jQuery.
    __________

    Excelent article

  2. #2
    sparkybarkalot
    SitePoint Community Guest
    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.

  3. #3
    SitePoint Member MikeFoss18's Avatar
    Join Date
    Sep 2003
    Location
    Milford
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 Scott Schiller's excellent SoundManager2 JS library), 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:

    Code:
    /* jQuery without reference */
    for (i = 0; i < 5000; i++)
      $('ElementId').innerHTML = i;
     
    /* jQuery with reference */
    var e = $('ElementId');
    for (i = 0; i < 5000; i++)
      e.innerHTML = i;
    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. ;-)
    Last edited by MikeFoss18; May 10, 2007 at 06:31. Reason: Formatting

  4. #4
    Sparkybarkalot
    SitePoint Community Guest
    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.

  5. #5
    Joel Steidl
    SitePoint Community Guest
    Is there an easy way to fade in each new post added?

  6. #6
    Vladimir
    SitePoint Community Guest
    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.

  7. #7
    Chris
    SitePoint Community Guest
    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.

  8. #8
    Trefex
    SitePoint Community Guest
    Hey Joel,

    Why don't you try .fadeIn(milliseconds)
    That should do it :)

    Cheers,

    --
    Trefex

  9. #9
    SitePoint Zealot
    Join Date
    Jan 2007
    Location
    Australia
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    ROy
    SitePoint Community Guest
    Show demos.......

  11. #11
    SitePoint Guru worchyld's Avatar
    Join Date
    Jul 2003
    Location
    Newcastle upon Tyne
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  12. #12
    bhaarat
    SitePoint Community Guest
    demo's please?

  13. #13
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lovely article, It has jump started my jquery education. Thanks
    Check out our website . Bincom: Nigerian Web Development.
    Also check us for Joomla Nigeria
    Naijaplus
    is a Portal showing everything positively Nigeria

  14. #14
    SitePoint Member
    Join Date
    Jun 2007
    Location
    London
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @SimianE ... LOL
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  16. #16
    Un chien andalou
    SitePoint Community Guest
    Hey, where i have to put that damn $time??
    If I use $time = time(); it obviously don't get any message.

  17. #17
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>&nbsp;&nbsp;<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.

  18. #18
    Smart programmer silver trophy M.Zeb Khan's Avatar
    Join Date
    Jan 2004
    Location
    Luton, Beds
    Posts
    1,791
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  19. #19
    thomas
    SitePoint Community Guest
    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.

  20. #20
    zain
    SitePoint Community Guest
    thats very good..
    what i needed is on 14st page,
    but i am facing a problem and that is when i simply load HTML file into a div. so only the content of that file is loaded but not HTML.
    can you help me solving this problem.


    $("#HTMLContent").load("test.htm");

    i only wrote this line on document ready function.

  21. #21
    bobo
    SitePoint Community Guest
    hi,
    this howto is great! thanks
    but do you have any idea to get all attribute from an XML like this :
    <root>
    <elem value="1">text1<elem>
    <elem value="2">text2<elem>
    </root>

  22. #22
    bobo
    SitePoint Community Guest
    ooops sorry this is the right xml :
    <root>
    <elem value="1">text1</elem>
    <elem value="2">text2</elem>
    </root>

  23. #23
    shawphy@gmail.com
    SitePoint Community Guest
    Hello,I have a question:
    Why the backend responses the 'echo "\t<time>".time()."</time>\n";',
    and the frontend ignore it?
    Why does the frontend not update the timeStamp or the backend not response <time/> tag?

  24. #24
    Pete
    SitePoint Community Guest
    I wasn't able to get this to work without setting the type argument of post to xml and setting the content type returned from the server to text/xml.

  25. #25
    Outsource Web Design featuredhost's Avatar
    Join Date
    Nov 2002
    Location
    India
    Posts
    477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi
    is there any server requirements for this to run ?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •