jQuery highlight effect refreshes page unexpectedly

Question

I have a form that looks like this:

<form id="addClassesToDoc" action="">
    <table id="classesTable" style="border-collapse: collapse" cellpadding="3">
        <thead>
            <tr style="background-color: #a04a56; color: #ffffff;">
                <td width="50px"></td>
                <td width="75px"><b>Class<br />Number</b></td>
                <td width="500px"><b>Class Name</b></td>
            </tr>
        </thead>
        <tbody>
            <tr bgcolor="#EFE5D3">
                <td align="center"><input type="checkbox" class="chkAddClass" name="classesToAddToDoc[]" value="45" /></td>
                <td>PHB7075</td>
                <td>Organizational Systems and Leadership </td>
            </tr>
            <tr bgcolor="">
                <td align="center"><input type="checkbox" class="chkAddClass" name="classesToAddToDoc[]" value="126" /></td>
                <td>TEST111</td>
                <td>Test add new class</td>
            </tr>
        </tbody>
    </table>
</form>

I am validating whether any checkboxes are checked prior to the $.ajax() call using this code:

var classesToAddToDoc = new Array();
if ($('input.chkAddClass:checked').length > 0) {
    // At least one class checked
    // Get the id(s) of the checked class(es)
    $.each($('#classesTable input[name="classesToAddToDoc[]"]:checked'), function() {
        classesToAddToDoc.push($(this).attr('value'));
    });
} else {
    // No docs checked
    //alert('Please check at least one class to add to the selected document.');
    $.each($('#classesTable input[type="checkbox"]').parent().effect('highlight',{color: '#A04A56'},1500));
    return false;
}

In the else clause, when I have the alert uncommented and the highlight line commented, the alert shows and the page stays in the same position.

But when I comment out the alert and uncomment the highlight line, the page refreshes, the checkbox cells are highlighted, and the form parameters are added to the address bar, similar to this:

[pageAddress]?docsList=46&submitAddClassesToDoc=Add+Checked+Classes+to+Selected+Document

Why would the highlight do that and how can I stop it?

The refresh is caused by the URL change. Fix the latter and you will fix the former. Also, you're using [`$.each()`](http://api.jquery.com/jQuery.each) when you really should just use [`.map()`](http://api.jquery.com/map) and [`.each()`](http://api.jquery.com/each). — Matt Ball, Jun 23 '11 at 16:06
I don't understand how the URL is changing. Can you explain that in more detail please? Also, I'm not sure exactly how to change the each part - I'm still figuring out how jQuery basics... — marky, Jun 23 '11 at 16:24
Also, the examples I see in the documentation for .each() have functions in them - how do I use that in my case? — marky, Jun 23 '11 at 16:32
See my edit for that. Any chance you could put together a minimal demo that reproduces the page refresh problem? e.g. using http://jsfiddle.net or http://jsbin.com. — Matt Ball, Jun 23 '11 at 16:41

Matt Ball · Accepted Answer · 2011-06-23T16:41:12.760

I'm not sure exactly how to change the each part - I'm still figuring out how jQuery basics

Sure, I can at least show you how to clean that up:

var classesToAddToDoc;
if ($('input.chkAddClass:checked').length)
{
    // At least one class checked
    // Get the id(s) of the checked class(es)
    classesToAddToDoc = $('#classesTable input[name="classesToAddToDoc[]"]:checked').map(function ()
    {
        return $(this).val(); // probably want .val() over .attr('value')
    }).get();
}
else
{
    // No docs checked
    //alert('Please check at least one class to add to the selected document.');
    $('#classesTable input:checkbox').parent().effect('highlight',{color: '#A04A56'},1500));
    return false;
}

Also, the examples I see in the documentation for .each() have functions in them - how do I use that in my case?

Something like

$('some selector here').each(function (index, element)
{
    // do something for each element

    // index is the current index of iteration
    // this and element are references to the current element
});

You don't actually need .each() at all in your particular case.

Sweet, man! I just copy/pasted that into my code and it worked! Thanks! Okay, now that I'm over the euphoria of getting it fixed, what exactly was causing the page refresh? It must have something to do with my $.each() syntax, but I don't understand how that can possibly cause data to show in the address bar. — marky, Jun 23 '11 at 17:06

jQuery highlight effect refreshes page unexpectedly

1 Answers1