0

I have an unordered list of list items that each contain a button. When this button is clicked, I want my dialog box to open for the associated list item. Each list item has unique text that the dialog box should display.

Here's my html

    <ul id="filter-list" class="scrollable-menu text-center">
        @foreach (var filter in Model.GlobalFilters)
        {
            <li class="form-inline" data-id="@filter.FilterId.ToString()" style="margin-bottom: 8px">
                <button type="button" class="description-button" title="View/Edit Description" style="background-color:transparent;">
                    <i class="fa fa-sticky-note fa-2x" aria-hidden="true"></i>
                </button>

                <textarea type="text" class="description" title="Filter Description" style="display: none">@filter.Description</textarea>                    
            </li>
        }            
    </ul>

And here's my JQuery

$(document).ready(function () {
    $('.description').dialog({
        autoOpen: false,
        buttons: {
            'OK': function () {
                //var name = $('input[name="Description"]').val();
                //storeData(name);
                $(this).dialog('close');
            },
            'Cancel': function () {
                $(this).dialog('close');
            }
        }
    })

    $('button.description-button').on('click', function () {
        $(this).siblings('.description').dialog('open');
    })
});

I was hoping that the jquery dialog init would be done for every single list element that my foreach loop generates, but it seems to only be done on the first element. Furthermore, the dialog doesn't even open for the first element when I click the button.

Any insight here would be greatly appreciated. Still very new to all things web development!

rawberry
  • 192
  • 9
  • There seems to be no input tag in your html code... – Christian Bonato Feb 28 '18 at 19:39
  • 1
    You can't repeat ids. `$(this).siblings('#description')` – Taplar Feb 28 '18 at 19:40
  • Possible duplicate of [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) – Taplar Feb 28 '18 at 19:40
  • @Taplar `$(this).siblings('textarea').dialog('open');` doesn't change anything. However, the use of #description when initializing the dialog is definitely a problem. So how should I initialize the dialog for each of my list elements? – rawberry Feb 28 '18 at 19:45
  • Classes can be repeated. You could change it from an id to a class. – Taplar Feb 28 '18 at 19:46
  • The same way you did it for `description-button`, with a class. – James Feb 28 '18 at 19:46
  • Gave my textarea element a class `` and initialize its dialog using the class `$('.description').dialog({` and did the same with the button click `$(this).siblings('.description').dialog('open');` to no avail – rawberry Feb 28 '18 at 19:52

1 Answers1

0

you can fix your issue using the event delegation technique, here is a medium article which explain how to approach it event delegation

small example

document.addEventListener('DOMContentLoaded', function() {

let app = document.getElementById('filter-list');

// attach event listener to whole container
 app.addEventListener('click', function(e) {
    if (e.target && e.target.nodeName === 'LI') {
     let item = e.target;
     alert('you clicked on item: ' + item.innerHTML);
    }
  });

});
Angel
  • 1,670
  • 1
  • 11
  • 14