This targets elements based on the content rather than on the just markup. Since many vendors do not strategically use classes and ids in their markup or use them incorrectly , being able to target the content is sometimes the only way to grab the content you want. Here is some simplified markup of the items table:. There is no difference in the markup here between a periodical and a monograph in the open stacks. The only difference is the location label.
So I can change the label text of just the first holding record with the following jQuery code, using the. Since the only differentiation on the web page between journals and other item types was the format label printed by the OPAC, it would have been much more difficult to write such a script without the contains: selector.
We can use jQuery to rewrite the text of those messages to make them more useful. The first place I used jQuery to change error and status messages was in Illiad, our Interlibrary loan software. When a user successfully placed a request, they would get a status message like this:.
Our Interlibrary Loan specialist came to me asking whether we could do something, because she was getting dozens of phone calls a day asking that very question, almost all from users who had just placed requests. Since the status messages all had the same class,. But I needed to use jQuery to evaluate and change the content.
I swapped out the unhelpful text for a friendlier, more useful sentence. Here is the code I used for Illiad:. Changing out text is simple enough, but some error messages require more. But while following up with a user one day, I stumbled across the following screen:. The language of this error message is not useful, and neither is the menacing red, bold typeface. So I wrote a script to fix it.
Rather than simply changing out text, I needed to add some elements to the DOM to better allow patrons to access immediate help through phone, email, or chat.
Say I have the following list, and I want to move the first list element to the end of the list:.
Go ahead and use the jQuerify bookmarklet to load jQuery on this page, and then paste the code above into your Developer Tools. What did you notice in the list above? I now have an HTML list that looks like this:. Being able to add, remove, and change the order of elements is the cornerstone of modifying vendor tools. Sometimes I need to do more than just change how something looks.
Since many vendor tools rely on user interactions, I often want to change the functionality of a system or add additional content based on user input. I want to hide the other results, so that our users will try the first result to see the full text of an article.
But just in case something happens with that first link, like the database being down or the metadata that is passed to the database to identify the appropriate article being incorrect, I want the user to have the option to see the other sources. And so I hide them in an accordion, with a simply worded link that lets users view them when they need to.
The user only needs to click on the link to show the results, and the additional results become visible. When the page loads, I want the list to be hidden, and when a user clicks the text in the div with the id of toggle , I want to show the list and change the text and functionality of the div. The best solution here is to use a conditional statement.
We could do that with the following conditional statement:. The final code for this is below.
Use your jQuerify bookmarklet to load jQuery on the page, and then paste the code below into your Developer Tools:. One other interaction I have built in to the link resolver is a contextual help slideout that appears only if it seems like several of the links in the results are broken.
Since our links open in a new tab or window, the user can come back to the link resolver page and click a different resource. CORS for example is explained in terms of what it is for and then for detail you are expected to consult the web. Where jQuery is used to work with the technology, for example Ajax then there just isn't enough depth.
The final chapter moves on to using PhoneGap. This really is out of place because PhoneGap is more or less an alternative to jQuery Mobile. While you can use jQuery with PhoneGap none of the examples in the book appear to even attempt to.
What little of jQuery this pocket book covers is done reasonably well, but most of the book is on other topics and as a result jQuery has depths that this book just does not even begin to explore. In particular it fails to explain jQuery's Ajax features and it really doesn't go into many of the more interesting ways jQuery lets you process the DOM. If you are hoping that a quick look at this book will bring you up-to-speed on how jQuery is used in web pages.