0

I have created a script so far that detects when the class object .edit has been clicked and then dynamically creates two buttons to display. What should happen is that only the row that the button was clicked in should then display the buttons, but right now it displays the buttons in all the rows. This is due to having to loop through the model and display all the data entries. I have thought of using unique ids but I don't quite understand how to use this method or if there is a better way to perform this action.

The for loop that I created in my javascript the original thought behind that as well was to loop through all the entries, but only display the button one time out of the entire loop, but still resulted in all the rows showing the button.

@foreach (var item in Model.Records){
<tr id="@item.RowIndex">
<td>
<button type="button" data-id="{{@item.RowIndex->id}}" id="triggerEditing" value="@item.RowIndex" class="btn btn-primary edit">Edit</button><br /><br /><br />
                <p class="dummy_field" data-id="{{@item.RowIndex->id}}" id="dummy_field"></p>
</td>
</tr>
}

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
                $('body').on('click', '.edit', edit);
                function edit() {   

                    var edit = $(this);
                    var value = edit.val();
                    edit.hide();
                    $('select')
                    for (var i = 0; i < $('.edit').length; i++) {
                        if (i = 1) {
                            var cancelBtn = ('<button class="btn btn-primary cancel">Cancel</button>');
                            $('#dummy_field').append(cancelBtn);
                            var saveBtn = ('<button class="btn btn-primary save" id="save">Save Changes</button>');
                            $("#save").attr('value', value)
                            $('#dummy_field').append(saveBtn);
                            break;
                        }
                    }                             

                    $(".cancel").click(function cancel() {
                        edit.show();
                        document.getElementById("save").style.visibility = "hidden";
                        document.getElementById("cancel").style.visibility = "hidden"; 
                    });


        });

    </script>
Dominik Willaford
  • 293
  • 5
  • 14
  • 1
    both the clicked button and the dummy_field in each row have `data-id` attributes which match. So you could simply target the dummy_field instance which has the same data-id as the clicked button. Or you could get the parent element of the clicked button (which will be a table cell) and add the buttons as children of that. There are a number of fairly simple ways. You can easy google the jquery functions to use for getting data-attributes and/or for finding parent elements. – ADyson Sep 19 '19 at 21:58
  • 1
    P.S. you are creating duplicate IDs on your dummy_field, because if you have many rows in the table you will end up with lots of `

     – ADyson Sep 19 '19 at 21:59
  • @ADyson Thank you for sharing this information. I hadn't even thought of trying to get the data-id or looking for the parent and child in regards to this. – Dominik Willaford Sep 20 '19 at 13:12
  • @ADysonare can you append a button to where the p tag based off of the data-id? for example: var dataId = $(".dummy_field").data("id"); then do $(dataId).append(cancelBtn); – Dominik Willaford Sep 20 '19 at 14:37
  • Almost. You can include the dataId as part of an [attribute selector](https://api.jquery.com/attribute-equals-selector/) to identify the correct element. here's a direct example: https://stackoverflow.com/a/4146566/5947043 – ADyson Sep 20 '19 at 15:31

0 Answers0