callbacks not firing when opening a magnific popup from another one - magnific-popup

I currently have a magnific popup and within that popup i have a link that opens another magnific popup. Something along the lines of:
$('.logbook-entry-details').magnificPopup({
type: 'ajax',
closeBtnInside:true,
closeOnBgClick:false,
closeOnContentClick:false,
callbacks: {
beforeOpen: function () {
$.magnificPopup.close();
},
open: function() {
console.log('Popup open has been initiated');
},
beforeClose: function() {
console.log('Popup before close has been initiated');
},
close: function() {
console.log('Popup close has been initiated');
},
afterClose :function() {
console.log('Popup after close has been initiated');
}
}
});
After reading i found that callbacks on the second popup will not be registered until i close the original popup as opening the new one just replaces the content and actually doesn't recreate a new instance.
I am trying to figure out how i could have my link within my popup close the current popup before calling the code to open the new one so it can register my callbacks.
By the way, the reason I am trying to do this is i want to reopen the original popup after closing my new popup. If you happen to have a better solution please let me know.

So just in case someone needs this answered, i had to add the following code to my new popup.
// a button that closes the popup
$('#cancel-logbook-entry-btn').click(function(){
$.magnificPopup.proto.close.call(this);
});
$.magnificPopup.instance.close = function () {
//code to show the original popup
};
And then in the original popup i had to add otherwise it will never close the popup
$.magnificPopup.instance.close = function () {
// "proto" variable holds MagnificPopup class prototype
// The above change that we did to instance is not applied to the prototype,
// which allows us to call parent method:
$.magnificPopup.proto.close.call(this);
};

Related

kendo upload async, how submit with javascript?

How submit a Kendo Upload file in async mode with a external button using javascript,
it's possible?
someone have a solution for this?
After initially selecting a file, KendoUpload will create a button you can select with $(".k-upload-selected"). Calling click on this button will POST back to your saveUrl setup in the async options. You will need to set autoUpload: false.
On select in kendUpload, you can access the Kendo generated upload button, hide it then trigger the click event in myUploadButton's click.
My original code was inside a Backbone view. Just to simplify I pulled it out. I haven’t tested the code below, however it should be fairly close to what you need.
var myUploadButton = $("#save");
var kendoUploadButton;
$("#files").kendoUpload({
async: {
saveUrl: http://uploadurl",
autoUpload: false,
},
multiple: false,
select: function (e) {
setTimeout(function () {
kendoUploadButton = $(".k-upload-selected");
kendoUploadButton.hide();
}, 1);
}
});
myUploadButton.click(function() {
if(kendoUploadButton)
kendoUploadButton.click();
});
Kendo Forum post on KendoUpload Trigger

Disable the escape key in dojo

I have a requirement to disable the escape key when the dialog is open.currently when i click the escape button the dialog closes and the transaction is submitting.I tried the following code snippet but its not working chrome.
dojo.connect(dialog, "onKeyPress", function(e){
var key = e.keyCode || e.charCode;
var k = dojo.keys;
if (key == k.ESCAPE) {
event.preventDefault();
d.stopEvent(event);
}
});
Could you please help on this..i have searched a lot and havent found a suitable solution for my problem.
Thanks inadvance..
Dojo uses the _onKey event for accessibility. You can override it by using:
dialog._onKey = function() { }
I wrote an example JSFiddle, hitting the Escape key should not work anymore.
In the event you want to override the escape key in all dialogs (rather than a particular instance), you can use dojo/aspect:
require(['dojo/aspect', 'dijit/Dialog'], function (Aspect, Dialog) {
Aspect.around(Dialog.prototype, '_onKey', function (original) {
return function () { }; // no-op
});
});
You can create an extension for the Dialog widget like this in a new file:
define(["dojo/_base/declare", "dijit/Dialog"],
function(declare, Dialog){
return declare(Dialog, {
//Prevents the 'ESC' Button of Closing the dialog
_onKey: function() { }
});
});
save the file into dojo Directory (say: dojo/my/my_dialog.js),
and instead of calling: 'dijit/Dialog', just call: 'my/my_dialog'.
this will save you the hard work of editing each Dialog call,
And the same thing to the "dojox/widget/DialogSimple" Widget.

Dojo - How to programatically create ToolTip Dialog on link click

As the title says. I want to create TooltipDialog, after I click link and load custom content into that dialog. The tooltip body is complete placeholder, I just haven't done any server logic to handle this.
So far i got to this point:
PreviewThread: function (ThreadID) {
var tooltip = new dijit.TooltipDialog({
href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation
});
},
Preview
The point is not even how to load content, into dialog, but how to open it in the first place ?
After more googling and trial & error I finally got to this:
PreviewThread: function (ThreadID) {
var tooltip = new dijit.TooltipDialog({
href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation,
closable: true
});
dojo.query(".thread-preview").connect("onclick", function () {
dijit.popup.open({ popup: tooltip, around: this });
});
},
It's somehow working. ToolTipDialog opens, but.. I have to click twice and and I can't close dialog after click outside it, or after mouseleave.
Ok this, going to start look like dev log, but hopefully it will save others some headchace:
I finally managed to popup it where I want to:
PreviewThread: function (ThreadID) {
var tooltip = new dijit.TooltipDialog({
href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation,
closable: true
});
dijit.popup.open({ popup: tooltip, around: dojo.byId("thread-preview-" + ThreadID) });
},
<a href="javascript:Jaxi.PreviewThread(#thread.ThreadID)" id="#tp.ToString()" >Click Me</a>
Note that I'm using Asp .NET MVC.
Now only thing left is to close damn thing in user friendly manner..
There are afaik two ways you can do this, and neither one is very elegant tbh :-P
The first is to use dijit.popup.open() and close() to show and hide the dialog. In this case, you have to provide the desired coordinates. I see that you only provide your PreviewThread function with a thread id, but assuming you also tack on the event object, you can do:
PreviewThread: function (ThreadID, event) {
Jaxi.tooltip = new dijit.TooltipDialog({
href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation
});
dijit.popup.open({
popup: Jaxi.tooltip,
x: event.target.pageX,
y: event.target.pageY
});
}
When you're using this method, you also have to manually close the popup, for example when something outside is clicked. This means you need a reference to your tooltip dijit somewhere, for example Jaxi.tooltip like I did above. (Side note: dijit.TooltipDialog is actually a singleton, so there won't be lots of hidden tooltips around your page). I usually end up with something like this for hiding my tooltip dialogs.
dojo.connect(dojo.body(), "click", function(event)
{
if(!dojo.hasClass(event.target, "dijitTooltipContents"))
dijit.popup.close(Jaxi.tooltip);
});
This may of course not work for you, so you'll have to figure out something that suits your particular arrangement.
The second way is to use the dijit.form.DropDownButton, but styling it as if it was a link. I'm not going to go into details on this, just instantiate a DropDownButton on your page and use Firebug to tweak it until it looks like your regular links. FYC, link to DropDownButton reference guide.
You may try:
PreviewThread: function (ThreadID) {
var tooltip = new dijit.TooltipDialog({
href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation,
closable: true,
onMouseLeave: function(){dijit.popup.close(tooltip);}
});
dijit.popup.open({ popup: tooltip, around: dojo.byId("thread-preview-" + ThreadID) });
},
This will close the dialog as soon as you moove the mouse out of the dialog.
Check the API for all possible events:
http://dojotoolkit.org/api/

create a window chrome with an exception in back

I'd just like to create a new window from the background page and put it in back. I tried focused:false but it doesn't seem to make the trick. I tried to save the previous windowId and tabId and update it after having creating the new window but it doesn't solve the problem neither.
Do you know how we can do that?
Here is my code:
function saveTabId() {
// Get the current tab
chrome.tabs.getSelected(null,function(tab){
if (tab != 'undefined') {
if (tab.windowId != windowId) {
currentTabId = tab.id;
currentWindowId = tab.windowId;
}
chrome.windows.create({url:"http://www.google.com", width:100, height:100, top:0, left:0, focused:false}, function() {
chrome.tabs.get(currentTabId, function(tab) {
chrome.windows.update(tab.windowId, {}, function(w) {
chrome.tabs.update(tab.id, {selected:true});
});
});
});
}
});
}
I launched this code at the beginning of background.html and when I refresh the extension, the window is on top of the extensions tab.
P.S: something more strange the window is on top of the extensions tab and when I change tab in this window, the new window stays on top of the other one even if I click and type text in the other one...
I got it kind of working, but popup window is still showing up for a moment before going underneath the current window:
chrome.windows.create({url:"http://www.google.com", width:100, height:100, top:0, left:0, focused:false}, function() {
chrome.windows.update(currentWindowId, {focused:true});
});
Thanks, here is the code I'm using now. The problem in the code of the question was the focus to the other window before updating it. It is strange, when you focus on a window, it doesn't show it on top of the others.
function focusTab(tabId) {
chrome.tabs.get(tabId, function(tab) {
chrome.windows.update(tab.windowId, {}, function(w) {
chrome.tabs.update(tab.id, {selected:true});
});
});
}

jqGrid: different navigator buttons depending on login status

I want to use different navigator buttons in jqGrid depending on login status.
for example: if the user is logged in then add/delete/edit button appeared.
Any ideas?
Thanks in advance.
It is possible to add buttons programmatically using the navButtonAdd method (for the navigation bar) and the toolbarButtonAdd method for the toolbar. For example:
jQuery("#grid").toolbarButtonAdd('#t_meters',{caption:"MyButton",
id: "t_my_button",
title: "Do my button action",
buttonicon: 'ui-icon-edit',
onClickButton:function(){
// Button handle code goes here...
}
});
And:
jQuery("#grid")..navButtonAdd('#pager',{
id: "t_my_button",
title: "Do my button action",
buttonicon: 'ui-icon-edit',
onClickButton:function(){
// Button handle code goes here...
}
});
For more information see the Custom Buttons on the Wiki.
Anyway, once this code is in place, you can detect login status server-side. Then use this knowledge to generate client code that only adds the buttons to your grid if the user is supposed to have access to them.
You can also use for example userdata (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#user_data) to send information about buttons which you need to have in the navigator. userdata should be set by server. Then with respect of:
var navGridParams = jQuery("grid_id").getGridParam('userData');
// var navGridParams = { edit: false, add: false, search: true }
you can get the data set by the server.
Now the typical call like:
jQuery("grid_id").navGrid('#pager', { edit: false, add: false, search: true });
You should place not after creating of jqGrid, but inside of than inside of loadComplete. So the code could looks like following:
var isNavCreated = false;
jQuery('#list').jqGrid({
// ...
loadComplete: function () {
var grid = jQuery("grid_id");
if (isNavCreated === false) {
isNavCreated = true;
var navGridParams = grid.getGridParam('userData');
grid.navGrid('#pager', navGridParams);
}
},
// ...
});
Another option that I see, is to use cookie instead of userdata to send information about navGridParams back to the client.