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
Related
A page includes a 'wait pictogram' that appears whenever a user action triggers an AJAX request. To do that, script FoxInCloud.js > FoxInCloud.WaitPic() sets it to z-order:10000; and removes display:none;
Pictogram appears fine when user action occurs on the main page;
It fails to appear when user action takes place on a Bootstrap modal opened 'over' the main page.
It does appear over the modal when removing the display:none; attribute manually using the browser developer tool.
What happens here?
Thanks,
Test page
Video showing the behavior
Bootstrap 3.3.7
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 have a page with multiple instances of jQuery Colorbox on it. The page is a calendar which displays events, and when an event is clicked, a colorbox pops up with event information.
eventClick: function(id) { #.colorbox({href:...}); }
Also on the page, I have a button which allows users to change some settings relating to the calendar, and that fires a different instance of Colorbox.
$('#showFilter').on('click', function() {$.colorbox({inline:true, href:...});
Currently, I have the following script on my page:
$(document).bind('cbox_closed', function(){ refetchEvents(); });
I added this code so that when the user closes the 'showFilter' popup, some page data will refreshe itself. Unfortunately, the above callback, being bound to the document, is executed when both colorboxes are closed.
Is there any way to limit the scope of the callback so that it fires when only the second colorbox popup is closed?
I have a modal dialog which contain form and hidden iframe to which form is submitted. The result of submission is file to download.
I need to close modal dialog as soon as download dialog is opened i.e. file is ready.
I was trying to catch 'onreadystatechange' event of iframe, but after submit call changing state to 'complete' it does not trigger 'onreadystatechange' event.
Eventually, i use window.setInterval which monitoring readyState of iframe and close modal dialog when its state == 'complete'.
the solution that using window.setInterval seems not professional to me and I am looking for better solution, I saw solution with cookies but I can't use cookies in my application.
Any help will be appreciated!
There is nothing wrong or unprofessional in using window.setInterval().
function Close_Popup() {
$(".modal-backdrop").remove();
$('#div_Popup1').modal('hide');
$(".modal-backdrop fade in").remove();
}
Call this function on OnClientClick="Close_div_Popup1_Popup();"