jQuery terminal + bootstrap - javascript

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();
})
});

Related

Making a modal window only show once

I use a Bootstrap modal on the index page of my site, but I only want it to show Once per user visit.
I've tried out the answers shown here:
Display A Popup Only Once Per User per-user but the problem I run into is that the javascript "popup" conflicts with my modal "onload". And I'm not sure how to resolve it.
This is my onload function:
$(window).load(function(){
setTimeout(function() {
$('#onload').modal('show');},2000);
});
and this is my HTML:
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="onload">
<div class="modal-dialog">
<!-- Modal content-->
</div>
</div>
I tried to wrap the whole modal div with the "popup" div but that did weird things to my website (dimmed the whole page but otherwise did nothing)
I think I need to use a cookie or localStorage but I don't know how to configure them or trigger them from the onload javascript.

on('click'....) only fires after the second click

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>

Bootstrap modal at first page load

On page loading i am showing user some bootstrap modal window to show him some information. I would like to show this bootstrap modal only on first time, then every one next should not. How to achieve that? Is there something like function disable after first time? This is my simple code:
$(window).load(function () {
$('#dddd').modal('show')
});
This is a possible duplicate of this
Nevertheless, you can use cookies to achieve this. For your reference the following example is done using jquery cookie
<script src="/path/to/jquery.cookie.js"></script>
<script>
$(document).ready(function() {
if ($.cookie(‘pop’) == null) {
$(‘#dddd’).modal(‘show’);
$.cookie(‘pop’, ’7');
}
});
</script>
add this to your js file:
if(window.sessionStorage.fist_load_modal1 === undefined){
$('.first_load_modal').modal('show')
window.sessionStorage.fist_load_modal1 = true
}
Now you can use the class 'first_load_modal' to show your modal on fist load.
<div class="modal fade first_load_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
CONTENT HERE
</div>
</div>
</div>
Obs: Tested in bootstrap 4

Multiple bootstrap modals in a page

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.

Bootstrap: file input field ignores clicks when used in modal dialog

I have a little weird problem with Bootstrap and a file field:
For a project I'm implementing a simple upload dialog.
http://jsfiddle.net/RxxSv/4/
As soon as I add data-toggle="modal" to the modal container, the file input field stops reacting to clicks (and the browser won't show the file selection dialog).
I suspect this to be caused by Bootstrap's modal code/event handling. Somewhere the click event is getting lost, but I can't really figure it out.
Any ideas?
I can't really explain why but if you put all the attributes that are in the documentation (in the Live Demo), the input works correctly.
<div id="modal-upload" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
JSFiddle: http://jsfiddle.net/4TQvY/
My comrade adviced to do it in another way:
<a class="btn btn-primary" href="#" style="margin-left: 100px" id="prefix">Choose file</a><input type="file" id="file_source" style="position:absolute;z-index:2;top:0;left:0;filter:alpha(opacity=0);opacity:0;background-color:transparent;color:transparent;">
Make separate a & input and then invoke click event
jQuery("#prefix").click(function()
{
console.log("INSERT JSON");
$("#file_source").click();
return false;
});

Categories