locked
Two checkboxes are getting displayed in the ASP.NET MVC HTML Table. RRS feed

  • Question

  • User-1549556126 posted

    I am appending the checkbox column into HTML table however, I am only declaring the <input type='checkbox'> tag once still each row has 2 replicas of the checkboxes that are getting generated. The link to the image is here. When I click on checkbox on the left both of them gets checked however the one in the table is neither functioning nor any template is working on it.

    My ajax Code:

    $.ajax({
                            type: "POST",
                            url: "/Group/FillMembers",
                            data: { GroupName: $("#ddlGroup option:selected").text().trim() },
                            success: function (response) {
                                $.each(response.message, function (key, value) {
                                    var arr = value.split(";")
                                    var tbody = $("#tbody");
                                    var tr = $("<tr></tr>")
                                    $.each(arr, function (i, obj) {
                                        var temp = arr[i].trim().split("=")[1];
                                        var td = $("<td></td>")
                                        td.append(temp);
                                        tr.append(td);
                                    })
                                    //DropDownlist for required adjustments
                                    tr.append("<td><select id='ddlReqdAdjustment' class='form-control'> \
                                                <option>Keep</option> \
                                                <option>Remove</option> \
                                                <option>Remove After</option> \
                                            </select> \
                                        </td>");
                                    //Textbox with Validation to allow only integers
                                    tr.append("<td><input type='text' class='form-control myText' disabled \
                                                    onkeypress = 'return (event.charCode != 8 && event.charCode == 0 \
                                                                            || (event.charCode >= 48 && event.charCode <= 57))' /> \
                                        </td >");
                                    //tr.append("<td ><input type='checkbox' class='fakeRadio form-control' name='chk' /> \
                                    //            <input name='chk' type='hidden' value='false' /> \
                                    //           </td>");
                                    tr.append("<td> <input type='checkbox' class='fakeRadio form-control' /> \
                                                    <label for='chk'/>\
                                               </td>");
                                    tbody.append(tr);
                                });
                                // Resetting Mouse Click & Cursor
                                $("*").css("cursor", "default");
                            }
                        });

    My HTML Table Code: 

    <div id="tbl">
            <table class="table table-striped table-hover">
                <thead>
                    <tr id="thead" class="reviewsubhead">
                        <th>Member Name</th>
                        <th>Provisioning ID</th>
                        <th>Member Type</th>
                        <th>Required Adjustment</th>
                        <th>No. of Day(s)</th>
                        <th>
                            <div class="form-control">
                                <a id="btnClear" class="arrow-link" type="submit" style="width: auto;">Clear</a>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody id="tbody"></tbody>
            </table>
        </div>

    Even if I declare a checkbox outside the HTML table it is generating 2 replicas. Can anyone answer me why is it happening. The sample data is on this link.

    Wednesday, June 19, 2019 7:20 PM

Answers

  • User61956409 posted

    Hi vyasnikul,

    Even if I declare a checkbox outside the HTML table it is generating 2 replicas. Can anyone answer me why is it happening. The sample data is on this link.

    I modify and do a test using the code with sample data you provided, like below. Please refer to it.

    $(function () {
        //your code logic
    
        //test with sample data
        var mydata = ["displayname=User1; samAccountName=usr1; ObjectGUID=8a3fab53-4c8b-483d-89f0-e26de236a627", "displayname=User2; samAccountName=usr2; ObjectGUID=0a3fab53-4c8b-483d-89f0-e26de236a627", "displayname=User3; samAccountName=usr3; ObjectGUID=9a3fab53-4c8b-483d-89f0-e26de236a627"];
    
            
    
        $.each(mydata, function (key, value) {
            var tr = $("<tr></tr>");
            var tbody = $("#tbody");
    
            var arr = value.split(";");
    
            $.each(arr, function (i, obj) {
                var temp = arr[i].trim().split("=")[1];
    
                td = $("<td></td>");
                td.append(temp);
                tr.append(td);
            });
                
    
            //DropDownlist for required adjustments
            tr.append("<td><select id='ddlReqdAdjustment' class='form-control'> \
                                            <option>Keep</option> \
                                            <option>Remove</option> \
                                            <option>Remove After</option> \
                                        </select> \
                                    </td>");
            //Textbox with Validation to allow only integers
            tr.append("<td><input type='text' class='form-control myText' disabled \
                                                onkeypress = 'return (event.charCode != 8 && event.charCode == 0 \
                                                                        || (event.charCode >= 48 && event.charCode <= 57))' /> \
                                    </td >");
            //tr.append("<td ><input type='checkbox' class='fakeRadio form-control' name='chk' /> \
            //            <input name='chk' type='hidden' value='false' /> \
            //           </td>");
            tr.append("<td> <input type='checkbox' class='fakeRadio form-control' /> \
                                                <label for='chk'/>\
                                            </td>");
            tbody.append(tr);
        });
    
            
    })

    Test Result:

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 20, 2019 2:11 AM

All replies

  • User475983607 posted

    There are too many markup errors, invalid HTML, and unknown values. 

    Please use the browser's dev tools (F12) to debug your code.

    Wednesday, June 19, 2019 7:34 PM
  • User61956409 posted

    Hi vyasnikul,

    Even if I declare a checkbox outside the HTML table it is generating 2 replicas. Can anyone answer me why is it happening. The sample data is on this link.

    I modify and do a test using the code with sample data you provided, like below. Please refer to it.

    $(function () {
        //your code logic
    
        //test with sample data
        var mydata = ["displayname=User1; samAccountName=usr1; ObjectGUID=8a3fab53-4c8b-483d-89f0-e26de236a627", "displayname=User2; samAccountName=usr2; ObjectGUID=0a3fab53-4c8b-483d-89f0-e26de236a627", "displayname=User3; samAccountName=usr3; ObjectGUID=9a3fab53-4c8b-483d-89f0-e26de236a627"];
    
            
    
        $.each(mydata, function (key, value) {
            var tr = $("<tr></tr>");
            var tbody = $("#tbody");
    
            var arr = value.split(";");
    
            $.each(arr, function (i, obj) {
                var temp = arr[i].trim().split("=")[1];
    
                td = $("<td></td>");
                td.append(temp);
                tr.append(td);
            });
                
    
            //DropDownlist for required adjustments
            tr.append("<td><select id='ddlReqdAdjustment' class='form-control'> \
                                            <option>Keep</option> \
                                            <option>Remove</option> \
                                            <option>Remove After</option> \
                                        </select> \
                                    </td>");
            //Textbox with Validation to allow only integers
            tr.append("<td><input type='text' class='form-control myText' disabled \
                                                onkeypress = 'return (event.charCode != 8 && event.charCode == 0 \
                                                                        || (event.charCode >= 48 && event.charCode <= 57))' /> \
                                    </td >");
            //tr.append("<td ><input type='checkbox' class='fakeRadio form-control' name='chk' /> \
            //            <input name='chk' type='hidden' value='false' /> \
            //           </td>");
            tr.append("<td> <input type='checkbox' class='fakeRadio form-control' /> \
                                                <label for='chk'/>\
                                            </td>");
            tbody.append(tr);
        });
    
            
    })

    Test Result:

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 20, 2019 2:11 AM