jquery javascript error using $(...) selector

Question

Hi,

I'm migrating some old code to jquery:

 xmlHttp.onreadystatechange = function() {
  if (xmlHttp.readyState == 4) {
   $("#" + ajaxArea).html (xmlHttp.responseText);

   $("#" + ajaxArea).attr('title', 'Login');
   $("#" + ajaxArea).dialog({
    height : 140,
    modal : true
   });
  }
 };

where ajaxArea is the ID of a DIV in the HTML.

The dialog bit is basically adapted from the jQuery example here: http://jqueryui.com/demos/dialog/#modal

All of it works fine up until the last line. Firefox throws an error that simply says "$(" for that line. Anyone know what might be causing this?

Answer 1

The jQuery UI code is separate from "core" jQuery. You can import both into your application from Google's servers:

• jQuery: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
• UI (all): http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js
• UI CSS: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css

You can alternatively build your own custom jQuery UI package, which will be smaller (but not hosted at Google). That's done at the jQuery UI site itself: http://jqueryui.com/download

As a style note, it's good to get in the habit of using jQuery's "chaining" style:

$("#" + ajaxArea).html (xmlHttp.responseText)
  .attr('title', 'Login')
  .dialog({
    height : 140,
    modal : true
  });

It saves some work, esp. when the selector is complicated.