CODEWITHSUNDEEP
jquery
kevin
kevin

Reputation: 383

Changing name attribute using jQuery

I've got a jQuery function that attempts to change the id, name and class attribute values of an element.

The id and class change seems to work but for some curious reason, trying to change the name of the element never works.

Here is my code:

$(document).ready(function () {

$("table select").live("change", function () {

    var id = $(this).attr('id');

    if ($(this).attr('classname') != "selected") {
        var rowIndex = $(this).closest('tr').prevAll().length;
        $.getJSON("/Category/GetSubCategories/" + $(this).val(), function (data) {
            if (data.length > 0) {

                $("#" + id).attr('classname', 'selected');
                $("#" + id).attr('id', 'sel' + rowIndex);
                $("#" + id).attr('name', 'sel' + rowIndex); // this never works

                var position = ($('table').get(0));

                var tr = position.insertRow(rowIndex + 1);
                var td1 = tr.insertCell(-1);
                var td2 = tr.insertCell(-1);
                td1.appendChild(document.createTextNode('SubCategory'));
                var sel = document.createElement("select");
                sel.name = 'parent_id';

                sel.id = 'parent_id';

                sel.setAttribute('class', 'unselected');
                td2.appendChild(sel);

                $.each(data, function (GetSubCatergories, Category) {
                    $('#parent_id').append($("<option></option>").
       attr("value", Category.category_id).
       text(Category.name));
                });
            }

        });

    }
});
});

Upvotes: 38

Views: 121427

Answers (4)

Muhammad Ali
Muhammad Ali

Reputation: 115

I had a similar issue where I needed to reassign those attributes. I managed to achieve this simply and only by using the native method setAttribute().

$('.check-box-id').each(function (index,element) {
    element.setAttribute("id" , 'ingredients'+index+'.id');
    element.setAttribute("name" , 'ingredients['+index+'].id');
   
})

Upvotes: 0

user3152459
user3152459

Reputation: 403

Instead of chaining you can pass into .attr()

{
    "id" : "sel" + rowIndex ,
    "name" : "sel" + rowIndex
}

A lot of jQuery functions accept objects like above when you have to pass in (string comma string) data like .css() and .animate()

Upvotes: 4

karim79
karim79

Reputation: 342795

The name cannot be changed because once you have modified the id, the selector in the subsequent expression (which uses the unmodified id) is selecting nothing :)

$("#" + id).attr('id', 'sel' + rowIndex);
$("#" + id).attr('name', 'sel' + rowIndex); // this can't ever work

Try chaining them together like this, to keep the reference to the current selection:

$("#" + id).attr('id', 'sel' + rowIndex)
           .attr('name', 'sel' + rowIndex);

Alternatively, reorder the statements such that you change the name (and/or whatever else) before changing the id:

$("#" + id).attr('name', 'sel' + rowIndex);
$("#" + id).attr('id', 'sel' + rowIndex);

You can also assign the selection to a variable:

var $el = $("#" + id);
$el.attr("id", 'sel' + rowIndex);
...

Upvotes: 65

Rabbott
Rabbott

Reputation: 4332

Karim is right, 

$("#" + id).attr('classname', 'selected');
$("#" + id).attr('id', 'sel' + rowIndex);
$("#" + id).attr('name', 'sel' + rowIndex);

could be changed to

$("#" + id).attr('name', 'sel' + rowIndex);
$("#" + id).attr('classname', 'selected');
$("#" + id).attr('id', 'sel' + rowIndex);

to change the name first, $("#" + id) is the same as getElementById and once you change the id, its no longer the element you meant to refer to

Upvotes: 3

Related Questions