jQuery draggable droppable compatibility issue with firefox and ie

Question

Hi,

ok bear with me, this is one of those long ones.

I have a table of values which stores ID and Field.

<asp:DataGrid runat="server" ID="dgFields" AutoGenerateColumns="false">
   <Columns>
        <asp:BoundColumn DataField="ID" Visible="true" HeaderText="ID"></asp:BoundColumn>
        <asp:BoundColumn ItemStyle-CssClass="draggable" DataField="Name" HeaderText="Field">
         </asp:BoundColumn>
    </Columns>
</asp:DataGrid>

This binds correctly and the data is sitting in the table correctly. note that only the Field bound column is "draggable". also note that the dragging works fine.

now i have a textbox that i want to be able to drag and drop values from the table to. nice and simple -

<asp:TextBox ID="txtNode" runat="server" class="droppable"></asp:TextBox>

now the fun part :)

$j(".draggable").draggable({ helper: 'clone', opacity: 0.7, cursor: 'move' });

this works fine.

now the trick. remember the id and field. i want to drag the field but i want the ID to be added to the textbox. got this working fine. testing in IE. however today i opened it in firefox and imagine my complete horror when "undefined" started appearing in my textbox.

just for speed sake (aka to get it to work NOW), i changed my droppable and it now looks as follows:

$j(".droppable").droppable({
                accept: '.draggable',
                activeClass: 'ui-state-hover',
                hoverClass: 'ui-state-active',
                drop: function(event, ui) {
                    var tbox = document.getElementById('txtNode');


                    //IE works with the following code
                    var id = ui.draggable[0].previousSibling.innerText;
                    //returns null for FIREFOX
                    if (id == null) {
                        //FIREFOX works with this
                        id = ui.draggable[0].previousElementSibling.innerHTML
                    }

                    tbox.value = tbox.value + '{' + id + '}';

                }
            });

note. the 'tbox.value = ...' bit is because i want to build a string built up of all the ids dragged to the textbox. i need to get the sibling because for user experience, i want them to drag the user friendly field name and NOT the id (because the id doesn't make sense to the user - the only reason it's visible is so that the user can map an id in the textbox to a word once he has dragged it). just for further background, the id string will then be saved to an xml file and is used for configuration and some other magical stuff :)

so now the questions

1. is this a known bug or am i doing something completely wrong?
2. if it is an issue, is this the best way or is there a better way to fix it?

again please note - all the code here WORKS. this is a best approach method to what i currently have - which is admittedly a workaround.

Answer 1

Well the problem here is incompatibilities between the DOM implementation in Firefox and IE. jQuery aims to let the developer avoid doing what you just had to do. Although I can't test out your code (because I don't have all the server-side business logic to populate the elements), you might want to try the following. You basically just need to replace your DOM calls with jQuery's API. Here we go....

Replace:

var id = ui.draggable[0].previousSibling.innerText;
//returns null for FIREFOX
if (id == null) {
  //FIREFOX works with this
  id = ui.draggable[0].previousElementSibling.innerHTML
}

with:

var id = ui.draggable.prev().html();

More info on the jQuery API can be found here: jQuery API. Specifically, the prev() and html() calls come from the Traversing and Attributes respectively.

I hope I could help!

Stephen