CODEWITHSUNDEEP
javascriptphpjqueryhtml
Ikong
Ikong

Reputation: 2570

jQuery getting the id of button inside other elements populated by loop

I have an html elements completely populated by foreach loop. How do I get the value of the button for instance the delete button? Or how to get the link edit button?

@foreach($data as $d)

          <div class="col-xs-6 col-md-2">
            <a href="#" class="cab" id="thumbnail{{ $d->id }}" data-toggle="popover" data-trigger="focus">
              <img src="{{ asset('images/cabinet.png') }}" alt="..." class="img-thumbnail" >
              <p class="text-center">{{ $d->description }}</p>
            </a>
          </div>

           <!-- loaded popover content -->
           <ul id="popover-content" class="list-group{{ $d->id }}" style="display: none">
             <a href="#" class="list-group-item">Share</a>
             <a href="#" id="edit{{ $d->id }}" class="list-group-item open-modal" data-value="{{ $d->id }}">Edit</a>
             <button class="list-group-item mt-sweetalert-delete" value="{{ $d->id }}">Delete</button>
           </ul>


        @endforeach

Upvotes: 1

Views: 188

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42354

You can target the desired elements with regular jQuery / JavaScript selectors. It depends when exactly you want to grab the elements, but considering your elements are generated dynamically, you'll want to hoist the scope and make use of event delegation.

In the following example, I attach an event listener to the <body> tag, which is useful as it will always exist on the page at page load. This listener looks for clicks on any <button> element, and if it finds one, it logs the button's value. Because the handler is on the <body>, this will work for buttons that are dynamically generated.

This can be seen in the following example (in which I turned on the display of the <ul>), which triggers when Delete is clicked. The element you are clicking on is stored as e.target:

document.getElementsByTagName("body")[0].addEventListener("click", function(e) {
  if (e.target && e.target.matches("button")) {
    console.log("Clicked: " + e.target.value);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-xs-6 col-md-2">
  <a href="#" class="cab" id="thumbnail{{ $d->id }}" data-toggle="popover" data-trigger="focus">
    <img src="{{ asset('images/cabinet.png') }}" alt="..." class="img-thumbnail">
    <p class="text-center">{{ $d->description }}</p>
  </a>
</div>

<!-- loaded popover content -->
<ul class="list-group{{ $d->id }} popover-content" style="display: block">
  <a href="#" class="list-group-item">Share</a>
  <a href="#" id="edit{{ $d->id }}" class="list-group-item open-modal" data-value="{{ $d->id }}">Edit</a>
  <button class="list-group-item mt-sweetalert-delete" value="{{ $d->id }}">Delete</button>
</ul>

Also note that you're creating your popover-content ID inside of a loop, which will provide invalid markup. This invalid markup will also cause JavaScript selectors to only return the first result when you try and target those elements. I've switched this to a class in my example.

Hope this helps!

Upvotes: 1

Related Questions