Search code examples
jquerydraggablejquery-ui-sortablechildreninput-field

Jquery Draggable Sortable write into correct Input, get child element not working


I´m trying to reorder a set of photos inside a sortable ul; to save them in the new order I have to overwrite the matching input fields (name and title):

That's my ul structure :

    <ul class="float drag1">
    <g:each in="${fotos}" var="foto" status="index" >
        <li class="float editimg 1" id="${index}">
            <div class="float imgbox">
                <span class="floatr imgdel" onclick="deletePicture('${foto.name}')" title="Löschen"></span>
                <img src="${di.createImageURL(bucket:'foo', name: foto.name, format:'m')}" alt="${foto.titel}" />
                <g:hiddenField name="fotos[${index}].name" readonly="readonly" value="${foto.name}"/>
            </div>
            <input type="text" name="fotos[${index}].titel" class="fototitel"  value="${foto.titel}"/>
        </li>
    </g:each>
</ul>

and thats my JS

<script type="text/javascript">
$( sort );
function sort() 
{$('.drag1').sortable({
update: function(event,ui) {
    var draggingElement = $(ui.item);
    var ordering = draggingElement.index();
    var string1 = 'fotos['+ordering+'].name' ;
    var string2 = 'fotos['+ordering+'].titel' ;
    alert(string1+'---'+string2);
    //the following part doesn´t work, when i give those inputs unique id´s it work´s but i want this to be more self fulfilling.
    var inputs = draggingElement.getElementsByTagName("input");
    inputs[0].attr('name',string1);
    inputs[1].attr('name',string2);
 }
});
}
</script>

Alerting string1 and string2 shows that those are correct, I just need to update the name attribute of the inputs. But in the example above i get a typeError

draggingElement.getElementsByTagName is not a function

I can´t figure out how to get the child inputs of the draggingElement.


Solution

  • In place of

    var inputs = draggingElement.getElementsByTagName("input");
    inputs[0].attr('name',string1);
    inputs[1].attr('name',string2);
    

    try this

    var inputs = draggingElement.find("input");
    inputs.eq(0).attr('name',string1);
    inputs.eq(1).attr('name',string2);