Develop Reference

How to pass the object of data to the bootstrap model using jQuery or JavaScript

i have created the bootstrap model and i am opening the the model on button click, Now the problem is i want to pass the object of data to that model so once the user enter the comment in the model i will get the comment as well as my object back for identification, can some one help me out with the solution
MY HTML CODE
<div class="modal" tabindex="-1" role="dialog" id="mymodal">
<div class="modal-dialog displayMainmodel" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: #aeb3b7; color:White">
<h5 class="modal-title">Insert Your comment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div style="text-align: center;">
<textarea [value]="precomment" #comment placeholder="Enter your Comment"
rows="4" cols="50"
style="resize: none; border: 1px solid #aeb3b7;width: 100%;">
</textarea>
</div>
</div>
<div class="modal-footer" style="justify-content: center; border:none">
<button type="button" class="btn btn-primary"
style="background-color: #3CB371;"
(click)="submitcomment(comment.value)">Submit</button>
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My Ts code
openpopup(datacommentid,name){
console.log("data is",datacommentid,name)
this.data.forEach(element => {
console.log("sjdksa",element)
if(element.id==datacommentid){
this.precomment=name.comments
}
});
$('#mymodal').modal();
}
submitcomment(mycomment){
console.log("the comment is",mycomment)
}

Use shown.bs.modal event
Here is the demo: https://jsfiddle.net/chille1987/ozud4cgq/9/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('shown.bs.modal', function (e) {
var element = $('<div>Modal is opened</div>');
$('.modal-body').append(element);
})

Find the active bootstrap modal using javascript

I do have dynamically generated modals with different Ids in it. I want to know which modal is opened/ shown to the user. I have a solution, If I do know the id of the model as
$('#modelId').on('show.bs.modal', function (event) { // modelId is dynamic
var button = $(event.relatedTarget);
var productid = button.data('target');
console.log(productid)
});
But How to get the modalId when we do not know which modal is triggered by the user?

Attach the event listener to the document instead. Example:
$(document).on('show.bs.modal', function(event) { // modelId is dynamic
var button = $(event.relatedTarget);
var productid = button.data('target');
console.log(productid)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch exampleModal
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
Launch exampleModal2
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

bootstrap modal form not submitted the user In rails 5

I have form inside modal and want to create a user. when I click on submit nothing happens.
How can I submit the modal form and save the content of the modal in other page in rails application with Ajax?
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#getbootstrap">Open modal for #getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="text" class="col-form-label">firstname:</label>
<input class="form-control" id="text2"></input>
</div>
<label for="text" class="col-form-label">lastname:</label>
<input class="form-control" id="text2"></input>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data- dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">submit</button>
</div>
</div>

By clicking submit button the text field value will be passed to the controller via Ajax method
$(document).ready(function(){
$("#submit").click(function(){
alert($("#name").val());
});
$.ajax({
type: 'POST',
url: 'path/to/controller',
data: {'value' : $("#name").val() }
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<input type="text" name="name" id="name"></input>
<input type="submit" id="submit"></input>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Change href on modal event with jQuery

I'm trying to change the href of the link in the modal using the id of the clicked link. Though using prop works fine in the console it doesn't seem to work in my snippet. I don't know what i'm doing wrong...
My link:
<a data-toggle="modal" data-target="#myModal" id="1" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
My script :
$('#myModal').on('show.bs.modal', function(e) {
var $modal = $(this),
myId ='home.php?menu=15&status=delete&id=' + e.relatedTarget.id;
$modal.prop('href',myId);
})
My Modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">........</h4>
</div>
<div class="modal-body edit-content">
<p><strong>..........</strong></p>
</div>
<div class="modal-footer">
<a href="home.php?menu=15&status=delete&id=5" id="modalLink" class="btn btn-default" >yes</a>
<button type="button" class="btn btn-primary "data-dismiss="modal">no</button>
</div>
</div>
</div>
</div>

Button for the 2nd Bootstrap modal does not function (not clickable)

I have 2 bootstrap models on the same page, the first modal opens and runs as expected. After saving the form data in the first modal, a button is visible to open up the second modal. The button however is not clickable:
<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>
I've found a few that have had similar problems with two modals on the same page but there appears to be no common causes. How can I fix this? Preferably I would like the button to work. Iif for whatever reason it's not possible, I'm ok with JS automatically opening the second modal after the 1st one closes. I have also been unsuccessful with getting that to work. I've triple checked that all my tags are closed and correctly spaced. I've omitted a lot of the form content within the modals in the code below for purposes of brevity. I've also included my JS at the end of the page that directs the visibility of the modals.
<div class="add_left">
<div id="crop-avatar" class="container">
<div class="bigpicture"> <img src="" > </div>
<div class="avatar-view" title="Add new listing"> <img src="../0images/cropy.jpg" alt="Listing Image" width="400px"</div>
<!-- modal 1 -->
<div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form name="avatar-form" class="avatar-form" method="post" action="crop-avatar.php" enctype="multipart/form-data">
<div class="modal-header"> </div>
<div class="modal-body">
<div class="avatar-body">
<div class="row"> </div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
<button id="nxtbutt" class="btn btn-primary avatar-save" disabled type="submit">Save Image</button>
</div>
</form>
<div class="loading" tabindex="-1" role="img" aria-label="Loading"></div>
</div>
</div>
</div>
</div>
</div>
<div class="add_right">
<h4 class="instructiondata" style="padding-top:20px">Click the button below to add your pdf file and data:</h4>
<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>
<!-- modal 2 -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<form name="data-form" class="data-form" method="post" action="add_data.php" enctype="multipart/form-data">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<h2>Listing Designation</h2>
<fieldset style="padding-left:5px;">
<legend> Designation </legend>
</fieldset>
</div>
<div class="modal-footer">
<input class="avatar-src" name="avatar_src" type="hidden">
<input type="hidden" name="id" value="">
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
<button id="nxtbutttwo" class="btn btn-primary avatar-save" type="submit">Save Listing</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<script Content-Type: application/javascript src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$("#avatarInput").on("change", function() {
$("#nxtbutt").prop('disabled', !$(this).val());
});
$(document).ready(function(){
$(".add_right").hide();
$(".add_display").hide();
$(".bigpicture").hide();
$(".instructiondata").hide();
});
$( "#nxtbutt" ).click(function () {
$(".add_right").show();
$(".bigpicture").show();
$(".add_display").hide();
$(".avatar-view").hide();
$(".instruction").hide();
$(".instructiondata").show();
});
$( "#nxtbutttwo" ).click(function () {
$(".add_right").show();
$(".add_display").show();
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
Thank you in advance!

Don't use show() and hide() here.
You can close and open using the modal method:
$("#secondModalButton").click(function() {
$("#firstModal").modal('hide');
$("#secondModal").modal('show');
});
Or (I just noticed) you can do it purely with bootstrap attributes:
<button type="button" class="btn btn-primary" id="secondModalButton"
data-dismiss="modal"
data-toggle="modal"
data-target="#secondModal">Second modal</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#firstModal">
Launch first modal
</button>
<!-- First Modal -->
<div class="modal fade" id="firstModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
First Modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="secondModalButton" data-dismiss="modal" data-toggle="modal" data-target="#secondModal">Second modal</button>
</div>
</div>
</div>
</div>
<!-- Second Modal -->
<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="secondModal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
Second modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>