Hey i want to change the name attribute of a table once the row is draged from one group into the other. I get the row of which name attribute to be changed and the target name. but my javascript function is not changing the row name This is what I tried so far

<script type="text/javascript">
        $(document).ready(function() {
            $('#sort').tableDnD({
                onDrop: function(table, row) {
                    var patent_id = row.id;
                    var target_group_id = getpreviousSiblingName(row);
                    var data = {PID:patent_id, TGID:target_group_id};
                    **changename(patent_id,target_group_id);**
                    $.ajax({
                        type: "POST",
                        data: data,
                        url:"{{ path('MunichInnovationGroupBundle_patent_dragpatent') }}",
                        cache: false
                     });
                },
                dragHandle: ".dragHandle"
            });
            $("#sort tr").hover(function() {
                if($(this).hasClass('tr_group'))
                    $(this.cells[0]).addClass('showDragHandle');
                }, function() {
                    $(this.cells[0]).removeClass('showDragHandle');
            });

        });
</script>

    <script>
    function changename(row_id,row_name){
        var row = document.getElementById(row_id);
        alert(row_id);
        alert(row_name);
        row.name=row_name;
        return true;
    }
</script>

Hey i want to change the name attribute of a table once the row is draged from one group into the other. I get the row of which name attribute to be changed and the target name. but my javascript function is not changing the row name This is what I tried so far

<script type="text/javascript">
        $(document).ready(function() {
            $('#sort').tableDnD({
                onDrop: function(table, row) {
                    var patent_id = row.id;
                    var target_group_id = getpreviousSiblingName(row);
                    var data = {PID:patent_id, TGID:target_group_id};
                    **changename(patent_id,target_group_id);**
                    $.ajax({
                        type: "POST",
                        data: data,
                        url:"{{ path('MunichInnovationGroupBundle_patent_dragpatent') }}",
                        cache: false
                     });
                },
                dragHandle: ".dragHandle"
            });
            $("#sort tr").hover(function() {
                if($(this).hasClass('tr_group'))
                    $(this.cells[0]).addClass('showDragHandle');
                }, function() {
                    $(this.cells[0]).removeClass('showDragHandle');
            });

        });
</script>

    <script>
    function changename(row_id,row_name){
        var row = document.getElementById(row_id);
        alert(row_id);
        alert(row_name);
        row.name=row_name;
        return true;
    }
</script>

• javascript
• jquery
• tablednd

• put a working example on jsfiddle, so we can have a look – wroniasty Commented Jun 7, 2012 at 13:33
• I don't know how your getpreviousSiblingName function works, but beaware that in some browsers a TR's immediate sibling might be a text node, not another TR. – RobG Commented Jun 7, 2012 at 13:52
• @RobG I already managed that whitespace as node problem :) I wrote a javascript function to ignore the whitespace as node – Zoha Ali Khan Commented Jun 7, 2012 at 13:56

1 Answer 1

A tr doesn't have a .name property, so the attribute is not automatically transferred to the property.

Use setAttribute() instead to set custom attributes.

function changename(row_id,row_name){
    var row = document.getElementById(row_id);
    row.setAttribute('name',row_name);
    return true;
}

Then to retrieve it again, you'll need getAttribute

row.getAttribute('name');

Off topic, but you don't need to pass the row.id and then use getElementById. You could just pass the row directly.