Laravel: How to show dynamic data on popup modal related to image on every image click-CodePudding

I have to setup a Novel setup means I have to show episodes of every related novel on its click.

   public function Novels()
    {
        $Novels = Novel::latest()->get();
        foreach($Novels as $novel)
        $novel->episodes = NovelEpisode::where('novel_id', $novel->id)->get();
        
        return view('novels.Novels',compact('Novels'));
    }

Here's my laravel controller blade code .

and Here's my blade code with a modal inside.

 <div >
                @foreach ($Novels as $novel)
                <div >
                    <div >
                        <div >
                            <img src="{{ asset('uploads/user/2/novels/'. $novel->cover) }}"  alt="img" id="myImg" >
                            <h5 >{{ $novel->name }}</h5>
                            <p >{{ $novel->description }}</p>
                            <p >قیمت۱۸۰۰روپے</p>
                            <div  id="myModal" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
                                <div >
                                    <div >
                                        <div  id="modaldata">
                                            @foreach ($novel->episodes as $episode)
                                            <div >
                                                <div >
                                                    <div >
                                                        <div >
                                                            <div >
                                                                <a href="{{route('episode',['id'=>$episode->id])}}" >
                                                                    <div >
                                                                    <p >{{$episode->episode}}<span ><i ></i></span></p>
                                                                    </div>
                                                                </a>                                               
                                                            </div>
                                                        </div>                                                                  
                                                    </div>
                                                </div>          
                                            </div>
                                            @endforeach 
                                        </div>                                                   
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>            
                @endforeach
            </div>

Here's my jquery code which i'm using to popup modal.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('#myImg').click(function(){
              $('#myModal').modal('show')
        });
    });
    </script>

CodePudding user response：

When you want to put an event listener on multiple doms, you need to use a class and not an id since ids attribute can target only one dom.

$('.myImg').click(function(){

Next to target the right modal for each image, you need to have a way to differentiate between them. (also give each modal a unique id)

<div  id="myModal-{{$novel->id}}" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >

Now you only need a way to get the correct modal id to show it. one easy solution is to use data-x attributes

<img src="{{ asset('uploads/user/2/novels/'. $novel->cover) }}"  alt="img" data-id="{{$novel->id}" >

And that's it.

$('.myImg').click(function(){
    let id = $(this).data('id');
    $('#myModal-' id).modal('show')
});

Another Solution without using data-x attribute

use classes and target the modal with find() or siblings()

 <img src="{{ asset('uploads/user/2/novels/'. $novel->cover) }}"  alt="img" > 
//...used class

<div  data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
//... removed the id (not unique)

And the JS

$('.myImg').click(function(){
    let modal = $(this).parent().find('.modal')[0];
    $(modal).modal('show')
});
//or
$('.myImg').click(function(){
    let modal = $(this).siblings('.modal')[0];
    $(modal).modal('show')
});

This is possible since both the img and the modal are on the same level.