JQuery: Do Something!

I’m dabbling in jQuery for a simple interface: “Pick a company.” My latest app interface does exactly that; the user can pick from a list of publicly filed companies. Eventually we’ll get to the XBRL!

To pick a company… the user types in a search box. I used dev bridge’s AJAX Auto-Complete to make this search a nice experience.

What’s AJAX? Asynchronous Javascript and XML.

What does that mean?

  • AJAX:
    • “Javascript”, I do it in Javascript/jQuery. jQuery is an extension of Javascript which can run this AJAX. I’m sure AJAX can be done in other ways/ with other languages. I use it on the client side (i.e. My jQuery makes your client browser send a request back to my website for more information), after the page is loaded, so the user has something to work with while the request is pending. In this case, the client browser sends my website what the user has typed, and my website returns a list of companies which match that text.
  • AJAX:
    • “Asynchronous”, the function  doesn’t require the page to reload in the sense of a new HTTP Request to the server. The HTTP Request is “silent”. Once the request successfully returns results, those are given to a dev bridge function (often called a callback function (?) ), to do something those results. In this case, the dev bridge function will create some HTML that looks like an autocomplete list, right near the search box.
  • AJAX:
    • “XML”, the results can come in XML. But dev bridge requires JSON; so the list of companies must come in JSON form. My website (which returns the list of companies), is written in Python; creating JSON with Python is easy. dev bridge wants JSON representing a dictionary. Dictionaries look the same in both Python and JSON: {key1:value1, key2, value2}, etc. The second key in this dictionary (keky2) must be ‘suggestions’, and its value (value2) must be a list. Lists look the same in both Python and JSON: [element1, element2, element3]. In on example, if the user typed ‘Go’, the list might contain [‘Google’, ‘Real Goods Solar’, ‘Zygo Corp’]. Note; the search string can appear anywhere in the company’s name, case-insensitive.

Check out the results here. 

Right now it only has a dummy list of some tech companies (not all SEC-filed companies), so your search string must exist in: Google, Samsung, Apple, IBM, Microsoft.

Read on to learn about the “bug” I introduced;

  • If you played with the demo, you noticed that clicking on a result will put that result in the list of selected companies.
    • dev bridge allows you to specify what should happen when the user clicks a result. I created a function called selectCompany and I pass this function to dev bridge. (In Javascript, like in Python, functions can be passed like objects. Very useful; the functions can be run on special events. I think this pattern is called a “callback” because the events “call back” to our functions.) selectCompany will dynamically create a new <li>; this <li> contains the name of a company, preceded by an “X” closer;
      • ‘<li><a href=”#” >X</a>’ + companyName+ ‘</li>’).
  • In the list of selected companies (blue squares), clicking the “X” allows the user to remove a company from the list
    • jQuery allows you select an element; in this case the “X” closersare actually anchor elements , aka hyperlinks;
      • <a href=”#”>X</a>.
    • Select these elements using plain old CSS selector syntax;
      • $(“a”)
    • After selecting the elements, jQuery allows you specify what happens to this element, on some event. In this case, on the click event, I want to remove the element. Yet again, with the callback pattern, it’s as easy as passing a function into the click() method of the <a> element;
      •  $(“a”).click(function (event)…
    • The function I pass will handle the click event. I think it’s called an event handler.
  • Here’s where I had trouble; at first I was adding this $(“a”).click event to the <a>’s just when the HTML DOM was ready, but before the user could actually do anything. It is common practice to put the jQuery code in this place, $(document).ready(). At this point, $(document).ready(), there are No Companies Selected. I was confused when I clicked the “X” closer, and nothing happened. Why wasn’t my ($”a”).click working?
    • I searched stackOverflow; I didn’t find the right question, but I found a nice suggestion:  “…was the <a> inserted into the DOM dynamically?” Of course! That’s exactly my problem! I add a click event to ($”a”) when the page has just loaded… but there are no <a> in the document at this point! The <a>’s exist only after the user has searched for a company and clicked one of them; this is when my selectCompany function adds a <li> which contains the <a> wrapping the X closer.
    • At this point I moved my $(“a”).click  method out of the $(document).ready() — because that is too soon to attach this event — and into the selectCompany method — after the point where the <a> is added — because once the <a> exists, I can attach an event handler to it!

Lesson learned: Event handlers are attached to a elements in the DOM at the time the event is referenced. If the element’s not there yet, no handler is attached.

In other words; can’t attach event handlers to something until it exists!

Advertisements

4 thoughts on “JQuery: Do Something!

  1. redpeas says:

    jQuery FAQ explains the same, right here: http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F

    Moreover, they give some nice recommendations. Namely, they recommend using Event Delegation; if a container exists since the page’s inception, then it can handle the events. However, the events will still have a target, and that target can be evaluated. I’ll learn more and try to implement these recommendations from Markit on Demand:
    http://formation.markitondemand.com/jquery-best-practices-on.html

  2. Hi Nathe. I have worked with — pretty much — every javascript framework out there, but jQuery really got me. It’s amazing what you can do easily with jQuery (and jQuery UI). And, indeed, event handling can be very tricky — also, you must pay attention to event propagation, where is the most problems I have faced in dealing with user interaction. If you try jQuery with HTML5, you will see how powerful tools you can build for XBRL experience.

    Eduardo.

  3. redpeas says:

    Eduardo, you’re right! I find jQuery especially easy-to-use. And event propagation is the trickiest challenge for me, so far! The next great challenge is the syntax for “Object-oriented” approaches to good/robust/well-written code. You can check out my progress at the website here: http://slide.nxsxbrl.appspot.com/

    Maybe we should collaborate on something!

    Have a great day,

  4. Interesting, Nathe! In fact, I’m working on a lot of stuff for XBRL usability, but since most of it is related to academic research, I can’t publish right now, but as soon as I publish, we can talk about it more technically.

    Regards.

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

%d bloggers like this: