Your problem is that update is being called for both sortables, once when an item leaves and again when the item is dropped on the other list. You can see this by doing an alert(this.id) in the update callback (or just use console.log(this); )
Also, you might want to look at the jquery hasClass() method which would work better than your indexOf checks On Fri, Sep 25, 2009 at 11:00 PM, waves <[email protected]> wrote: > > Ok, so I have addressed this myself, though I still don't understand > why it is looping twice. To halt the double loop, I established a > local variable outside the function, then restricted looping through > the if statement based on the following: > > > $(function() { > > var loop = 0; > $("##sortable1, ##sortable2") > .sortable > ({ > connectWith: '.connectedSortable', > placeholder: 'ui-state-highlight', > opacity:0.60, > update: function(event,ui) > { > temp = > ui.item.attr("class"); > > if (temp.indexOf("default") > == -1 && loop ==0) > { > > ui.item.attr("class","ui-state-default"); > > loop=loop+1; > } > else if > (temp.indexOf("default") >= 0 && loop ==0) > { > > ui.item.attr("class","ui-state-highlight"); > > loop=loop+1; > } > } > }) > .disableSelection(); > }); > > > Now the class changes without changing back. > > > On Sep 25, 6:27 am, waves <[email protected]> wrote: > > I have two lists working as a connected sortable. What I want to do is > > want to get the element that we are sorting, grab its class and id > > value, parse out a component of this ID (which has been written > > dynamically), write a new class and id to the element based on this > > information, then submit the new sorted list (sortable2) to a database > > using ajax. > > > > With the code below (written for clarity), I see two alerts, both > > providing me with the same value. So, it appears that the sorted > > element is copied and on update, two elements exist and implicity, the > > update loops through both. > > > > <script type="text/javascript"> > > $(function() > > { > > $("##sortable1, ##sortable2") > > .sortable > > ({ > > connectWith: > > '.connectedSortable', > > opacity:60, > > update: function(event,ui) > > { > > temp = > ui.item.attr("class"); > > alert('value is '+temp); > > } > > }) > > .disableSelection(); > > }); > > </script> > > > > If I replace the update code with something like: > > > > temp = ui.item.attr("class"); > > > > if (temp.indexOf("default") == -1) > > { > > > ui.item.attr("class","ui-state-default"); > > } > > else > > { > > > ui.item.attr("class","ui-state-highlight"); > > } > > > > then the class is first changed, then changed back again. How do I > > gain better control of this? How do I access just one of the elements? > > Can someone explain what is going on? > > > > Thanks. > > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
