I have the following code,
var targetUrl = $(this).attr("href");
$("#leaving-dialog").dialog({
buttons: {
"No, I want to stay here": function () {
$(this).dialog("close");
},
"Yes, that's okay": function () {
window.location.href = targetUrl;
}
}
});
which basically makes one of the buttons send the user somewhere. What I want it to do, is open the link in a new window or tab and then close the modal (as they will still have the original page open).
Any idea how I could resolve this?
Use window.open(targetUrl); instead of window.location.href, and add the line to close the dialog after that.
Here's an example fiddle (using some of the example dialog code from the jQuery UI docs, and I haven't included the CSS files, so it doesn't look like a dialog!)
Related
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);
}
}
});
How exactly do I open one modal from another modal in meteor? I'm using bootstrap-3-modal package
When I try clicking on the confirm button of one modal, it must close that modal and open a new modal. Somehow,it doesn't seem to work. Here's what I have:
Template.addMoreTemplateConfirmationModal.events({
'click #confirmMorePGInstance'(event){ // this is the confirm button on addMoreTemplateConfirmationModal modal
Modal.show('createTemplateModal'); // this does not work.
// Modal.hide('addMoreTemplateConfirmationModal');
},
Have you tried closing the modal before showing the next one?
Otherwise you could maybe trigger the second modal on the onDestroyed event, although there might be a better way.
Template.addMoreTemplateConfirmationModal.onDestroyed(function() {
Modal.show('createTemplateModal');
});
Simply use setTimeout which runs only once after given miliseconds (300 is the miliseconds in the example below).
'click #confirmMorePGInstance': function(){
// close modal here
Meteor.setTimeout(function () {
//open the next modal here
}, 300);
},
PS: I suggest using 50-100 miliseconds more than the closing effect speed.
I have this problem with my JQuery UI Modal window. Its used when i click a button, then it opens up and append contents to it trough an Ajax call to a php file. Works perfectly the first time i open it, but then when i click another button that should show different content, it still shows the old content in it, and i have to refresh the page for it to work.
This is my Dialog open event which is triggered by a switch, and the last part which appends data to my select box on creation.
$( "#attack" ).dialog({
resizable: false,
width:"400px",
buttons: {
Attack: function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$("#users").selectmenu({
create: function( event, ui ) {
$.ajax({
type: "POST",
url: "mapfunctions/FetchUsers.php",
data: {RegionID: RegionID},
success: function(data) {
$("#users").append(data);
}
});
}
});
The dialog looks like this: http://i.imgur.com/02a2GYB.png
The HTML for it is a bit long, so i hope you dont need that dialog code, if so, let me know and i will add.
Its the Select menu which keeps the old data from the first ajax call.
I tried using Destroy and such on close, but then the dialog would simply never open again heh.
Thanks a lot people, hope this is enough for a clear understanding
This is very common problem with ajax and modal windows.. on clicking next button you have to reset the form and load it new.
for eg:
If you are using form with id "myForm" then on clicking another button reset the form like $("#myForm").trigger('reset'); in jQuery. or any other way
I have a href attribute defined like this:
<img src="~/Content/img/suggest1.png" class="need-buttons pull-right">
And the point is that, when it is clicked, I want to display a pop-up or dialog box in my app, which will ask a question to the user, and will have a yes or no as an answer. And then according to the pressed button, I want to navigate to a different view. I'm pretty sure I need to use jQuery UI for creating the dialog, but how can create it with buttons and assign different views to them, and also how can I trigger it when the href attribute is pressed?
You don't have to use jquery unless you want to.
<img src="~/Content/img/suggest1.png" class="need-buttons pull-right">
function chooser(){
var res = confirm("Do you want to go to url1?");
if(res === true){
alert("option1"); // or document.location = 'url1';
}
else {
alert("option2"); // or document.location = 'url2';
}
}
If you want to make custom buttons you can use jqueryui to do that. Here is a JSFiddle that shows how to do it. Note the external resources loaded in order to make the fiddle work.
Jquery UI's implementation allows you to define your buttons to be anything you want it to be. See this for example
$(document).ready(function () {
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Create an account": addUser,
Cancel: function () {
dialog.dialog("close");
}
},
close: function () {
form[0].reset();
allFields.removeClass("ui-state-error");
}
});
$("#clicker").on('click', function () {
dialog.dialog("open");
});
});
});
You can also embed a view inside your dialog by simply replacing the content in the modal window. You can achieve this by doing an ajax call to your action method have the action return the partial view you want to show in the dialog and then simply using jquery to append the contents within the proper html tags.
I have several pop-ups on home page. I open and close them by selecting them with ID and using fadeIn() and fadeOut(). Now I want to open a specific pop-up by clicking on link from another window? For example, if from that new window I click on 'Pop Up 1', I want home page to open and then show 'Pop Up 1'.
I tried using this code below but while writing this code I realized that the script gets reloaded and thus my function of loading a pop-up does not work.
So my question is, is there some elegant solution you could recommend to show element in one page while a link that specifies which element has to be shown is in another?
$("#galleryNav a").on('click', function() {
window.open("/pixeleyes",'_self',false);
setTimeout(function() {
var popToShow = $(this).attr('data-pop');
$(".text-content-outer").hide();
$("#" + popToShow).fadeIn();
}, 5000);
});
One idea might work is
When you are opening a new page using the below line then send some parameter or hash value with it.
window.open("/pixeleyes",'_self',false);
like
window.open("/pixeleyes#openpopup",'_self',false);
Then in the page ready of this page check if the hash exists open the popup otherwise do nothing.
Not sure if this is what you are looking for.
$("#galleryNav a").on('click', function() {
window.open("/pixeleyes#showpopup",'_self',false);
});
showpopup could be anything that you want to open as popup...