- 1 YUI vs. jQuery - The big challenge!
- 2 AJAX based selecting of users
- 3 A) DOM manipulation - moving, adding and deleting HTML elements
- 4 B) Modifying the clear button
- 5 See also
YUI vs. jQuery - The big challenge!
--Tim Hunt 04:52, 21 July 2009 (UTC)
Look here for the background for this challenge...
AJAX based selecting of users
For those who don't have a current installation of the brand new Moodle 2.0 at hand here's a screenshot so you get an idea what this is all about:
While you are entering text in the search field the database is queried in real-time in the background for matching users. This is done using AJAX without any page re-loading required.
The underlying code
- This feature is provided by the use of YUI features in the file user/selector/script.js.
- It was inspired by YUI's AutoComplete control.
- It uses YUI's DataSource utility for the database connection.
Getting ready for jQuery
A) DOM manipulation - moving, adding and deleting HTML elements
For the AJAX version the search is done automatically and asynchronously (remember the "A" of "AJAX") while typing in the search field. Therefore the form should not be sent and the search button will be replaced by a simple label which will be placed to the left of the search field. This is the first task we will tackle.
The current solution
Here's the original code. We're creating a label, inserting it before the search field and then delete the search button.
// Hide the search button and replace it with a label. var searchbutton = document.getElementById(this.name + '_searchbutton'); var label = document.createElement('label'); label.htmlFor = this.name + '_searchtext'; label.appendChild(document.createTextNode(searchbutton.value)); this.searchfield.parentNode.insertBefore(label, this.searchfield); searchbutton.parentNode.removeChild(searchbutton);
The jQuery solution
jQuery on the other hand provides a whole bunch of methods for manipulating the DOM tree. So we can accomplish the same task with the following code.
Note that the order of the steps is slightly different from the above version. Here we're first moving the search button to the left of the search field and then replace it with a label.
var searchbutton = document.getElementById(this.name + '_searchbutton'); $(searchbutton) .insertBefore(this.searchfield) .replaceWith('<label>' + searchbutton.value + '</label>');