I have a Bootstrap modal that is using requireJS to load jQuery inside and run JS, that show output in modal.
This setup works great for first opening of the modal. If I close the modal and try to open it again:
$("#modalLogin").modal();
I get:
TypeError: undefined is not a function
It seems that loading of jQuery inside of modal is breaking jQuery modal functionality of main page. Is there a way to re-enable .modal() method in original page, once I close the modal?
According to the boostrap modal's documentation,
You can call .modal() to initiate it, with or without options,
But you have to precise the method when you want to open / hide it :
$('#modalLogin').modal('show');
Related
I have a modal window in the #editorWin div, which can be opened from multiple locations on the page. Each time it has a different content, coming from an Ajax query in the following way:
$('#editorWin').on('show.bs.modal', function (event) {
$('#modalCont').html('Loading...')
$.ajax({
// load AJAX content and overwrite Load... message
})
});
When the modal window is opened, I want to use a Bootstrap Datepicker widget in it. When I click on the datepicker however, the AJAX loaded content of my modal window disappears.
I suspect that opening the datepicker might trigger the show.bs.modal event and that messes with my former function but I'm not sure.
There is no JS error in the console.
I found the answer in a similar question: Bootstrap datepicker not woking in modal
To solve the issue, the show.bs.modal had to be replaced by shown.bs.modal.
I am trying to implement multiple level of jQuery Dialog with modal behavior. I have main page which open up first dialog box from where second dialog box can be open all both should be modal box.
First issue is I am getting error on fiddle when clicking main page link and second its not creating dialog as required.
Fiddle
A bunch of things going on:
In the jsFiddle, you need to add jQuery UI and a theme as external resources. Selecting just the jQuery library is not enough. jQuery UI Dialog is part of the jQuery UI library, not part of the jQuery core library.
Since your click events are on <a> tags, you need to cancel their default behaviour. Make a click handler for your <a> tags, and cancel the default behaviour first before doing anything else:
Gold
$("#clickForGold").on("click", function(e) {
e.preventDefault(); <--- this stops the link from navigating
//now do other stuff
});
Set up your dialogs at page load, and then open them when you need to. Use the autoOpen:false parameter to keep them from opening when the page loads. Open them as follows:
$("dialog-id").dialog("open");
Don't open a modal over a modal. It's extremely poor for usability. Close the first one before opening the second one:
function clickForSecond() {
$("dialog-id-first").dialog("close");
$("dialog-id-second").dialog("open");
}
A working example:
https://jsfiddle.net/5ucat3f7/1/
I'm using Twitter Bootstrap in my site. I want to show modal loaded content to user.
Modal window's content loading with ajax request.
I'm including javascript file with src attribute. When first load of modal dialog, everything seems ok but when second load of modal dialog, content is loading but javascript file isn't loading.
When modal window hidden i'm clearing all of it's content.
What my i do for load javascript file more than once and fire it's functions?
Deleted because it doesn't apply:
This is just a callback provided by bootstrap. There are 5 different callbacks:
show.bs.modal: This event fires immediately when the show instance method is called.
shown.bs.modal: This event is fired when the modal has been made visible to the user.
hide.bs.modal: This event is fired immediately when the hide instance method has been called.
hidden.bs.modal: This event is fired when the modal has finished being hidden from the user.
loaded.bs.modal: This event is fired when the modal has loaded content using the remote option.
$('#myModal').on('shown.bs.modal', function (e) {
yourFunction();
})
For more information on modal just go here: http://getbootstrap.com/javascript/#modals
Hello I was wondering if there was some javascript to auto launch the modal window within bootstrap 2.3.2. I am using the modal window for a form and the code for the from is on page and I want the modal window to open back up on the event of an error in the form. My code works fine and it shows the error message in the modal window bu you have to relaunch the window to see it so users may not necessarily know they have errors, so that's my dilemma.
Is there a way to do this? The page isn't refreshing so I can't say load it when the page loads, as I have seen that before.
To launch your modal you can use the following call in javascript/jQuery
$('#myModal').modal();
http://getbootstrap.com/2.3.2/javascript.html#modals
When I initialize and show bootstrap modal dialog, all elements on the page behind the dialog and expose mask are still reachable by tab navigation.
Here on official Bootstrap page that is not the case. There is no any specific code for this, just simple modal show.
Any ideas how to disable tabbing behind the modal?
Consider migrating to Bootstrap 3, where this is not an issue.