Explain what is happening in this code

Question

Really stuck trying to figure out what is happening in the code below...

function updateColourDropdown(url) {
    $("#selectList").unbind();
    $.post(setUniqueParam(url), $("#fruitForm").serialize(),
            function(data) {
                if (checkException(data)) {
                    $("#fruitDiv").children().each(function() {
                        removeElem(this);
                    }).end().html(data);
                    $("#selectList").change(function() {
                        updateColourDropdown($("#fruitColourView").val());
                    });
                    organiseAllocateTeams();
                }
                data = null;
            }
    );
    return false;
}

Basically there is a form containing two dropdown lists, fruit and colour. If the user changes the fruit in the first select list, a call to the server is made to find out the available colours to populate the second select list.

my html is output using JSP..

selectList = id of a select list containing a list of fruits,

fruitForm = id of the form containing the select lists

fruitDiv = id of the div that wraps around my two select lists

fruitColourView = id of a hidden input field used to link to a struts action (xml)

This is working code. I am trying to replicate this code on another page, however I'm finding it a bit tricky as I am not sure what it is actually doing, and why... From what I can tell the 'data' variable contains the entire code for my page..

I have looked up all the .children .each .end etc etc on jQuery website but I cannot logically put it all together...

Thanks heaps, hope I have been clear enough.

Answer 1

function updateColourDropdown(url) {
    // Remove handlers on #selectList
    $("#selectList").unbind();

    // Post to URL specified in the parameter, serializing #fruitForm
    $.post(setUniqueParam(url), $("#fruitForm").serialize(),

            // Run this on success
            function(data) {

                // Assuming `checkException` looks in the returned
                // data to see if something went wrong.
                if (checkException(data)) {

                    // Something went wrong; for each of #fruitDiv's children 
                    // run the function that removes that child element, then
                    // at the end, put the data, which appears to be HTML,
                    // into #fruitDiv
                    $("#fruitDiv").children().each(function() {
                        removeElem(this);
                    }).end().html(data);

                    // Then set a new `change` event handler on #selectList
                    // that runs `updateColourDropdown, given the value of
                    // #fruitColourView. See Note 1.
                    $("#selectList").change(function() {
                        updateColourDropdown($("#fruitColourView").val());
                    });

                    // Then call this.
                    organiseAllocateTeams();
                }

                // Useless.
                data = null;
            }
    );


    return false;
}

Note 1: In reasonably current versions of jQuery I'd probably handle this with a handler that uses event delegation to avoid having to unbind/rebind repeatedly.

The question has nothing to do with Struts, and there's not too much going on that's particularly difficult to reason about.