Creating a Popup – like Message on ILLiad Webpages using JQuery

The default ILLiad webpages tend to leave users questioning whether their renewal request went through or their request was cancelled… or you get the idea. The small status alert under the institution’s name, just wasn’t noticeable enough.

Default status alert is located on the main pages just below the header.

Submitting, renewing, and cancelling requests takes you from the detailed item / request screen to the main entry page and the status of your request is located at the top of this screen.

Then along came ILLiad 8.5 and the ability to clone requests.  We decided to leave the cloning functionality available to users and see what happened. Well, some students tried to renew their items and upon failing to notice the renewal request was successful submitted a “Clone” request in addition to their renewal. Some of our requests are automated using IDS Logic and we failed to catch some of these duplicate requests until the student came to pick up the item.

We still have valid reasons for keeping the cloning feature available, so I took a cue from Logan Rath at SUNY Brockport, and used jQuery to create a pop-up like alert message for some of the status lines (Thanks Logan for the awesome idea!).

Here’s what happens when someone clicks “Cancel Request”

Described in text

The background is greyed out and a message appears that displays the status. When you click ok, the message goes away and the page’s original color returns.

Super awesome! Plus, it’s not really a pop-up, so it works great on mobile devices.

The jQuery code itself was wicked easy and there are plenty of examples online if you search jQuery and dialog (It’s called a dialog box). The trick for ILLiad was to add a div with an id field to the status line within ILLiad’s Customization Manager (Web Interface -> Status Lines). That way only some of the status lines behave like this and the others continue to appear like they always have.

Advertisements

One thought on “Creating a Popup – like Message on ILLiad Webpages using JQuery

  1. Pingback: JQuery Dialog Box Follow-up | Library Webb Solutions

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s