JQGRID - JQMODAL: Disable close modal when click on overlay - javascript

I am trying to disable close on click when clicking the overlay behind the edit form Modal that opens when I edit a row, but I dont know how I have to do it. I were trying something like:
editOptions: {
url: 'foo/edit.html',
mtype: 'PUT',
//some other options
closeAfterEdit: true,
reloadAfterSubmit: true,
onClose: function() {
alert('Hi ^_^');
}
}
But this only triggers if I click at 'X' button. If I click at overlay (out of modal) it closes the modal and that alert never triggers. What I want is to disable that closing function when I click out of modal or remove that overlay.
Thanks.

It's interesting problem. onClose callback will be not called if one clicks on the overlay (if one clicks out of the modal dialog) and the dialog will be closed.
It's funny, but jqModal.js already has the option which would be perfect to implement your requiremens. It's closeoverlay option of $.fn.jqm (see the line). The problem is that jqGrid don't have any public property which allows to set the option. If you just modify jquery.jqGrid.src.js the closeoverlay : true to closeoverlay : false (it corresponds changing closeoverlay:!0 to closeoverlay:!1 in jquery.jqGrid.min.js) then you will have the behavior which you need.
The problem is that I don't see any simple way to realize your requirements without modification of the code jqGrid.
UPDATED: I analysed the code of jqModal.js module one more time and I'v found simple way without changing the source code of jqGrid. The analyse is difficult because the module exist only in minimized form. So it's difficult to read the code.
The solution: you should include the following line which changes defaults of jqModal.js module:
$.jqm.params.closeoverlay = false;
Description: the lines of jqModal.js module initialize $.jqm as
$.jqm = {
hash: {},
open: function (s,t) { ... },
close: function (s) { ... },
params: {}
};
So everywhere after you includes jquery.jqGrid.min.js you have $.jqm.params as empty object. It can be used to provide default values of parameters of jqModal.js (which are not directly specified in the list of parameters of $.jqm). So you can include $.jqm.params.closeoverlay = false; somewhere after jquery.jqGrid.min.js (or jquery.jqGrid.src.js) to deny closing of jqGrid dialog on clicking on the overlay.

Related

Accessing attributes from Magnific Popup's calling button on Popup load

I have a page with several buttons that all open the same modal using Magnific Popup. However I need to customize the popup for each button according to the calling button's data- attributes.
So I need a way to call a function when the popup pops :-) and have access to the calling button.
The Magnific popup initialization is part of the FE's js file, and I'm working in the module's js file. So I'm trying to minimize changes to the FE's js!
Is this possible? How can I achieve this?
CHECK UPDATE BELOW:
This is what I did:
Did not touch the FE's js which initialized any .my-modal class
I edited these button's classes from .my-modal into .my-custom-modal (for example)
Initialized magnificpopup on .my-custom-modal and added the following to trigger an event before opening the modal:
$('.my-custom-modal').magnificPopup({
type: 'inline',
midClick: true
}).on('mfpBeforeOpen', function () {
// 'this' is the current button that triggered the modal
console.log(this);
});
UPDATE
The above works but the 'this' var wasn't returning the actual button but seems like the first button in the page.
The below should work correctly:
$('.my-custom-modal').magnificPopup({
type: 'inline',
midClick: true,
callbacks: {
open: function () {
var mp = $.magnificPopup.instance,
btn = $(mp.currItem.el[0]);
//btn is the actual button being clicked
console.log(btn);
}
}
});

Magnific Popup not showing

When I set up my test document to use an 'inline' Magnific Popup I click the link/button, and the URL of the page changes, but nothing actually appears.
I've copied and pasted directly from the original demo, I've included the jQuery library before the after Magnific's .js. I've tried swapping initialization codes. I've honestly lost track. I also can't get my debugger in Chrome to open properly, but what I gathered was that I was missing a closing } but when I added it things only broke further.
I also made a JSFiddle despite not really knowing how to use it: https://jsfiddle.net/3b15w3ek/6/
$(document).ready(function() {
// Example 1: From an element in DOM
$('.open-popup-link').magnificPopup({
type:'inline',
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
I checked the fiddle and found that URL for jQuery1.9.1 was wrong and corrected it. See the updated fiddle:
https://jsfiddle.net/3b15w3ek/7/
And the updated code is:
$(document).ready(function() {
// Example 1: From an element in DOM
$('.open-popup-link').magnificPopup({
type: 'inline',
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
You didn't close the function (missing last });):
$(document).ready(function() {
// Example 1: From an element in DOM
$('.open-popup-link').magnificPopup({
type:'inline',
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
In order this snippet to work in JSFiddle, you also need to set "Framework & Extensions" = "jQuery 1.9.1" (or later) in Javascript settings. Otherwise $ symbol is not found in Magnific gallery...

How to get the modal dialog instance through the Bootstrap programmatic API?

The scenario I'm trying to solve is to disable that the escape-button closes the dialog AFTER the modal has been instaniated (the dialog is set to a loading state). So in other words after I have instaniated my modal like this:
(this.$el).modal("show");
The user presses a submit button and the dialog is set to a loading state and I want to disable the escape-button since the user should not be able to close the dialog in this state.
I have tried this:
(this.$el).modal({ keyboard: false });
But it does not work, it seems that Bootstrap only reads those options when it instaniates the modal dialog...
So my question is if it is possible to get a hold of the actual bootstrap modal-instance to be able to change the options-object? According to the documentation it should be possible (or have I misunderstood the docs?), but I cannot figure out how.
Here is what it says in the documentation (http://getbootstrap.com/javascript/):
If you'd like to get a particular plugin instance, retrieve it directly from an element:
$('[rel="popover"]').data('popover').
Any ideas?
Ok, I figured out how to get ahold of the modal dialog instance after some experimentation:
var bootstrapModalInstance = this.$el.data("bs.modal");
And then I could set the options on the instance like this:
bootstrapModalInstance.options.keyboard = !this.model.isSyncing;
Sadly enough, this did not solve the problem since the escape-key-event-listener is setup during the modal instaniation like this:
From bootstrap.js
Modal.prototype.escape = function () {
if (this.isShown && this.options.keyboard) { // The event listener is setup on initalization
this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {
e.which == 27 && this.hide() // !!! Does not check the instance options.keyboard flag status, so I had to add && this.options.keyboard here
}, this))
} else if (!this.isShown) {
this.$element.off('keydown.dismiss.bs.modal')
}
}
And as I wrote in the code comment above adding the instance options.keyboard check in the event listener solved the issue.

PageDown with a Bootstrap 3 modal dialog, the background mask is causing many problems

Edit:
Check the bottom of this post for a solution, but now it introduces a new problem.
I'm using the most recent version of PageDown with Bootstrap 3.
This series of events causes the following error:
Uncaught TypeError: Cannot call method 'removeChild' of null
At which point the wmd-background mask is visible and over takes my page.
The error happens after step 4:
Open the custom modal dialog
Close the custom modal dialog (Using ok or cancel does not matter)
Open the custom modal dialog
Close the custom modal dialog (Using ok or cancel does not matter)
Here's the custom javascript code:
var insert_image = $("#insert-image");
var submit_image = $("#insert-image-submit");
var insert_image_close = $("#insert-image-close-x, #insert-image-close");
var file_url = $("#file_url", insert_image);
var file_local = $("#file_local", insert_image);
editor.hooks.set("insertImageDialog", function(callback) {
submit_image.on("click", function(event) {
event.preventDefault();
console.log("submit image");
insert_image.modal("hide");
return callback(file_url.val().length > 0 ? file_url.val() : null);
});
insert_image_close.on("click", function() {
console.log("cancel");
return callback(null);
});
insert_image.modal("show");
return true;
});
editor.run();
I did not see any solutions posted to this specific problem. I also tried hooking into Bootstrap's modal events and tried to either append my own or hide/show the wmd-background mask but I can't figure out a solution that results with no errors and has no extra background mask.
I should add too that I also have data-backdrop="" set in my html for when I build the modal dialog but this doesn't do anything other than prevent the background from being extra dark.
Solution:
I patched the library and changed:
Old broken version:
background.parentNode.removeChild(background);
New semi-working version:
if (document.contains(background)) { background.parentNode.removeChild(background); }
New problem:
The callback for both submit and cancel keep occurring more and more, as you open and close the form.
I get 1 then 2 then 4 then 6 then 10 console.log messages each time I close the form as I keep opening and closing it manually.
I fixed this temporarily by adding this to the top of the editor hook:
submit_image.unbind("click")
insert_image_close.unbind("click")
This seems like a hack, surely there's a better way to handle memoizing an event handler rather than unbind it + rebind it?

Link in AJAX HTML response loses onclick after being clicked

I have an element containing data from an AJAX request. The AJAX data is returned from another page. The returned data in the element contains a link, which when clicked, opens a jQuery overlay. The onclick event is attached to the link (a onclick="...") from the external data, and the overlay function is on my main page.
This all works fine until the user clicks the link which opens the overlay. When the overlay is closed, the link becomes disabled, losing its onclick event, and the overlay cannot then be reopened.
Is this a focusing problem or do I somehow have to rebind the event to that link? I'm not sure what is going on here, or how to fix it, I hope some kind person can help me out.
This is what loads the external data in to the element:
function load_upload_queue() {
$.ajax({ type : 'GET', url : myDomain,
dataType : 'html',
success : function(data) { $('#myElement').html(data); },
error : function() { // do something }
});
}
This is the link inside of the element, which comes from AJAX call above:
<a onclick="show_error_overlay(id)">Show Errors</a>
This is my open overlay function, sitting on the main page:
function show_error_overlay(token) {
$("#show_error_overlay").overlay({
mask: '#111111',
close: "a.closeOverlayBtn",
closeOnClick: false,
closeOnEsc: false,
load: true,
onLoad: function() { // do something },
onClose: function() { // do something }
});
}
Any help gratefully received, any questions please do not hesitate to ask :)
I would use Firefox+Firebug to monitor whether that A tag is being touched (moved, changed) by anything as the overlay opens and closes. See if it maintains the same position; most importantly, check if it still has the onclick value after the overlay goes away. Inspect your "do somethings" in onLoad and onClose for any code that may be doing something to that link. Also, check for JS errors, especially during/after closing the overlay - sometimes errors interrupt the process, leaving unrelated things in unexpected state, causing unrelated problems.

Categories