Develop Reference

Laravel: how to pass id to a modal for editing

In Laravel 8 app, I'm using a model to add items. In my view file, I'm doing it as follows
Create new item
<div class="modal fade" id="add-item-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="loginmodal-container">
.... <form comes here>
</div>
</div>
</div>
As said, this works for adding items.
I now also want to use a similar logic for editing items. So I have added the following on my page
<em class="fa fa-pencil"></em>
<div class="modal fade" id="add-item-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="loginmodal-container">
.... <form comes here>
</div>
</div>
</div>
The problem however is that I need to pass the id of the current item (I wish to edit) to the modal box so that the modal can display the values for the item I wish to update.
How can this be done?

You can usedataattribute to pass some data into Bootstrap modal.
Buttons in the loop
#foreach()
<a data-toggle="modal" data-id="{{$member->name}}" href="#UserDialog" class="user_dialog">Details</a>
#endforeach
Bootstrap model
<div class="modal hide" id="UserDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="user_name" id="user_name" value=""/>
</div>
</div>
And little JavaScript
$(document).on("click", ".user_dialog", function () {
var UserName = $(this).data('id');
$(".modal-body #user_name").val( UserName );
});
That's it
Little demo here : http://jsfiddle.net/Au9tc/6247/

Bootstrap Modal inside modal closes parent modal

Working on bootstrap modal here i'm trying to add modal inside another modal in html as well. Is there a way using jquery target current current modal only.
<div class="modal fade role=" dialog ">
<div class="modal-dialog modal-dialog-centered ">
<!-- Modal content-->
<div class="modal-content ">
<div class="modal-header ">
<button type="button " class="close " data-dismiss="modal " aria-label="Close ">
<svg class="icon-utility-close ">
<use xlink:href="#close-modal-icon "></use>
</svg>
</button>
</div>
<div class="modal-body justify-content-center ">
<p>Text 1</p>
</div>
</div>
</div>
<div class="modal fade role="dialog">
<div class="modal-dialog modal-dialog-centered">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<svg class="icon-utility-close">
<use xlink:href="#close-modal-icon"></use>
</svg>
</button>
</div>
<div class="modal-body justify-content-center">
<p>Text 2</p>
</div>
</div>
</div>
</div>
</div>
I was try to add different id to the close button and hide modal but it is not working. Can anyone point me in the right direction how to achieve.

Why is the id im getting within this for loop always returning 1? Where as the delete button in the same loop is unique and working properly? [duplicate]

I list out my users. It works perfectly, every user has their own Bootstrap card. But when I click on "more" to trigger the Modal, every "more" button gives the same Modal, which is the pop-up window for User #1. So no matter which user's data interests me, it always shows the same Modal. I want it to work properly, so that whenever I click on the more button the window pops up with that user's data.
<div th:each="user : ${listUsers}" class="card mb-3">
<div class="row g-0">
<!-- <div class="col-md-3">
<img src="/images/noimage2.png" alt="...">
</div>-->
<div class="col-md-12">
<div class="card-body">
<h3 class="card-title"
th:text="${user.name}">Name</h3>
<!-- Button trigger modal -->
<button type="button" class="btn btn-secondary btn-sm"
data-bs-toggle="modal" data-bs-target="#exampleModal">
<i class="fas fa-address-card"></i> More
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div
class="modal-dialog modal-dialog-scrollable modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"
th:text="${user.name}">Modal title</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<span class="d-inline"
th:text="${user.address}"></span> | <span
th:text="${user.phoneNumber}"></span> | <span
th:text="${user.email}">email</span>
</div>
<p class="card-body"
th:text="${user.description}"></p>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<p>
</div>

All of your buttons are targetting #exampleModal -- you can see here:data-bs-target="#exampleModal". If you want the buttons to work, you need to give each of your modals a unique id and then target the correct modal with the correct button. So...
Add the status variable onto your loop.
<div th:each="user, status : ${listUsers}" class="card mb-3">
Use the ${status.index} variable to create a unique id for your target:
<button type="button" class="btn btn-secondary btn-sm"
data-bs-toggle="modal" th:data-bs-target="|#userModal${status.index}|">
<i class="fas fa-address-card"></i> More
</button>
Use the ${status.index} variable to create a unique id for your modal:
<div class="modal fade" th:id="|#userModal${status.index}|" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">

How do I stop a video once I close the modal?

I am very new to bootstrap and am trying to make my video sound stop playing when I click out of the modal.
I have looked on similar threads and tried the solutions but none seem to be working for me.
I know there must be a jQuery solution somewhere! I also want it to apply to everything in the class 'portfolio-modal modal fade'.
There are also two ways of closing - the X in the top right corner and the button underneath the video. Does this make a difference?
Thank you!
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Growing, Custo by LIDL</h2>
<p class="item-intro text-muted">Music Production for Growing, Custo.</p>
<iframe width="500" height="281" src="https://www.youtube.com/embed/knjuAUOWgas" frameborder="0" allowfullscreen></iframe>
<p>Description</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>

jquery dynamic image gallery popup show all images

i want to create dynamic model popup so i have write below js code..but when i have click on single image then model pop up show all images content in dynamic created div . i want same image and its content in model popup.
<script>
$("#pop").on("click", function() {
$('#imagepreview').attr('src', $('#imageresource').attr('src'));
$('#imagemodal').modal('show');
});
</script>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12" >
<div class="row">
<div id="pop">
<a href="#" class="dialogpopup" style=" height: auto;width: 600px;display: -webkit-inline-box;">
<div ng-repeat="Spaces in SpaceList" style="height:auto!important;display: table-caption;">
<span>{{Spaces.Name}}</span>
<img id="imageresource" src="{{Spaces.Image}}" style="width:200px; height: 200px;">
<span>{{Spaces.MaxCapacity}}</span>
</div>
</a>
</div>
<!-- Modal -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">{{Spaces.Name}}</h4>
</div>
<div class="modal-body addright" id="modelimg1" ng-repeat="Spaces in SpaceList">
<img src="{{Spaces.Image}}" id="imagepreview" style="width:400px; height: 270px;">
<p class="parapadding">
Name:{{Spaces.Name}}<br />
Description:{{Spaces.Description}}<br />
Size:{{Spaces.Size}}<br />
Capacity:{{Spaces.MaxCapacity}}<br />
Configuration:<br />
</p>
</div>
</div>
</div>
</div>
</div>
</div>

ID param of any tag should be unique. And in your repeater you have same ids. Change it to smth like id="{{'imagepreview' + $index}}" and
ng-repeat="Spaces in SpaceList track by $index"