simple jquery on asp.net does not work on firefox

Question

Hello, I have been struggling with getting this work on Firefox. Hope there is somebody help me!

Basically; Firefox ignores the button click function and it's sub functions and the button posts the page instead of running the jquery code.

It works on IE and Chrome but not on Firefox.

Thank you for your help in advance.

Here is the output code:

<script type="text/javascript" language="javascript">
    $(document).ready(function() {

        $(".CatList li").click(function() {
            if ($(this).is(".selected")) {
                $(this).attr("class", "");
                $('#ctl00_ContentPlaceHolderRight_CatChanged').val(1);
                return false;
            }
            else {
                $(this).attr("class", "selected");
                $('#ctl00_ContentPlaceHolderRight_CatChanged').val(1);
                return false;
            }

        });


        $("#ctl00_ContentPlaceHolderRight_btnSave").click(function() {
            var elements = $("li.selected");
            if (elements.val() == null) {
                alert("You must select at least one category");
                return false;
            }
            else {
                elements.each(function() {
                    $('#ctl00_ContentPlaceHolderRight_CatChecked').val($('#ctl00_ContentPlaceHolderRight_CatChecked').val() + "," + $(this).attr("id"));
                    return true;
                });
            }
        });
    });
</script>

Answer 1

Don't check against null -- try to stick with the undefined that jQuery ensures. Check what elements.val() returns to start (just alert it).

Also, you don't preventDefault() or return false in the else clause which could be a reason for Firefox to submit the page.

Answer 2

Hi!

Do you know firebug Firefox Extension? It is very useful for debug Javascript on Firefox.

Firebug also include a Javascript console where you can test your functions.

Answer 3

Thank you tjko, using alert saved my day. I was just too confused. I have changed the code as below and everything works perfectly:

            var elements = $("li.selected");
            elements.each(function() {
                $('#<%=CatChecked.ClientID%>').val($('#<%=CatChecked.ClientID%>').val() + "," + $(this).attr("id"));
            });
            if ($('#<%=CatChecked.ClientID%>').val() == "") {
                alert("You must select at least one category");
                return false;
            }
            else {
                //alert($('#<%=CatChecked.ClientID%>').val());
                return true;
            }