Question posted in
You can find the official documentation here.

How to get the id of a clone element – Jquery ajax

I have cloned a element and changed their id but unable to fetch the id’s of the clone element in the Jquery Can anyone please help??

The Html View source code is as follows

 <table id="dataTable" border="0" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th>UserName</th>
                        <th>Password</th>
                        <th>Service line</th>
                        <th>Track</th>
                        <th>subtrack</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="TemplateRow" style="border:1px solid black">
                        <td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[0].UserName" type="text" value="Required"></td>
                        <td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[0].Password" type="text" value="Required"></td>
                        <td>
                            <select class="wrapper-dropdown Service_Line" id="z0__Service_Line" name="[0].Service_Line">
                                <option value="">--Select--</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                            </select>
                        </td>
                        <td>
                            <select class="wrapper-dropdown Track" id="z0__Track" name="[0].Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>
                        <td>
                            <select class="wrapper-dropdown Sub_Track" id="z0__Sub_Track" name="[0].Sub_Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>

                        <td></td>
                    </tr>
                    <tr id="TemplateRow" style="border:1px solid black">
                        <td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
                        <td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
                        <td>
                            <select class="[1].Service_Line" id="z0__Service_Line" name="[1].Service_Line">
                                <option value="">--Select--</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Track" id="z0__Track" name="[1].Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>

                        <td></td>
                    </tr>
                    <tr id="TemplateRow" style="border:1px solid black">
                        <td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
                        <td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
                        <td>
                            <select class="[1].Service_Line" id="z0__Service_Line" name="[1].Service_Line">
                                <option value="">--Select--</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Track" id="z0__Track" name="[1].Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>

                        <td></td>
                    </tr>
                    <tr id="TemplateRow" style="border:1px solid black">
                        <td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
                        <td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
                        <td>
                            <select class="[1].Service_Line" id="z0__Service_Line" name="[1].Service_Line">
                                <option value="">--Select--</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Track" id="z0__Track" name="[1].Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>

                        <td></td>
                    </tr>
                    <tr id="TemplateRow" style="border:1px solid black">
                        <td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
                        <td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
                        <td>
                            <select class="[1].Service_Line" id="z0__Service_Line" name="[1].Service_Line">
                                <option value="">--Select--</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Track" id="z0__Track" name="[1].Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>

                        <td></td>
                    </tr>
                    <tr id="TemplateRow" style="border:1px solid black">
                        <td><input data-val="true" data-val-required="The Username field is required." id="z0__UserName" name="[1].UserName" type="text" value="Required" class="[1].UserName"></td>
                        <td><input data-val="true" data-val-required="The Password field is required." id="z0__Password" name="[1].Password" type="text" value="Required" class="[1].Password"></td>
                        <td>
                            <select class="[1].Service_Line" id="z0__Service_Line" name="[1].Service_Line">
                                <option value="">--Select--</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Track" id="z0__Track" name="[1].Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>
                        <td>
                            <select class="[1].Sub_Track" id="z0__Sub_Track" name="[1].Sub_Track">
                                <option value="">--Select--</option>
                                <option> </option>
                            </select>
                        </td>

                        <td></td>
                    </tr>
                </tbody>
            </table>

In the above code i have cloned the rows by incrementing their id’s
using jquery code below

 $(document).ready(function () {
            /* 1. Initialise our variable to keep count of the rows added */
            var rowcount = 1;

            //Add new row
            $("#addNew").click(function (e) {
                e.preventDefault();
                var $tableBody = $("#dataTable");
                var $trLast = $tableBody.find("tr:last");

                // 2. Create the new id with the row count
                //var newId = "TemplateRow-" + rowcount;

                // 3. clone the row with our new id
                var $trNew = $trLast.clone(true);

                // 4. rename each input and give an id
                $.each($trNew.find(':input'), function (i, val) {

                    oldName = $(this).attr('name');
                    inputParts = oldName.split(".");

                    // set the  name and id with the base name and rowcount
                    $(this).attr('name', '[' + rowcount + '].' + inputParts[1]);
                    $(this).attr('class', '[' + rowcount + '].' + inputParts[1]);

                    $(this).removeClass("input-validation-error");
                });

                $trLast.after($trNew);
                $("#[" + rowcount + "].Service_Line").change(function () {
                    debugger;
                    $.get("/Users/GetTrackList", { Service_Line_ID: $("#[" + rowcount + "].Service_Line").val() }, function (data) {
                        $("#[" + rowcount + "].Track").empty();
                        $.each(data, function (index, row) {
                            $("#[" + rowcount + "].Track").append("<option value='" + row.Track_ID + "'>" + row.Track_Options + "</option>")
                        });
                    });
                })
                rowcount++;
            });
        });

But here in this line $("#[" + rowcount + "].Service_Line").change(function () { I’m unable to fetch the id of the cloned rows from the webpage Can anyone please help me? Thanks in advance

The service_line id of the rows when cloned goes on increasing as [1].service_line, [2].service_line , [3].service_line, [4].service_line, so on……… i need to fetch this id’s using jquery here in this function

 $("#[" + rowcount + "].Service_Line").change(function () {
                    debugger;
                    $.get("/Users/GetTrackList", { Service_Line_ID: $("#[" + rowcount + "].Service_Line").val() }, function (data) {
                        $("#[" + rowcount + "].Track").empty();
                        $.each(data, function (index, row) {
                            $("#[" + rowcount + "].Track").append("<option value='" + row.Track_ID + "'>" + row.Track_Options + "</option>")
                        });
                    });
                })
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
     $("select[name='[" + rowcount + "].Service_Line']").change(function () {
            //get the row count of this row using the keyword this, to
            //get the select which fired the event, then use regex
            //to capture the number from the name attribute:
            const thisrow = $(this).attr('name').match(/[(d+)]/)[1];

            $.get("/Users/GetTrackList", { Service_Line_ID: $("select[name='[" + thisrow + "].Service_Line']").val() }, function (data) {
                $("select[name='[" + thisrow + "].Track']").empty();
                $.each(data, function (index, row) {
                    $("select[name='[" + thisrow + "].Track']").append("<option value='" + row.Track_ID + "'>" + row.Track_Options + "</option>")
                });
                debugger;
            });
        })

  2. 0

    You aren’t setting the id like you think you are, you’re setting the className and name attributes, so $("#[" + rowcount + "].Service_Line") is not going to return anything:

    Your Script:

       // set the  name and id with the base name and rowcount
   $(this).attr('name', '[' + rowcount + '].' + inputParts[1]);
   $(this).attr('class', '[' + rowcount + '].' + inputParts[1]);

    You can select the element by name attribute like so:

     $("select[name='[" + rowcount + "].Service_Line']").change(function() {); //etc.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search