Here's the script. When I click it on load, works like a charm. When I click it via a dynamically created element, the first click sees the actual html shift (kind of stretch and go back). It does however work on the second click consistently.
<script>
$(document).on('click', '.iframe_add', function(){
var element = $(this).attr('name');
$('#iframe_target').html('<iframe src="https://104.131.18.58/t3/default/ajax_new_secured_asset_debt_creator?all='+element +'" frameborder="0" width="580" height="300" scrolling="yes" id="myFrame"></iframe>');
});
</script>
I dont really get whats going on and Id appreciate any help.
P.S. I saw this one, but am not sure if it applies (seems to deal with some datepicker issues)
jquery on.click doesn't work on first click (with a dynamic element)
EDIT:
Here is the HTML
<div id="iframe_modal" 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">X</button>
<h4 class="modal-title">Edit Information</h4>
</div>
<div id="iframe_target" class="modal-body">
</div>
</div>
</div>
</div>
EDIT 2 - Console Logs (all the same):
New
Your console log:
New
reveals that one of the classes is iframe_input.
Your JavaScript is telling us that you want the click event to fire when an element with a class named .iframe_add is clicked.
Try
$(document).on('click', '.iframe_input', function(){
Ok. So here is the hackity-hack solution I came up with (if you cant beat em -- and by em, I mean javascript, join em):
parent.document.getElementsByClassName("iframe_input")[0].click();
I just force a click on the first input element when the modal hides and this seems to resolve the behavior. That being said, this seems really hacky and Im all ears as to why this is wrong but it does work like a charm....
You must check if you don`t get error -> Cannot read property 'addEventListener' of null
If yes you must add code document.getElementById('xxx_element_name_xxx').addEventListener('click', xxx_function_name_xxx, true); after place where your element xxx_element_name_xxx was declared.
Got the same issue in my ASP.Net Web Form. My case is I create toggle button to hide and display div.
I get rid this problem by embeded the initial style during loading page which is display: none at div itself rather than put it in external css file.
<div id="toggleDiv" style="style:none">
</div>
Related
I am using a modal that I used from a previous site where it works fine. Difference is this modal will only appear in IE9 only to direct users to a better browser. I was able to test it with just a alert and works fine.
However, for some reason, when I transfer the code I did for a previous site to this new site, the Modal isn't responding and to one point is not showing on the site.
When I try close the "Close" button, it will just refresh the page. I am not sure why and when I close the "X" button, it does not work either.
The code is inserted in a coldfusion file and I am not sure if it causing conflict or not.
Any help would be appreciated.
Here is what I did for the modal. ie-only detects whether it is IE9 or not:
<!---<div class="ie-only" style="overflow-y:hidden;">
<div class="modal fade in" id="myModal" aria-hidden="false" style="display:block; padding-right:17px;">
<div class="modal-dialog modal-md custom-height-modal">
<div class="modal-content">
<div class="modal-header" style="background-color:##428bca">
<button type="button" class="close" data-miss="modal">x</button>
<h3 class="modal-header" style="background-color:##428bca; text-align:center">Attention</h3>
</div><!---Modal-Header Div--->
<div class="modal-body">
<p style="text-align:center">You are using an outdated browser.<br /> <br /> Upgrade your browser today to better experience this site.</p>
</div><!---Modal-Body Div--->
<div class="modal-footer">
<p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p>
</div><!---Modal-Footer Div--->
</div><!---Modal-Content Div--->
</div><!---Custom Height Div--->
</div><!---Modal Fade in Div--->
</div><!---Start of Modal Div--->
<!--End of Modal container--> --->
<!---<script>
$(function(){
$('##myModal').modal('show');
}
</script>
<div class="modal-backdrop fade in"></div>--->
It looks like there is a syntax problem in your code:
$(function(){
$('##myModal').modal('show');
}
This is incorrect; it should be:
$(function(){
$('#myModal').modal('show');
});
When corrected the Modal loads as a Modal, which in turn causes the Close button to operate as expected. Absent this the modal still loads (because you have in activated) but loads absent the overlay and absent the hook to Bootstrap's Modal JS which explains why your close button is non-functional.
You can see a functional example here: http://www.bootply.com/24IPYP8O3F
Why your code isn't working
The in class on your Modal div instructs Bootstrap to make that modal visible, and position it according to the Bootstrap CSS. Your jQuery is wrong though, so Bootstrap treats this like a bit of HTML that is just part of the document.
Once you correct your jQuery Bootstrap processes it as expected; as a Modal Javascript component. Once that happens it is presented with the overlay (as default) and the data-dismiss attributes are processed correctly.
The short of it is that the entire issue for why your Modal is not behaving like a Modal is that your jQuery is wrong.
I'd like to start with saying I've searched and searched for the solution to my problem -- and after trying everything I read -- no success. I just want to make a simple modal to pop up when a user clicks on a link (that isn't ready yet).
---Already Tried---
Made sure there wasn't a second bootstrap javascript file (especially in header)
Tried variations in javascript syntax
Tried variations in the link html
When I made the link a "button" then the modal was fine -- but I don't want a simple link to be a button.
$("body").on("click","#empty",function(event){
$("#myModal").modal()
})
<li>Our Blog</li>
I also tried
$(document).ready(function(){
$("#empty").click(function(){
$("#myModal").modal();
});
});
I suspect there's something wrong in the way the html is set up (since the modal worked for a "button" but wont for a regular link)
Let me know if you need more clarification -- Thanks for your help!
This is working modal... It may be helpful for you...
<script type='text/javascript'>
('#myModal').modal('show');
</script>
<li>Click Here</li>
<div id="myModal" class="modal fade" role="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>
otherwise try this code...
$(document).ready(function(){
$("#empty").click(function(){
$("#myModal").modal('show');
});
});
If your link "isn't ready yet" when you initiate the modal with Javascript it won't work.
Assuming that your link is created dynamically you have to make sure you initiate it once it is in the DOM, in a JS callback or however your link is created (instead of the Document.ready function).
Also worth noting that to initiate the default triggering (setup in the html with the 'data-' attributes) you simply use:
$("#myModal").modal();
But if you want to trigger it manually in a onClick function, you'll need to add 'show' or 'toggle:
$("body").on("click","#empty",function(){
$('#myModal').modal('toggle');
)};
Again, both of these codes needs wrapping up in a document.ready function or a callback when your link is in the DOM.
I made a bootstrap modal - it's working fine. But when I want to use a modal somewhere else in my site it overwrites the other modal.
Which part of the code do I need to change? And do I have to add like thousands of extra code to javascript for each modal, or can I make a group code?
Thanks!
I added this:
$('#clickme').click(function(e) {
$('#showModal').modal('show');
<script>
function showModal(){
$("#showModal").modal("show");
}
</script>
and:
<div class="modal fade" id="showModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Sign me up!</h4>
</div>
</div>
</div>
</div>
Don't try to do this. Bootstrap's modal is not designed to support that. Its own documentation says
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
It should have said "a lot of custom code". For instance, BS modals use a class on the body element, that is removed when it closed. Therefore, closing a second modal will also hide the first. Then you need special code to detect that a modal was previously open and restore the class on the body. It's much more trouble than it's worth.
Instead, use a "poor man's modal" for the second modal, just an absolutely positioned div you pop up somewhere. You don't need the overlay covering the screen anyway since it's already there from the first modal.
I'm using a jQuery terminal (http://terminal.jcubic.pl/) with bootstrap on my page.
I'm trying to get the terminal to be inside a modal, I got the modal thing to work and I press two buttons to open up the modal..
But whenever I load the page I have to click somewhere on the body before I can press them otherwise nothing happens i doesn't even react on my clicks.
What am I doing wrong?
Terminal:
$('#terminal').terminal(function(command, term) {
if (command == 'help') {
term.echo("available commands are system, test ");
}
});
My modal:
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Terminal</h4>
</div>
<div class="modal-body">
<div id="terminal"></div>
</div>
</div>
</div>
</div>
Apparently, when a page loads, there is no way to capture the Ctrl key from within the page without previous explicitly setting the focus on it.
You can set focus programatically, but you can't get the 'Ctrl' key... As far as I've looked up, this is the only key you can't use when the page loads, before acting on the page.
You should either consider changing your combination of keys, or forcing the user to click on the page, by, for example, a message he has to acknowledge.
Other than that, your code is working. The only flaw I see is that you close </body> twice.
This is old but for reference, in this question Bootstrap modal show event the answer say, how to add event when bootstrap modal is show (you use shown event). so you can use this:
$(document).ready(function() {
var term = $('#terminal').terminal(function(command, term) {
if (command == 'help') {
term.echo("available commands are system, test ");
}
}, {enabled: false});
$('#myModal').on('shown', function() {
term.enable();
})
});
I have a button on my page that when it is pushed it triggers some javascript functions to occur, and one of those javascript functions to open a bootstrap modal, but I can't seem to get it to work. Here is my code... please help.
//elsewhere on the form is the button that triggers the javascript
Yes, cancel it
<!-- CANCEL A PO MODAL -->
<div class="modal hide fade" id="error-dialog" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Cancel Purchase Order?</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
Yes, cancel it
Nevermind
</div>
</div>
$('.btn-danger').click(function(event) {
if(some random conditional statement){
//some stuff happens here
}
else{
//Show form validation error modal-- I know this part is triggered but the modal will not show
$("#error-dialog").modal("show");
}
});
$("#error-dialog").modal("show");
This is the correct way, your code simply has an error. Go in to Chrome Console and run this command, it'll work.
you're missing if () { part of the conditional statement
It's a bit hard to see what you want to do with this partial code, but here is a working code based on yours:
http://jsbin.com/oqomiv/1/edit