why ui.item.attr("id") return undefined value?

Question

I am working with sortable between <li> of <ul> but when I try to get ui.item.attr("id") I got undefined but other variable are working well like $(this).attr('id') and '+ui.sender.attr('id') but I am searching the index of the <ul> where the element dragged from.

my js file :

 $( init );
      function init() {

            $(".list-items").sortable({
                 connectWith: '.list-items',
                 items: "li:not(.item.new)",
                 placeholder: 'place-holder',
                 scroll: false,
                 tolerance: "pointer",update: function (event, ui) {
                 //alert($(this));
            }, 
            receive : function(e, ui) { 
                 alert('zone : '+ ui.item.attr("id"));            

                 alert('Where the item is dropped : '+$(this).attr('id')); // Where the item is dropped
                 alert('from where the item is dragged : '+ui.sender.attr('id')); // from where the item is dragged

                 if(ui.item.text()=="51173115") {

                      jConfirm('item '+ui.item.context.id+' capacite Cuisson epuise vous voulez continue comme meme ?', 'alerte', function(r) {     
                  if(r)           
                  {

                  }
                  else
                  {
                       $(ui.sender).sortable('cancel'); // refuse element to be dropped
                  }
           }
      }

 }).disableSelection();

        }

my jsf code :

<div class="gauchedragdrop"> 

        <p class="ui-widget-header" style="margin:0;padding:5px;color: #2779bb;">tableof</p>
          <ul id="ulgauche" class="list-items ui-sortable " > 
            <ui:repeat value="#{gestionduplanning.listzp01Equipe}" var="vari" >
                    <li class="item"><a  title="#{vari.ordre.toString()}">#{vari.ordre.toString()}</a></li>
            </ui:repeat>            
          </ul>    
</div> 
<div class="droitedragdrop">

            <p:dataTable var="op" value="#{ gestionduplanning.EQlistoneequipe.get(0).listop}" style="width: 700px;float: left;">

                <p:column headerText ="les of" style="width:550px;"> 
                       <ul id="uldroite" class="list-items ui-sortable">  
                        <ui:repeat value="#{op.orderedOf}" var="vari" >  
                            <li class="item"  ><a  title="#{vari}">#{vari}</a></li>
                        </ui:repeat>                        
                        </ul> 
                </p:column>
               </p:dataTable>

        </div>

why i get undefined value and how can I get this value ?

Answer 1

The problem is that ui.item is a collection of objects, so you need to use ui.item.context.id to get the id of the item that is the dragged element, as specified in the jQuery Sortable documentation:

ui.item

Type: jQuery

The jQuery object representing the current dragged element

So your case ui.item will be the <li> that are dragged and since they do not have an id attribute set on them ui.item.context.id will always be empty.

If you set an id on li then you can access it: http://jsfiddle.net/qj4GG/2/

What property exactly are you trying to get? What do you need it for?

Answer 2

You may try ui.item.option.childNodes[0].parentNode.parentNode.attributes[2].value

Just change attributes[] index value to as per order of id. Here I have two attributes before id.

this._on( this.input, {
      autocompleteselect: function( event, ui ) {
        ui.item.option.selected = true;
        alert(ui.item.option.childNodes[0].parentNode.parentNode.attributes[2].value);
        this._trigger( "select", event, {
          item: ui.item.option
        });
      },