bootstrap, modal dialogs, shown.bs.modal event doesn't fire - javascript

I'm using modal dialog with remote option:
<a target="profile-banner" data-target="#edit-slide-dlg" href="/Banner/SlideEditModal/1/1"
data-toggle="modal" class="banner-slide-control">Edit</a>
Where:
<div id="edit-slide-dlg" class="modal fade" tabindex="-1"></div>
Also, I'm listening for shown.bs.modal event where I use event.target property:
$("body").on("shown.bs.modal", function (event) {
// do something with event.target
}
Some reason this event is not fired when I open dialog for the first time. And it gets fired for the second time only. I tried to browse bootstrap scripts and found this code (see my comment):
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ?
that.$element.find('.modal-dialog') // wait for modal to slide in
.one($.support.transition.end, function () {
that.$element.focus().trigger(e) //THIS LINE NEVER EXECUTED AT FIRST DIALOG OPENING
})
.emulateTransitionEnd(300) :
that.$element.focus().trigger(e)
So, I turned off transition as a workaround, It made event be fired for the first time, but, event.target is empty string. For the second time event.target contains appropriate dialog HTML. Is this problem with my code or bootstrap?

I had the exact same Problem. I could fix it with the solution to this StackOverflow question: Bootstrap modal 'loaded' event on remote fragment
Basically you have to open the modal manually and implement the Ajax loading yourself. Something like:
$modal.modal({
'show': true
}).load('/Banner/SlideEditModal/1/1', function (e) {
// this is executed when the content has loaded.
});

For anyone coming here late and wading through lots of related issues, this answer from related post solved the OPs issue exactly for me...

Related

Android click event div element

I am having the following issue with click/touchstart event on Android (as far as I know only happening on Android),
1. the element triggers a modal window.
2. one of the buttons/links inside this modal gets triggered instantly without giving the user the option to make a choice.
It is of course required for the visitor/user to view the modal content before being redirected to a link to another page from one of those buttons.
I believe this is due to the 'touchstart' event bind to this div, which I am using since click events on divs for touch devices don't work.
I am using jQuery to make this work, and on iOS there doesn't seem to appear any issue.
$(document).on('click touchstart','.mydiv', function(e) {
e.preventDefault();
// open modal
});
Any suggestions please.
Try this:
$(.mydiv).on('touchstart', function(e) {
e.preventDefault();
// open modal
});
cheers

Execute function when modal is shown

I'm using Bootstrap and using this to show a modal after a click event:
$('#make_selects_modal').appendTo("body").modal('show');
I need to be able to execute a function (called pickClient) when this is shown. I tried something like this, but it doesn't work. Not sure of the correct syntax.
$('#make_selects_modal').appendTo("body").modal('show').pickClient();
When the modal is visible, an event called shown.bs.model is fired.
You can use
$('#make_selects_modal').on('shown.bs.modal', pickClient);
Modal event docs.
From the Bootstrap documentation you can use events for this, specifically in your case the shown.bs.modal event:
$('#make_selects_modal').on('shown.bs.modal', function () {
pickClient();
})

Integrate external dialogs with CKEditor Widgets

At work we have a popup dialog system that i would like to use to edit the contents of a widget in CKEditor. Is there any way of going about this?
Does CKEditor have a way of calling outside and get a callback setting values on the Widget?
I have googled it for quite a while now with no success :(
When widget is being edited (on its initialisation, on doubleclick, on enter and when the widget.edit() method was called), then the widget#edit event is fired. The start of the code inside the widget.edit method looks like this:
edit: function() {
var evtData = { dialog: this.dialog };
// Edit event was blocked or there's no dialog to be automatically opened.
if ( this.fire( 'edit', evtData ) === false || !evtData.dialog )
return false;
...
}
This means that if the event was cancelled or there's no dialog name set in the widget.definition (your case, I guess), then after the event was fired nothing will happen.
So, to start, listen on the widget#edit event and show your dialog. Then, when the user presses "OK" button use widget.setData(). You also need to fire the editor#saveSnapshot event before and after doing any changes.
Also, read the documentation of the widget.repository#finalizeCreation method which will let you handle widget creation.

How do you think about respective callback for bootstrap modal triggers?

On bootstrap modals, we know that we can bind events for triggers like show or hide using show, shown, hide, hidden, but this event binding only works for general case. What I want is 'specific case' such as:
$("#myModal").modal("show", function(e){
alert("This pops-up after #myModal is shown properly.");
});
or maybe using dictionaries for more options.
Anyway, I want to call some functions as callback after these modal triggers are done.
I do know that there can be alternative implementations, like using setTimeout to wait until the modal is completely shown or hidden, or just unbind the event inside the callback function so the event handler works only for once. Either way, it's not very convenient and ugly.
Can this feature be feasible feature request for bootstrap?
Also, I'm not very satisfied that to change modal's property after its init, I have to change it by directly managing $("#myModal").data("bs.modal").options.
Again, I'm asking about particular situation. I don't want to make callback function called for every show, shown, hide or what ever. Just for specific situation where the modal is triggered manually via javascript.
Here is an example:
Let's say that there are #myModal, and #btn-a, #btn-b.
$(document).ready(function(){
$("#myModal").on("shown.bs.modal", function(e){
console.log("myModal shown.");
})
$("#btn-a").click(function(e){
$("#myModal").modal("show");
});
$("#btn-b").click(function(e){
// There is no such thing like below. It's just pseudo code.
$("#myModal").modal("show", function(e2){
console("myModal shown by b.");
});
});
}
Then if #btn-a is clicked,
myModal shown.
will appear while if #btn-a is clicked,
myModal shown.
myModal shown by b.
will appear.
Again and again, I'm actually not asking how to make it. I already made what I want. What I'm asking is, will this feature be feasible feature request for bootstrap.
Check out the section titled Events here:
http://getbootstrap.com/javascript/#modals
Hopefully, it will give you all the information you need
You can use shown events to detect when the modal has been made visible on the screen:
$('#myModal').on('shown.bs.modal', function (e) {
alert("This pops-up after #myModal is shown properly.");
})
You can check for more information in the events section of modal here.

jQuery click handlers not triggered inside a modal window

I have a very simple click handler that makes an AJAX GET request on click like so:
$('span.switch-option').click(function() {
$(this).parents('div.log-in-option').hide();
$(this).parents('div.log-in-option').siblings('div.log-in-option').fadeIn();
});
This works perfectly anywhere else on the website. However, when I try to click a <span> element with the class switch-option inside a modal window, the event does not fire. Entering the contents of the click-handler function in the console and running them does perform the desired behavior, however.
Why will the click handler not fire in this modal window? I am using the popular SimpleModal plugin http://www.ericmmartin.com/projects/simplemodal/ and jQuery 1.9.1.
A live example is here: http://ec2-107-22-8-70.compute-1.amazonaws.com/thread/19. If you click the 50,000 reps or any user's reputation then try to click the big blue link in the dialog, the click handler does not fire. This behavior happens with other click handlers in different modal windows as well.
When your script(main.js) is running the elements 'li.log-in, a.log-in' does not exists in the dom, they are loaded dynamically when the popup is created thus jQuery is not able to bind the event handlers
Try event propagation
$(document).on('click', 'li.log-in, a.log-in', function() {
$.get('/login/', function(data) {
//make a modal window with the html
$.modal(data);
});
return false;
});

Categories

Resources