In user interfaces, it’s sometimes the case, that you need to have dropdowns with content dynamically loaded from a database, and sure you can query the database and place the content in the HTML-source as regular markup, but you can also write a few lines of jQuery powered javascript, and provide the data from an ajax-source.
Here’s how to do it.
First make the drop-down and as the single option make a “loading” message - just to let the user know something is happening.
In this mordern web 2.0 age, javascript includes are used more and more - and in some cases solutions often depend on included content from 3rd parties. While it is nice these 3rd parties may provide us with data (such as the latest tweets from twitter), it would be quite nice, if issues on their server didn’t break the fancy page we’re building.
So the question is this: If you build a page and include javascript from foreign scripts, will error messages on their part break your site?
Like tables, jQuery also allows you to play around with all other tags. In a recent project, we wanted to change a fixed set of labels/texts into icons instead. For this challenge jQuery was used to build the new image tag, and for good measure, here is a small example of how you can build an image tag - including alt-text and click-event.
The basic code for building and inserting an image into the DOM looks like this:
I’ve been playing with jQuery the recent weeks, and while it is reasonable simple to get started with and the jQuery documentation is pretty good, I thought I’d share a few snippets of jquery examples/code, which showcases a few simple practical uses for jquery.
First up - tables and jquery.
With jQuery you can add content to a HTML table. Here are to simple examples on how to add content into a table.
Quite awhile ago I posted a little piece of javascript, which could be used to a (very) simple webpage slide show. Someone requested a version a little more advanced for use in a kiosk mode, and sure why not - updating the script with the option to set different times on the webpages displayed was a minor change, and it’s been done now.
If you’d like an updated version of a basic webpage slideshow with an option to specify the time each page is displayed, go ahead get it from the lab.