JQuery Dialog Box Follow-up

Some have requested more details for the post I wrote earlier this year: Creating a Popup – like Message on ILLiad Webpages using JQuery

Where did I put the dialog box script?

I added the main script code to the file containing  <#STATUS> . In our case, I only added this to the include_header file.

What code did you use?

I needed to add code to two places. In the file containing the <#STATUS> line, I added the following surrounding by the <script> tags.
$( "#dialog" ).dialog({
modal: true,
title: "Status",
buttons: {
"OK": function() {
$( this ).dialog( "close" );
}}
});

For each web status key of interest in the customization manager, I added id=”dialog” to an opening div tag, wrote the message I wanted to display, and added a closing div tag.

Has this helped?

Absolutely! We get way less questions from staff, students, and faculty.

Advertisements

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.