How to change content of a modal at each opening - javascript

I have'a modal ( I use twitter bootstrap 2.3.2 and I need to use it please dont say to use bootstrap3), and I want to show different content based on the clicked button. In other words, there are multiple buttons that are added dynamically into dom, and based on the clicked button, I need to show different content. Currently, it always shows the content of the first clicked button no matter where I'am pushing. Here is my code:
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
<h3 id="myModalLabel">Query Name</h3>
</div>
<div class="modal-body">
<div id="graph" style="position:relative;overflow:hidden;cursor:default;" class="{{getViewType}}">
<center id="splash" style="padding-top:230px;">
<img src="../images/loading.gif">
</center>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
And this is my handler:
$(document).on('hidden','#myModal',function(){
console.log('it comes here'); // this is printed every time I close modal
$(this).removeData('modal');
});

Perhaps check that the id's of the dynamically added buttons are unique. Also that any function code that will run when they're clicked, is also dynamically added otherwise it won't run. It would certainly help to see the code for the buttons.

DEMO
Ok.. I prefer .shown event of modal for this case and a global variable to store the data of clicked button as below
var dataToShow=""; //global variable
//A button click event to store data
$('button').on('click',function(){
dataToShow=$(this).text();//For DEMO purpose am storing text of button clicked in dataToShow
});
$(document).on('shown','#myModal',function(){
//Will be triggered when modal is opened
alert(dataToShow);//Just for verification
$('.modal-body .datadisplay').html(dataToShow);
//assign the value in a separate div inside modal-body so that you will not replace anything else each time
});
Now since the button is dynamically created, I would suggest to use event delegation here to attach event to button
$(document).on('click','.yourbuttonClass',function(){
dataToShow=$(this).text();
});
Now if you want you can make use of
$(document).on('hidden',"#myModal",function(){
//clear the contents inside an element added i.e. .datadisplay inside modal-body
$('.modal-body .datadisplay').empty();
})

Related

How to hide a modal and show another one using jquery?

I open a modal, then on click of a div within the modal I want to close that modal and open another one. But when I do this it closes the first modal and only shows the background of the second modal with the body not displayed.
My HTML is:
<div id="test-modal" class="modal hide fade" data-keyboard="true">
<div class="modal-body">
<div id="option"><p>Click here to show the next modal</p></div>
</div>
</div>
<div id="test-modal2" class="modal hide fade" data-keyboard="true">
<div class="modal-body">
<p>modal show after a hide doesn't work?</p>
</div>
</div>
and my jquery is:
$('.option').click(function() {
$('#test-modal').modal('hide');
$('#test-modal2').modal('show');
});
This can help:
Remove hide class from modals divs
You use .option in your selector, but in html you use id="option", so change them
Working version
My Stupid mistake the jquery works. I accidently didnt close off the first modal properly which is why the animation wouldnt finish and cause the second modal to not load. I simply put the secondary modal on top of the first modal to test and it worked.
Please try using this data-dismiss attribute on close button.
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

Bootstrap modal stopping checkbox from selecting

I have a checkbox on the bottom of my page. When the user clicks it, I want a popup to show up. Everything works except the toggling of the checkbox. When I click the checkbox using the code below the pop up appears but the box does not check. Any idea why?
The jQuery:
$('#confirm-final').on('show.bs.modal', function (e) {
$(this).find('.danger').attr('href', $(e.relatedTarget).data('href'));
});
The checkbox:
<label class="checkbox-inline"><asp:CheckBox ID="chkFinalSubmission" runat="server" data-toggle="modal" data-target="#confirm-final"/>Final Submission</label>
The popup:
<div class="modal fade" id="confirm-final" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Final Submission
</div>
<div class="modal-body">
If you check final submission and submit this ad note, <strong>you will not be able to change it anymore.</strong> It will be permanently stuck in readonly mode.
</div>
<div class="modal-footer">
<asp:Button ID="btnConfirmFinal" runat="server" Text="Got it" class="btn btn-default" data-dismiss="modal"/>
</div>
</div>
</div>
As for the why, the event that is fired to open a modal contains e.preventDefault(), which cancels any event that might have occurred by clicking the modal-invoking element. If it's a link, the href doesn't get followed but the modal opens instead. If it's a checkbox, the actual check is cancelled. This is built-in behavior, and you can't prevent it.
How to solve it:
In Bootstrap 3 you have access to the relatedTarget property of the event that fired the modal. Since your function already uses relatedTarget I'm assuming you use Bootstrap 3 indeed. You could just add the following rule to your existing jquery function:
$(e.relatedTarget).prop('checked', !$(e.relatedTarget).prop('checked'));
(This sets the checkbox to the inverse of the already existing 'checked' state, aka it toggles it on and off everytime you click).
Also, are you sure the rest of your code works? You refer to $(e.relatedTarget).data('href') but your checkbox has no data-href. Did you mean data('target') instead?

How to catch event from bootstrap modal

I am using modal from bootstrap
<div aria-hidden="hide" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title"></h4>
</div>
<div id="myModalBody" class="modal-body modalScroll"></div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
This is my main modal box and I send some information and show modal when I need to inform user at the moment. But my idea is using this modal to show images and when user choose one I will save as avatar. So I created function like below:
<script>
$('#avatar').click(function() {
showMessage();
});
$('#eee').on('click', function() {
alert('333');
});
function showMessage(){
var txto = '<div id="eee">test me test</div>';
$('#myModalLabel').append('Coose Your avatar');
$('#myModalBody').append(txto);
$('#myModal').modal('show');
}
</script>
Now when I go on page and click div id = avatar I will see modal window but when I click: test me I have no result. So is it some way to do this?
try adding:
$('#eee').on('click', function() {
alert('333');
});
inside showMessage() ... your problem is that you have to rebind events to dynamically added elements if they are added after (document).ready or in this case the page rendering...
whenever i do this i just make a big function called rebindEvents() that I can call into to let the page know about my new items... just a warning, its not great for performance if you wind up with a lot of jquery elems you have to deal with, knockout is a much better library for dealing with dynamic html then doing it this way.
also, i'm assuming you are going to present a list of avatars, so you may want to swap eee to a class instead of id...

Show DIV element in Twitter Bootstrap Modal along with DOM

I have a simple div tag, that contains a button. When ever user clicks on this button it simply shows an alert.
<div id="myDiv">
<input type="button" id="btn" value="Click Me" />
</div>
and I also have a empty twitter bootstrap modal.
<div class="modal hide" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body"></div>
</div>
I have a second button, when ever the user clicks on it, it opens the bootstrap modal. I want to show "myDiv" in bootstrap modal when ever the user clicks on the second button. I want "myDiv" to be present in when ever modal opens and also I want to be present in my HTML document. So that I can always access it with out creating second button in modal.
Any idea how can I do that ?
I think this is what you were going for so basically on the modal show we append that button to the modal body.
$("#myDiv") .appendTo(".modal-body");
but we aren't done because after modal close we need to get it back in the body so we do:
$('#myModal').on('hide.bs.modal', function (e) {
$("#myDiv") .prependTo("body");
})
Here is a working fiddle:
http://jsfiddle.net/zcb3h/2/
I hope this is what you were looking for.

Display Bootstrap Modal using javascript onClick

I need to be able to open a Twitter bootstrap modal window using the onClick="" or similar function. Just need the code to go into the onClick="". I am trying to make a click-able div to open the modal.
Code Excerpts:
Div Code:
<div class="span4 proj-div" onClick="open('GSCCModal');">
Modal Div Code:
<div id="GSCCModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Javascript:
function open(x){
$(x).modal('show');
}
You don't need an onclick. Assuming you're using Bootstrap 3 Bootstrap 3 Documentation
<div class="span4 proj-div" data-toggle="modal" data-target="#GSCCModal">Clickable content, graphics, whatever</div>
<div id="GSCCModal" class="modal fade" 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" aria-hidden="true">× </button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
</div>
</div>
If you're using Bootstrap 2, you'd follow the markup here:
http://getbootstrap.com/2.3.2/javascript.html#modals
I was looking for the onClick option to set the title and body of the modal based on the item in a list. T145's answer helped a lot, so I wanted to share how I used it.
Make sure the tag containing the JavaScript function is of type text/javascript to avoid conflicts:
<script type="text/javascript"> function showMyModalSetTitle(myTitle, myBodyHtml) {
/*
* '#myModayTitle' and '#myModalBody' refer to the 'id' of the HTML tags in
* the modal HTML code that hold the title and body respectively. These id's
* can be named anything, just make sure they are added as necessary.
*
*/
$('#myModalTitle').html(myTitle);
$('#myModalBody').html(myBodyHtml);
$('#myModal').modal('show');
}</script>
This function can now be called in the onClick method from inside an element such as a button:
<button type="button" onClick="javascript:showMyModalSetTitle('Some Title', 'Some body txt')"> Click Me! </button>
A JavaScript function must first be made that holds what you want to be done:
function print() { console.log("Hello World!") }
and then that function must be called in the onClick method from inside an element:
<a onClick="print()"> ... </a>
You can learn more about modal interactions directly from the Bootstrap 3 documentation found here:
http://getbootstrap.com/javascript/#modals
Your modal bind is also incorrect. It should be something like this, where "myModal" = ID of element:
$('#myModal').modal(options)
In other words, if you truly want to keep what you already have, put a "#" in front GSCCModal and see if that works.
It is also not very wise to have an onClick bound to a div element; something like a button would be more suitable.
Hope this helps!
I had the same problem, after researching a lot, I finally built a js function to create modals dynamically based on my requirements. Using this function, you can create popups in one line such as:
puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.'})
Or you can use other complex functionality such as iframes, video popups, etc.
Find it on https://github.com/aybhalala/puymodals For demo, go to http://pateladitya.com/puymodals/

Categories

Resources