views:

93

answers:

2

I have a form that uses jQuery-UI's selectable plugin to populate a list from a table. My form also allows users to remove single or multiple list items if they change their minds. This function works in IE and Firefox. The list is also automatically cleared and the form reset if the user chooses to download their list. This also works in IE and Firefox.

Lastly, I added a button that removes all the list items and resets the form if the user wants to start from fresh. This function only works in Firefox. In IE, the list items are removed from the field they are in, but for some reason $('#newgroups').removeData() is ignored. I know this because after .remove or .tofile I can add a group that has the same name as an earlier but no longer present group. After .clear, though the form looks the same, creating a list item with a previously used group name fails.

Here is the code (I've left out function bodies that aren't involved with removing list items or resetting the form):

$(function(){
    $('#selectable').selectable({
         //rules for how table elements can be selected
    });

    $("input[name='makegroup']").live("click", function(event){
        //adding list items
    });

    $("input[name='removegroup']").live("click", function(event){
        event.preventDefault();
        groups.msg();
        groups.remove(); //works in FF and IE
    }); 

    $("input[name='cleargroups']").live("click", function(event){
        event.preventDefault();
        groups.msg();
        return groups.clear(); //partially fails in IE
    });

    $("form#grouper").submit(function(){
        return groups.tofile(); //works in FF and IE
    });

    groups={
        grpmsg: $('#grpmsg'),
        grpselections: $('#newgroups'),
        grpname: $("input[name='newgroup']"),
        filetext: $("input[name='filetext']"),

        add: function(){
            //add option to this.grpselections and set this.grpselections.data
            //compares input data to $grpselections.data() for problems and throws error if necessary               
        },

        remove: function(){
            var vals= this.grpselections.val();//selected list items
            for(var i in vals){
                this.grpselections.data(vals[i]).removeClass('ui-selected chosen');
                this.grpselections.removeData(vals[i]);
            }
            this.grpselections.find(':selected').remove();
            this.grpname.focus();
        },

        clear: function(){ //identical to tofile method of resetting form
            this.grpselections.empty();
            this.grpselections.removeData();//DOES NOT WORK IN IE
            $('#selectable td').removeClass('ui-selected chosen');
            this.grpname.focus();
            return true;
        },  

        tofile: function(){
            this.grpselections.select();
            var gtxt='';
            this.grpselections.find('option').each(function(i){
                gtxt += $(this).text() + "\n";
            });
            if (gtxt.length === 0) {
                this.msg('nonetofile');
                return false;
            }
            this.filetext.val(gtxt);

            //BELOW IS IDENTICAL TO clear function EXCEPT IT WORKS IN IE TOO
            this.grpselections.empty();
            this.grpselections.removeData();
            $('#selectable td').removeClass('ui-selected chosen');
            this.grpname.focus();
            return true;
            //END INTERESTING BIT
        },

        msg: function(msgtype){
                //show error message specific to problem
    },

        addline: function(groupname){
            //auxilliary to add function                
        }
    };

});
A: 

Not enough info here. Try putting a debugger; statement in the code and opening ie8 developer tools to debug the script and see what is going on.

redsquare
I opened ie8 developer tools and the problem went away. I closed the developer tools and the problem came back. If I weren't so *ladylike* ;) I'd swear violently!
dnagirl
redsquare
+1  A: 

Well first to confess I have not used the selectable stuff at all, SO given that, a shot in the dark, can you chain?

this.grpselections.empty().removeData();
Mark Schultheiss
Chaining was a good idea. The order had to be `this.grpselections.removeData().empty();` rather than the reverse, but now IE is happy. Perhaps it was the order of operations in the unchained version that was the problem.
dnagirl
Good to see you get to keep some of your hair :)
Mark Schultheiss
After some thought, I DID have the sequence incorrect. Events bubble up the DOM tree/chain, and the parent will get executed after the child unless the child prevents this.
Mark Schultheiss