Project Detail

Description

Hi,

I'm looking for an experienced JavaScript programmer, with high-level skills in jQuery and Ajax stuff.

PART I/ Converting an existing script into jQuery, and enhancing it:

Original script: http://www.interiders.com/2008/02/18/protomultiselect-02/
A boosted version: http://www.hellovenado.com/blog/multiselect-facebook-list-redux

Translate this script in all jQuery, and thos new functionalities:
- add a "new author" functionnality: next to the text input, we want a link "add a new author". When I click it, a jQuery modal box appears (nevermind the style of this box), with a new form inside it. There, I can fill the name of the author, and save the form. It should save it with Ajax to a distant PHP script (we do not need you to code that script), which will return a JSON string containing 1/ the ID of the new element, 2/ the display value. Once it's saved, the modal box gets closed, the ID hidden field is updated with this additional value, as is the main value input.
--> enhancement: we need to be able to override the default class for a label element. For example, it's currently in blue. When the user adds a new author and that it's automatically added, we need it to be red.

--> pratically, we need to have clear and simple function (like addNewButton(field, id, val)) that adds at once: A/ adds the ID of the element to the hidden field, and B/ adds the display string to the display text box.

- We also need to have an option where we can disable the MULTI-ADD functionnality. When the multi-add is set to false, it means a usr cannot enter more than one single element in the input.

- Very important: The script must be able to be re-used many times in the same page. Imagine we have 100 books to get tagged in a row. We need this form to appear 100 times and be perfectly independant (only the form ID should change when binding the function).

PART II: Submit validation:

Hypothesis: In the following conext, the rich form input developed in part I is now used for a CITY. This means we have a suggest and a pretty form like part one, but we cannot have two cities in the input. We should activate the option to have only one value accepted.

Note: When talking of city, we actually work with city IDs. That means we always have the main displayed field with the value typed by the user, and another field, hidden, that receive the ID of the element, when it's correctly selected among the suggest list.


Concept:

- We need to be able to check the value of the city (both the ID in a hidden form input, AND the one displayed). There are 3 possibilities:
A/ There is one clean value in the hidden input, and we can submit the form
B/ There is no clean value in the hidden input, but the typed value isn't empty, which means the user has typed something but that we don't have any similar value in the database (otherwise the autosuggest would have helped him)
In that case we must make an AJAX call to a PHP file (not to code), that will receive the value typed by the user, and will try to grab objects in the database that match the query (send back JSON). Many options here:
1/ the script finds one object. We consider it's ok, so we affect the value to the original hidden input (id=new_id_given_by_php), and then we submit the form
2/ The script finds many objects (>1): We get a JSON string with ID/value pairs. With that, we create a div in our main script (just below the city form input) with a new radio input per option (max: 5 options): the user MUST choose between the options proposed by the Ajax call. In this case, we must listen these radio buttons, and once a field is ticked, then we update the real value of our form (the ID), and we update the display field with the name of the city. Like that, next time he will hit the "submit" button, the hidden ID field will be OK and we'll be in case one.
3/ Last case, the PHP script doesn't find any value. In this case, we display an error box "Please enter a valid city name".
C/ There is no ID value in the hidden field AND the typed field is empty, we display a div containing a standard error message ("Please enter something!").

--> note: all AJAX calls to PHP must be done in POST


Design;

We don't ask you to design anything (you can keep the CSS created in the original script). But all elements must be very easy to customize for us!! for clarity, please consider the following:
1/ we would appreciate if options in the suggest list remained <li> tags, all sharing the same CSS style.
2/ we would like the suggestion box with radio buttons to also be included in a <ul><li> node. Note that the style chosen won't be the same as the other <li> node.


All this must be coded fully in jQuery, in an non-obtrusive way. It must be cleanly coded and easy to integrate within an existing project. Documentation is needed to be be given, which explains how to perform all the given functionnalities. It must be understandable by an average server-side developer.