Cloned button can't open modal - javascript

The 2nd button that I cloned can't open the modal... how can I fix that?
enter link description here


Use clone(true) according to the documentation
$(document).ready(function() {
$(".myBtn").click(function() {
$("#myModal").modal();
});
$("#mode").click(function() {
$(".ok").clone(true).appendTo("#clones");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="ok" id="notok">
<select>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<button type="button" class="myBtn" id="myBtn">Open Modal</button>
</div>
<div id=clones></div>
<button id="mode">Clone</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>


Try to delegate event
$("body").on('click', '.myBtn',function(){
$("#myModal").modal();
});


Pass true in clone
$(document).ready(function(){
$(".myBtn").click(function(){
$("#myModal").modal();
});
$("#mode").click(function(){
$(".ok").clone(true).appendTo("#clones");
});
});
Here is the link
https://jsfiddle.net/f7hjh1gf/1/


Try this-
$(document).ready(function(){
$(".myBtn").click(function(){
$("#myModal").modal();
});
$("#mode").click(function(){
$(".ok").clone(true).appendTo("#clones");
});
});

Related

How can i change value of clicked button after open a bootstrap modal using JavaScript?

I have multiple buttons where i clicked than open a bootstrap modal with clicked button value, its working fine. Now i want to change value of clicked button when close bootstrap modal.
What i tried:-
$("input").click(function(e){
var idClicked = e.target.id;
$('#myModal').modal('show').find('.modal-title').text(idClicked);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<input id="btn1" type="button" value="Submit1" />
<input id="btn2" type="button" value="Submit2" />
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary submitModalBtn">submit</button>
</div>
</div>
</div>
</div>

Try this below code:
<input id="btn1" type="button" value="Submit1" />
<input id="btn2" type="button" value="Submit2" />
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<input type="hidden" id="hdncurrent" >
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary submitModalBtn">submit</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(e){
$("input").click(function(e){
var idClicked = e.target.id;
$('#myModal').modal('show').find('.modal-title').text(idClicked);
$("#hdncurrent").val(idClicked);
$('#myModal').on('hidden.bs.modal', function () {
$("#" + $("#hdncurrent").val()).attr("value","test")
})
});
})
</script>

Your jquery will be like this:
<script type="text/javascript">
$("input").click(function(e){
var idClicked = e.target.id;
$('#myModal').modal('show').find('.modal-title').text(idClicked);
$(".close").click(function(){
var btid="#"+idClicked;
$(btid).val(idClicked);
});
});
</script>

You can just save the clicked button id and then on modal close event, you can change the value attribute based on the saved button id. Check out my fiddle. For now, I just changed the value to someOtherValue of the clicked button. You can change it to your expected value.
Please note, there can be multiple ways to perform this action. Kindly let me know if this is not what you are expecting.
var clicked_button_id = '';
$("input").click(function(e){
clicked_button_id = $(this).attr('id');
var idClicked = e.target.id;
$('#myModal').modal('show').find('.modal-title').text(idClicked);
});
$('#myModal').on('hidden.bs.modal', function () {
$("#"+clicked_button_id).val('someOtherValue');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<input id="btn1" type="button" value="Submit1" />
<input id="btn2" type="button" value="Submit2" />
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary submitModalBtn">submit</button>
</div>
</div>
</div>
</div>

trying to use the same function with similar class names Javascript and HTML

hello I know you are not able to have similar ID tags because of the fact there will be a console error, but in my scenario, I am trying to have a modal display with different info in it similar buttons are clicked with the same class name
for example
<div class="source">
<h1 data-target="2"></h1>
<button class="showBtn">BTN</button>
</div>
<div class="source">
<h1 data-target="3"></h1>
<button class="showBtn">BTN</button>
</div>
<div class="modal hide">
<div id="modalOuput"></div>
</div>
JS (I already have the modal showing up, my problem would be to have the modal display with unique identifiers in the modal also display for example)
const modalOutput = document.querySelector('#modalOutput');
const sourceData = document.querySelector('.source').getAttribute('data-target);
modalOutput.textContent = sourceData
thank you

$(document).ready(function(){
$("#modalOutput").on('show.bs.modal', function(e){
var button = $(e.relatedTarget);
var dToPopulate = button.data('whatever');
var modal = $(this);
modal.find('.modal-body').html(dToPopulate);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="modalOutput" 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"><!-- data-whatever attribute of selected button--></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="source">
<h1></h1>
<button data-whatever="2" class="showBtn" data-toggle="modal" data-target="#modalOutput">BTN</button>
</div>
<div class="source">
<h1></h1>
<button data-whatever="3" class="showBtn" data-toggle="modal" data-target="#modalOutput">BTN</button>
</div>
The code will select the value of data-whatever and put it into modalOutput.

Bootstrap modal event doesn't trigger

I'm trying to bind an some code to trigger when my modal is opened. I have no trouble opening the modal but for some reason i can't figur out my event doesn't triggered.
Here is my modal
<div id="details" class="modal fade" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p id="modal-body" class="text-defualt text- text-normal text-left"></p>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
And here is my JS script i'm trying to get to run
<script>
$(function(){ // let all dom elements are loaded
$("#details").on("show.bs.modal", function (e) {
alert("event fired");
});
})
</script>'
I'm using bootstrap 3.3 and jQuery v1.11.2
Let me know if any more info would help solve the issue
Thanks in advance

Please try below code:
Assuming you are opening modal popup on click of any button; add below code, it should work:
Refer this fiddle
<script>
$(function(){ // let all dom elements are loaded
$(document).on('show.bs.modal','#details', function () {
alert('hi');
});
});
</script>

Your code fires the modal and the alert. Did you remember to include JQuery?
Try this CodePen Demo
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#details">
Launch demo modal
</button>
<div id="details" class="modal fade" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p id="modal-body" class="text-defualt text- text-normal text-left">I work</p>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function() {
$("#details").on("show.bs.modal", function(e) {
alert("event fired");
});
});
</script>

Here you go with a solution https://jsfiddle.net/kxr2subr/
$(function(){ // let all dom elements are loaded
$("#details").on("show.bs.modal", function (e) {
alert("event fired");
});
$('button').click(function(){
$('#details').modal({show: true});
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button>
Open Modal
</button>
<div id="details" class="modal fade" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p id="modal-body" class="text-defualt text- text-normal text-left"></p>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
I guess you are missing bootstrap.min.js file.

bootstrap modal disappearing when dragging with containment option

I have a bootstrap modal that I want to be draggable. For draggable I tried to restrict it using, containment but it disappears when drag action is done for the first time. Here is my code.
$("#feedbackdialog").modal();
$('#feedbackdialog').draggable({
handle: ".modal-header",
cursor: "crosshair",
containment: "parent"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div id="feedbackdialog" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Comment</h4>
</div>
<div class="modal-body">
<div class="active" id="segtab">
<div align="center" class="form group row">
<textarea id="fdtext" class="form-control form-group" placeholder="Sentence Comment here"></textarea>
<button id="savefdb" class="btn">OK</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Firefox version 45.0.2
Run the code in full screen mode(View Full page after running the code snippet) to reproduce the issue. It seems that that modal dialog is moving to top(when run in normal mode).

<div class=" modal fade " id="modalid" tabindex="-1" role="dialog">
<div class="modal-dialog" id="feedbackdialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Comment</h4>
</div>
<div class="modal-body">
<div class="active" id="segtab">
<div align="center" class="form group row">
<textarea id="fdtext" class="form-control form-group" placeholder="Sentence Comment here"></textarea>
<button id="savefdb" class="btn">OK</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#modalid").modal();
$('#feedbackdialog').draggable({
handle: ".modal-header",
cursor: "move",
containment: "parent"
});
</script>
Give two different id's for modal and draggable div and use modal id as containment parent

Try this snippet. Hope this will help you.
$(function(){
$("#myModal").draggable({
handle: ".modal-dialog"
});
});
.modal
{
overflow: hidden;
height:250px;
width:300px;
}
.modal-dialog{
margin-right: 0;
margin-left: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>
<div class="side-menu" id="sideMenu">
<menu>
<ul class="nav nav-tabs nav-stacked">
<li>Click Me
</li>
</ul>
</menu>
</div>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Settings</h4>
</div>
<div class="modal-body">
<p>Settings</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Greetings!

e.preventDefault is not working while openning A modal after changing modal-text. modal is openning without changing content

I am trying to change the modal-body text when modal trigger button is clicked . But modal is openning but modal-body text is not changing .
This is the code for modal
<button type="button" class="btn btn-info open-modal" data-remote="false" data-toggle="modal" data-target="#myModal">Register</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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Then source for preventing default event
$('.open-modal').click(function(e)
{
e.preventDefault();
alert('hello i am jquery');
$('#myModal').modal('show');
});
Why alert('hello i am jquery'); line is not executing ?

This may happen when your HTML takes precedence over jquery since your button specifes the target modal to open with the following attributes
data-remote="false" data-toggle="modal" data-target="#myModal"
Remove those and then the jquery will be fine
$('.open-modal').click(function(e)
{
e.preventDefault();
alert('hello i am jquery');
$('#myModal').modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info open-modal" >Register</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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

To trigger a modal to show programmatically, you can use the following:
$('#myModal').modal('show');
You can also have an event handler being triggered and add your code in there:
$('#myModal').on('shown', function() {
alert('hello i am jquery');
})

In my case: Below code worked properly if the case fails:
$('#myModal').modal({show: 'false'});

Categories