Archive for the 'jQuery' Category

19th Aug 2009

Learning JQuery 1.3 Book

I have spent quite few trips to the book store scouring the shelves for a book on JQuery (yes I know I could order one online, but for me part of the whole experience is picking the book up and leafing through it). As it turns out, the other day I was contacted about reviewing one. At this point, I have only had time to look through it briefly, but from what I can see there is some good stuff in this one.

The title of the book is Learning JQuery 1.3 and here are some of the things that impressed me so far. Firstly, the Forward of the book is written by John Resig the Creator of jQuery and he gives very high praise to the authors. Secondly it includes sections on creating such things as an image carousel and a headline rotator, so we are not talking about a book on just the mechanics of JQuery, you actually get to see practical applications of JQuery.

You can find a sample chapter of the book here and more details on the publisher’s site here.

I have placed links to this book on the Development Resources and Book Recommendations as well.

Posted by Posted by Jeremy Wischusen under Filed under General, jQuery Comments No Comments »

24th May 2008

Using JavaScript Regular Expressions for Ajax Navigation

When I originally designed my site, I decided that I would make the navigation systems Ajax (partially because I wanted to expand my skills, partially to decrease load times, and partially because I thought I was being clever). So I got the basic nav systems working and I was all happy with myself right up until the first time I tried to provide direct link to one of my samples. As usual, I am not as clever as I first thought.

A direct link to the samples (or any other page for that matter) would load the page outside of the context of the nav system and site layout, which defeated the point of the nav systems and looked like crap (not that it is visually stunning within context, but even more so than normal).

I decided this was no good and started formulating ideas of how I could make particular locations within my site directly accessible without having to scrap my existing navigation system.

Upon reflection realized that one of the things jQuery makes pretty easy is triggering events on objects, such as clicks. So if I could identify the main and sub section I want to go to, I could trigger the click events for the appropriate links and end up where I wanted to be.

Now I just need to figure out how to pass that information. Fortunately, the other day there was a discussion on Flashkit about a URL system called SWFAddress. Basically, this system uses the named anchor system with the # sign so that you can change the last part of the URl string with out the browser actually taking you to another location. This leaves you with a parseable URL.

So now I had a way to get to my desired location (trigger click event), and a method of passing the data (the # url trick) I needed to be able to distinguish which path of the url referred to the main section and which referred to the sub. I decided to go with the following syntax:

http://www.visualflowdesigns.com/#main:main_page.html#sub:sub_page.html

All that was left is to parse the URL and trigger the click events for the links:

Main Section:

var mainSection = window.location.href.match(/#main:\w+\.html?/)
if(mainSection){
//perform string replacements to convert the id to jQuery syntax and to escape special jQuery caharcters
var goto = mainSection.toString().replace(/main:/,'').replace(/\./,'\\.');
$(goto).click()
}

Sub Section:

var sample = window.location.href.match(/#sub:\w+\.html?/)
if(sample){
//perform string replacements to convert the id to jQuery syntax and to escape special jQuery characters
var goto = sample.toString().replace(/sub:/,'').replace(/\./,'\\.');
$(goto).click()
}

The nice part about this is that since I am triggering the click events, my menus update themselves just as if the user had clicked on them.

The current system solves my immediate problem of not being able to provide direct links to my samples, but even as I wrote this I noticed that I am locking myself into HTML pages with my regular expression. However, now that I have the basic system working, I can play with and tweak it as needed.

As always Ideas and comments welcome.

Posted by Posted by Jeremy Wischusen under Filed under DHTML, jQuery Comments No Comments »

13th May 2008

Retaining a Dom Object Across Ajax Calls (In Order No Less)

I have been working on a project that displays a list of items that a user can take one of several actions on. Taking an action would change the display state and give the user a message that their action had been successfully completed, or that something went wrong. The user could then close the item and in doing so, update the list of items via an Ajax call.

This worked well enough, however, one of the project managers decided that they did not like the fact that the user had to take an action to update the list by closing one of the items they had acted upon, nor the fact that if they took actions on multiple items, they would have multiple feedback message displayed until they closed one of them triggering the update. So I ended up with the following requests:

  • Taking an action on another item in the list should close any other items that have previously had an action take on it.
  • If the user has less than 10 items in their cue, perform an Ajax call to see if they have any new items that have arrived each time they take an action.
  • The last message they received for the last item they took action on should remain across the Ajax calls.
  • If the item they took action on was in the middle of the list, then it should be in the same spot in the new list.

Now the response I was getting from the Ajax call was being sent into the div that contained the list of items. In other words, the entire list was being replaced. So now I had to figure out how to determine the last item an action was taken on, save it and insert it back into the same location in a new list of items that was replacing the old list.

jQuery to the rescue.

In order to display on the last item an action was taken on, I used a two step process. I used a class to identify items that had actions taken on them called actionTaken. So when an action is taken on an item, I remove all elements with that class and then assign that class to the item the action was just taken on. Since I hide all of the items before assigning the class to the last item I took action on, it essentially hides all of them except for the one I just took action on. This basically looks like:

$('.actionTaken').remove()
$('#listItem'+id).addClass('actionTaken'); .

Id in this case is a unique identifier generated in PHP and assigned to the div. So that takes care of only showing the last item a user took action on. This also works in the first case where there is no previous item since the call to remove simply does not find any element and does nothing.

Now I need to figure out how to keep that last item across Ajax calls. Since I now knew that only the last item they had taken action on would be displayed, and that item would have a particular class assigned to it, I could not retrieve that DOM node as follows:

var lastItem = $('.actionTaken').parent().html();

Next I need to determine where this item is located in the list. I do this by retrieving the ID of the item that follows the item of interest in the list.

var insertBefore = $('.actionTaken').parents('tr').next().attr('id');

Now that I have the last item and I know the item that follows it, I take the data I got back from the Ajax call and add it to the DOM.

$('#itemListDiv').html(str);

Finding the item that follows the items we are trying to retain works in most cases except one: if the item in question happens to have been at the end of the list. So I needed to determine if we had found an item following the item being retained. If we did, I insert it back into the DOM structure at the appropriate location (before the item it appeared before in the previous list), otherwise, I just throw it back onto the end of the list.

if (insertBefore ){
$('#itemTable #' +insertBefore ).before('<tr><td>' +lastItem + '</td></tr>');
}else{
$('#itemTable').append('<tr><td>' +lastItem + '</td></tr>');
}
}

There is more code to this system, but as far as the problems I initially outlined, that’s the relevant code. I now had a system that would only display the last item the user took action on and that item would be retained across Ajax callas and appear in the list at the same location.

Posted by Posted by Jeremy Wischusen under Filed under CSS, DHTML, jQuery Comments No Comments »