Weblog, Tagebuch, wahllose Sammlung von Notizen.

AJAX Commenting

I’m testing some eye-candy on the comments page of this site these days. Using AJAX, based on Prototype.

Update: This is how it works, but remember it’s a hack, not a solution…

60 Kommentare

  1. Nico sagt:

    Scheint zu klappen, sieht auch nett aus.

  2. nicolas sagt:

    ja, es klappt – hat aber noch einen kleinen fehler, so wie ich das sehe. wenn ein neuer kommentar hinzugefügt wird, steht links vom kommentar eine “1″, unabhängig davon welcher beitrag es ist. war jedenfalls bei meinem vorherigen kommentar der fall.
    erst beim reload wird die zahl aktualisiert.

  3. des das dem das sagt:

    ajax commenting?

  4. kusaeni sagt:

    yes I love this fuction , can you tell me , how to get it work in my theme?

    thanks

  5. Nico sagt:

    Drop these files into your theme directory.

    ajax_comments.php handles the AJAX requests and acts just like wp-comments-post.php from WordPress.

    ajax_comments.js is the JavaScript part that sends AJAX requests and updates the page. You have to adjust this file to match your style ids! And the comments *ol* tag must be present for this to work, even if it’s empty..

    Then, you have to drop some Scripts from script.aculo.us in the “scripts” directory (see the header of this page) and add them to the page header. And last, but not least, add this to the *form* tag of you style’s comments.php:

    onsubmit="new Ajax.Updater({success:'commentlist'}, '/wp-content/themes/mytheme/ajax_comments.php', {asynchronous:true, evalScripts:true, insertion:Insertion.Bottom, onComplete:function(request){complete(request)}, onFailure:function(request){failure(request)}, onLoading:function(request){loading()}, parameters:Form.serialize(this)}); return false;"

    This is not very clean and nice, I know, and this was never meant for distribution, at least for this version. Maybe I’ll clean it up some day and write a better guide…

  6. Bergie sagt:

    Lets see if this works.

    We’re using AJAX quite heavily in http://www.openpsa.org

  7. Bergie sagt:

    Cool effects here!

  8. kusaeni sagt:

    yes , thanks you for the hack but I still can not implemeted it into my themes, I dont know why , but I have stupid question : are prototype need ruby hosting support?

  9. Nico sagt:

    Bergie: The effects are from script.aculo.us, a very nice JavaScript library (together with the great Prototype framework)…

    I don’t know if this works with all browsers, it does work with JavaScript disabled, but it does not work with Opera 7.xx e.g. It’s as broken as the Ruby on Rails based Typo weblog engine…

  10. Nico sagt:

    kusaeni: No, Prototype and script.aculo.us are JavaScript libraries that run on the client’s browser, so no need for Ruby support on the hosting site. You just need to copy the two js files into the scripts/ folder (you can copy (not hotlink!) them from my site for example).

  11. kusaeni sagt:

    thanks Nico , was follow your instructions , but still have problems.

    After type a comment text , the page is loading so far , and the comments is not appear in comment list . But when I reloaded the page , comments is appear , normaly .

    How I can solving this troble?

    thanks , and sorry for my english .
    I am Indonesian.

  12. kusaeni sagt:

    oK , may I know your comments .php files?

  13. Azad sagt:

    Nice job Nico. You could write a WP plugin and distribute it. It would be very popular!

  14. Nico sagt:

    I guess packaging it as a WP plugin would not work well, because it would depend on specific class names, list id’s (for the comment list) and e.g. the fact, that the empty comment list has to be present even if there is no comment yet.

    Inevitably the plugin would break on several themes…

  15. ensellitis sagt:

    Ok, I have a small problem. I got it pretty much working, except when you post a comment, nothing happens until you refresh the page, then it is there… Any ideas?

  16. ensellitis sagt:

    Sorry for spamming, but wanted to let you know that I got it working, thanks for the great scripts!

  17. Nico sagt:

    HTML-Test:

    strong, em, link.

  18. Wicked sagt:

    Testing Ajax comments. Cool stuff

  19. Kapeka sagt:

    Hm, mal schauen. Ajax faszniert mich schon seit einiger Zeit.

  20. Nico sagt:

    I disabled AJAX Commenting again. No need to post test comments anymore ;-)

  21. Test sagt:

    wow its cool

  22. Paul sagt:

    yeah, it hangs

  23. Nico sagt:

    Seems to work

  24. Paul sagt:

    i figured it out. I was so stupid. bet all of you are having the same problem.
    make sure to change:
    ‘/wp-content/themes/mytheme/ajax_comments.php’, {asynchronous:true,

  25. Paul sagt:

    Nico, not on your server. Ours! It posts but you need to refresh.

  26. Pingback: Squible » Ajax Comments — How I did It

  27. Sean sagt:

    Very Cool. I am going to try this out. : )

  28. Weiran sagt:

    Sorry, I have to try this out!

  29. Arno sagt:

    Got to try it myself :)

  30. Kyle sagt:

    I guess I gotta get on the AJAX bandwagon

  31. Denis sagt:

    Nice commenting buddy !

  32. 天佑 sagt:

    中文測試

  33. 中文名字 sagt:

    中文留言

  34. The characters look good to me.

  35. CarlosCrc sagt:

    Nice, i will try it.

  36. CarlosCrc sagt:

    Wasssaaapp!!!

  37. otama sagt:

    This is great :D

  38. tinyau sagt:

    Why the chinese characters in this blog no need to refresh in order to prevent to display rubbish characters?

    This problem is related to MySQL version? Collation of database or tables?

    The following wordings are Chinese characters.

    中文留言測試

  39. geogf sagt:

    kick ass !!

  40. chsis sagt:

    ajax commenting?
    中文如何?

  41. br0k3n_d4y sagt:

    well, good works

  42. Pingback: 窝子网志|WozLog » 站点改进:加强评论功能 改善参与体验

  43. rayz sagt:

    Giving the Ajax commenting system a whirllllllll

  44. Geremy F sagt:

    I can’t wait to use Ajax commenting for my next redesign

  45. Test sagt:

    test

  46. sdfsd sagt:

    sdfjdfhgjkd

  47. hot sagt:

    oh, this is how it works

  48. Jazzman sagt:

    Is the Ajax commenting still working?

  49. PAStheLoD sagt:

    testing, testing .. 1 .. 2 .. testing ;]

  50. test sagt:

    what if ..

  51. test sagt:

    what if ..
    what if ..
    2

  52. test sagt:

    test me pls

  53. Marcus sagt:

    Großartige Seite… sehr informativ und lesenswert :)

  54. Thorsten sagt:

    Wirklich coole Idee!

  55. Thorsten sagt:

    Mmmh… sor richtig kommt das alles hier aber nicht mit der Kommentarzählung klar, oder?

  56. test sagt:

    testr