Sometimes we need to create HTML from JS. There are multiple ways to do this, from using innerHTML to creating element by element appending child to parents, setting attributes, etc. And there are as many different opinions about what is the right way to do it.

Meanwhile, once thing I missed from jQuery, not available on Mootools, was the ability to do something like this:

In Mootools, the equivalent should be:

But that does not work.

On the Mootools mailing list, someone was asking about how to implement this and we just found a different approach, which instead of using the Element class, extends the String class like this:

Now you can do this:

To try it, paste this snippet on Firebug’s console:

Nice, uh? Of course, the HTML can be as complex as you need and where do you get the content of the string is up to you :)

It was one of the best features of Google Reader and Google GMail: the keyboard shortcuts, specially the ones to navigate through messages or posts (n = next, p = previous).

I decided it was time to implement it on spaniards.es, so here is the code I used. So far it only navigates through comments back and forth on the same page (does not go to next page or so). I am planning to add other shortcuts soon.

As you can see, it is important to leave the input and textarea fields alone, so the keyboard shortcuts don’t interfere with the user typing some text. With a little bit of CSS the selected comment can be displayed with a different border color or background. And that’s it!

Check an example topic at www.spaniards.es

In Ajax comments in Drupal 5: How I made it parts I and II we saw the code needed on the back-end. Now, let’s see what goes on the client side: the Javascript.

Submitting the comment with an ajax request

Basically, to add a comment we need the node id (nid) and the comment text. The code in the back-end will handle the user info and permissions. The first thing we do is find the comment form and the submit button. Then we hook the click event on the submit button.

When the user clicks the submit button, we get the node id (we could have done on domready) and the comment text. If the comment is empty, we don’t do anything, so the comment will be submitted the standard way and Drupal will fail the comment form validation.

Since we don’t want to get back just the comment added but all the new comments added by any user on this node, we want to pass the last comment id on screen.

Due to my limited knowledge of jQuery at the time, I used the load function for the ajax request. The problem with this function is that, from what I know, it only works on elements already included in the DOM. So before the request, I had to create a container for the new comments. The point of insertion will differ if the page already has comments or not:

Finally, the load request:

If the request failed, the container was removed. If the request succeeded, the new comments were added to the page:

And that was it! Ajax comments in Drupal working like a charm.

Adding/removing the “new” indicator

Now that I had my Ajax comments working I wanted them to look better. For example, I wanted the new added comments to have the “new” indicator, while at the same time I wanted to remove the indicator from the comments already on the screen. On ajax_insert_comment:

And many other tweaks like that.

The code

Here is the whole code for ajax comment submission I currently use:

As you can see, when I wrote this code back in July, I have just started using jQuery and I didn’t know much about event handling. So I used the old return true/false to stop the submit event if needed. Also, now that I see the code again I can think on better ways to do parts of it. Well, that’s a good sign: it means I’m getting better :)

Series:
Ajax comments in Drupal 5: How I made it – Part I
Ajax comments in Drupal 5: How I made it – Part II
Ajax comments in Drupal 5: How I made it – Part III

See the ajax comments in action

Please, note this is a WordPress based blog. The Drupal website where I have implemented the ajax comments is www.spaniards.es

In Axaj comments in Drupal 5: How I made it – Part I I covered the most important part of the module code: saving comments to the database. Now, let’s see how to display them properly.

Rendering the new comment

Comments usually have more information than the user name and the comment text. In my website, for instance, comments have information like the user registered date, where he/she lives, the country flag, the comment number on the thread, etc. All this information could not be made up at the client side; the server had to send it back to the client once the comment was saved.

Also, we want to take full advantage of Drupal: we want the corresponding filters applied to the comment text to remove malicious HTML tags, convert plain URLs into HTML links, etc.

The best way to do this is to use the function theme with the parameter ‘comment_view’. The difference between theme(‘comment’,…) and theme(‘comment_view’,…) is that filters are applied only in the second case, if I am not mistaken.

As I mentioned before, we don’t want to return just the comment added by the user but any comment added by any other user since the user loaded the page. This function will return any comment on the thread with comment Id greater than the parameter $fromcid.

Besides using theme(‘comment_view’,…) it is a good idea also to invoke the link hook. This will let other modules like fasttoggle inject their very useful links in out comment.

And that is it for now. This code, together with the code on Part I will be the only PHP needed. We will see the client side Javascript code on Part III.

Series:
Ajax comments in Drupal 5: How I made it – Part I
Ajax comments in Drupal 5: How I made it – Part II
Ajax comments in Drupal 5: How I made it – Part III

See the ajax comments in action

Please, note this is a WordPress based blog. The Drupal website where I have implemented the ajax comments is www.spaniards.es

First of all, I would like to apologize for not publishing this the right way. I haven’t had time to put it all on a standalone module, which will make it easier to share the code at www.drupal.org. Feel free to grab the code and put it on a module if you wish (and let me know if you do so :)

Why Ajax comments?

Ajax comments let users to submit comments without having to reload the whole page. Reloading a page is not only slow, but its an overload for the server which has to process and send the whole page again just to add a simple comment to the DOM. So yes, Ajax comments are a big benefit, both for the user, which has to wait less, and for the server, which has to process and send less information.

Available modules

Point explained, lets see how it went. In the past I tried the Javascript Tools set of modules, which had other dependencies if I am not mistaken. And I don’t know why but it didn’t work at all for me. My comments kept reloading the whole page while sent. A couple of months ago I decided it was time to do it myself.

The plan

My original plan was simple: when the user hits the submit button, send the comment to the server, save it and add it to the DOM at the end of the comment list. This looked simple, but it had a few thing to deal with. I didn’t want to mess with Drupal’s comment module neither modify any line of Drupal’s core. So I decided to take an alternative path.

Saving a comment

Saving a comment doesn’t require much information. Since the user has to be logged in, the only information needed is basically the node Id and the comment itself. Drupal has a very nice hook_menu that allows you to create pages with a specific URL. These pages can process data, serve data or both. The only drawback, if so, was that hooks only works on modules, so I had to create my own. I decided to add it to my custom site module.

Just with those two functions we can bypass Drupal’s comment submission system and add new comments to the database. As long as we use the comment_save function, the actual process involved in saving a comment is safe (hooks get called, watchdog logging works, etc). Also, hook_menu guarantees only requests with the right access will be able to add a comment (in this case the user_access function verifies the user has “post comments” permissions granted).

Once the comment is saved, the node is marked as viewed by the user, to remove all “new” labels from the new comments added.

Finally the comment is rendered and returned to the user. But wait! What if another user has posted a comment in between? During a conversation between multiple users this will happen very often. The solution: return all comments added since the last comment visible when the user visited the thread.

We will see how to do that next.

Series:
Ajax comments in Drupal 5: How I made it – Part I
Ajax comments in Drupal 5: How I made it – Part II
Ajax comments in Drupal 5: How I made it – Part III

See the ajax comments in action

Please, note this is a WordPress based blog. The Drupal website where I have implemented the ajax comments is www.spaniards.es

Today I had an issue with an element was breaking a page layout, making the page width wider than 960px. I tried to find it with Firebug, looking at the layout properties of some divs and elements, but I couldn’t find it. I knew it had to be there, so I decided to highlight all div elements in the page with a red border. And it worked! I found it right away.

Here is the code I used to highlight the fields (I had to do it in prototype only):

Prototype JS:

jQuery:

$('div').css('border', 'solid 1px red');

Mootools:

" style="vertical-align:-20%;" class="tex" alt="('div').each(function(item){  $(item).setStyle({ border: 'solid 1px red' });});

jQuery:

$('div').css('border', 'solid 1px red');

Mootools:

" />('div').setStyle('border', 'solid 1px red');

PS: Note that by adding a 1px border to all divs in the page, the page layout will be affected and some items may display improperly. Of course, you can use other colors than red :)

Sometimes you may want to include a Javascript file on a live web page to see how things will work or to try new things. Usually you would do this by editing the source code including the new file but there is a fastest way if you have Firefox with Firebug. Just run the following code in the Javascript console:

Here I am loading the jQuery library from my own server, but I could load any Javascript from any server on the net. The best is this will work on any website, whenever you have access to the server or not. Once you have the Javascript loaded you can use it right away. For example, here on this blog I could use jQuery to check how the header will look if its height was only 100px by running the next command on the console:

Yep, it won’t look very good, right? Try it! You have to see it by yourself. Firefox is great. Firebug is awesome. And Firebug’s Javascript console is the best thing ever!
PS: In case you are wondering, the Javascript file injected will exist only on the current browser session.

I have been using jQuery and Mootools in the last few months at work, among other libraries. So far, jQuery was my favorite because it is very fast and encapsulated (it doesn’t interfere with other librearies, etc). But I love Mootools too because of its object oriented approach and beautiful things like the Class class which lets you create JS classes very easily. Every time I use jQuery I miss that from Mootools.

Well, a copuple of days ago I have discovered JS.Class which I think is the best thing I have seen so far in object oriented Javascript. It is awesome! Very well designed and documented and very well encapsulated.

JS.Class is not a library for DOM manipulation but just a framework to build object oriented code. And I love that! I think it is way better to focus on a single task, instead of trying to cover it all. This makes JS.Class a very lightweight library too :)

Copy-constructor test class in Mootools:

Copy-constructor test class in JS.Class:

As you can see, the way of creating classes is almost the same. So what makes JS.Class better than Mootools? Where, both allow inheritance and extending classes with other class-helpers, but JS.Class does this better. I’ll work on some example code to prove this :)

PS: Don’t take me wrong, I still love Mootools and I’ll still use it on web development. But I try to use JS.Class as much as possible.