Develop Reference

Magnific Popup focus button on open

I'm using the Magnific Popup plugin and I would like to make my main action button (Save), focused when the pop up opens so that if a user clicks the enter key, it simply triggers a click event.
I tried doing the following on the console with no luck:
$('.popup-modal-save').focus();
Is there a way of doing this without using a key down event listener?
Here is a link to my JSFiddle: https://jsfiddle.net/dwjfq1gp/25/

You can use the focus option of magnific-popup.
$.magnificPopup.open({
items : {
type : 'inline',
src : '#idOfInlinePopUP'
},
focus: '#closeButton',
closeOnBgClick:false,
enableEscapeKey:false
}, 0);
Code of button:
<input type="button" value="close" onclick="$.magnificPopup.close();" id="closeButton">
In this code the focus option consists of the ID of the button which you want to open. And src has to contain the id of the inline popup.
If you are able to open your popup successfully then you just need to add focus attribute with ID of the button you want to click on enter click.
In this answer, on opening of popup the default focus will be on closeButton. On clicking this button the popup will close.

you should use events to focus on save button when popup opened.
fiddle
$('.popup-modal').magnificPopup({
...
callbacks: {
open: function() {
$('.popup-modal-save').focus();
},
}
});

You actually need to listen the keypress event for that. And when the modal is opened then you need to attach the focus event. Here is a working fiddle https://jsfiddle.net/2fb3d841/1/
// I've just added this
callbacks: {
open: function() {
$('.popup-modal-save').focus();
$(document).keypress(function(e){
if (e.which == 13){
$(".popup-modal-save").click();
$.magnificPopup.close();
}
});
},
}

Close jQuery UI Dialog on mouse click outside of box

So I have some jQuery UI Dialogs and for user usability I think it would be best if users would be able to close the dialog box when clicking outside the box instead of having to click the small close button on the dialog box.
jQuery Code:
$(document).ready(function() {
var dlg=$('#createTeam').dialog({
title: 'Create a Team',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:600,
height:285,
clickOutside: true, // clicking outside the dialog will close it
clickOutsideTrigger: "#addEngineer",
close: function(event, ui) {
location.reload();
}
});
$('#createTeamLink').click(function(e) {
dlg.load('admin/addTeam.php');
e.preventDefault();
dlg.dialog('open');
});
});
Can anyone advise on what I need to add to the code above to be able to close the dialog box on mouse click outside of the box?

I'm not sure why the clickOutside : true property isn't working though I can provide a simple workaround. On the page with the modal, you can catch body click events like so:
$(document).click(function() {
dlg.dialog('close');
});
However, this will be ANY click event on the page, so we have to exclude clicking on the modal from firing this event handler. It seems you have already done this with e.preventDefault() however, so add the above code and it should work. A better solution would be to include a modal backdrop in your modal HTML, and catch click events on that. If you provide your HTML I'll give you an example of this.

Remove beforeClose event handler - jQuery UI Dialog

I have a jQuery UI dialog box with a form inside it. I'm trying to implement a feature where if a field in the form has been modified, we'll be showing a confirmation message using noty
Now, unlike an javaScript confirmation box, noty does not stop script execution. So, in the dialog beforeClose event, I'm -
Showing a noty confirmation if form data is modified and then returning false.
Simply returning true if the form data has not been modified.
All is working well. Now we ask the user -
The data in the form has been modified. Are you sure you want to close?
If he clicks no - we simply close the noty and keep the dialog box open.
But if he clicks yes, we try to close the dialog box, which triggers the beforeClose event handler again and we go into the loop again.
I've tried calling .off on the div that has been converted to a dialog box before calling the close event, but that doesn't seem to be removing the click.
Here is a simple pseudo code to explain the issue -
DialogCloseEvent() {
if data has been modified {
Show noty {
// IMPORTANT - This is executed after return false.
in noty user clicks NO - do not close dialog box {
close noty and done
}
in noty user clicks YES - close the dialog box {
// This calls the DialogCloseEvent again.
call the close method of the dialog box.
close noty
}
}
return false
}
no it has not been modifed {
// Closes the dialog without calling the event again
return true;
}
}

Expanding on your pseudo code you could add a flag to force close the dialog:
var forceClose = false;
DialogCloseEvent() {
if data has been modified and !forceClose {
Show noty {
// IMPORTANT - This is executed after return false.
in noty user clicks NO - do not close dialog box {
close noty and done
}
in noty user clicks YES{
forceClose = true;
- close the dialog box {
// This calls the DialogCloseEvent again.
call the close method of the dialog box.
close noty
}
}
}
return false
}
no it has not been modifed {
// Closes the dialog without calling the event again
return true;
}
}
UPDATE with code
var forceClose = false;
$("#dialog").dialog({
open: function (event, ui) {
forceClose = false; //reset the flag each time
},
beforeClose: function (event, ui) {
if(forceClose){
return true;
}
//your dialog close event
//set the flag to true when you want to close the jqueryui dialog
}
});

According to the code for the close API for Jquery UI dialog, there is no way not to force close a dialog without firing events. Ideally there should be an API which just executes the functionality without triggering events. I tried just a way to enable this by replicating the method for now. Best way as an addition to the API itself. So the change is something on the lines of this,
// code from existing
if(!forceClose && this._trigger("beforeClose") === false){
return;
}
// continue with existing
Have a fiddle for the same here http://jsfiddle.net/Lj3Nk/1/
Going to submit a feature/pull request to jquery ui now. Will update with details when done. In the mean while, let me know if this helps.
UPDATE
Jquery ui ticket - http://bugs.jqueryui.com/ticket/9943
Pull request - https://github.com/jquery/jquery-ui/pull/1218

Example 1
Based on the flag approach:
var notyStatus = null;
$("#dialog").dialog({
beforeClose: function (event, ui) {
// possible values for notyStatus are
// null: preventDefault and show the warning
// else: do nothing and let the dialog close
if (notyStatus === null) {
event.preventDefault();
$('<p title="Replace me with noty">Close the dialog?</p>').dialog({
modal: true,
buttons: {
"Close": function () {
notyStatus = true;
$(this).dialog("close");
$("#dialog").dialog("close");
},
"Keep Open": function () {
$(this).dialog("close");
}
}
});
}
}
});
Demo 1
Example 2
Remove the beforeClose event handler. You can use .dialog("option", "beforeClose") to get, set or unset the event handler. The code looks like this:
$("#dialog").dialog({
beforeClose: function (event, ui) {
event.preventDefault();
$('<p title="Replace me with noty">Close the dialog?</p>').dialog({
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
$("#dialog")
.dialog("option", "beforeClose", null)
.dialog("close");
},
"Keep Open": function () {
$(this).dialog("close");
}
}
});
}
});
Demo 2
In both examples, replace the inner jQuery UI confirmation dialog code with noty. It allows you to create action buttons with callbacks so the code will be similar.

You can use the dialog widget's "option" method to change or remove the beforeClose event handler.
So when the user clicks 'yes', you could get the dialog to close by executing:
$('#myDialog')
.dialog('option', 'beforeClose', function() {})
.dialog('close');
Here's a fiddle that shows how it works: http://jsfiddle.net/BrDE7/1/
Jquery UI documentation on the "option" method: http://api.jqueryui.com/dialog/#method-option

focus the textbox after jquery ui dialog is closed

I have a textbox on my asp.net MVC view which shows a JQuery UIi dialog on focus. On this dialog, I want to make sure that when OK button is clicked, the same textbox on parent page should get focus which showed popup. I tried to use JQuery focus after and before close like this:
$(this).dialog("close");
$("#DefaultCallFrom1").focus();
but It is not working. Please suggest a solution to this.

When initializing the dialog, use the close event to set the focus when the dialog is closed :
$(this).dialog({
close: function( event, ui ) {
$("#DefaultCallFrom1").focus();
}
});
jQuery UI Dialog Docs for the close event.
EDIT
If you're trying to apply focus after a button in the dialog is clicked, that should be as simple as :
$( "#dialog" ).dialog({
autoOpen: true,
buttons: [
{
text: "Ok", click: function() {
$( this ).dialog( "close" );
$('#DefaultCallFrom1').focus();
}
}
]
});
FIDDLE

Resetting a form using jQuery validate from within a dialog

I'm using jQuery Validate in a form within a jQuery dialog. When the user closes the dialog I wish to clear all form fields and reset the fields which have error feedback displayed.
It is correctly resetting the fields to blank, but the error feedback is not being cleared properly.
Here's my dialog code.
// Attach dialog
$("#myDialog").dialog({
autoOpen: false,
modal: true,
close: function(){
$('#myDialog')[0].reset(); // This works in resetting the actual form values
$("#myDialog").validate().resetForm(); // Not working :(
}
});

Is the form id myDialog?
If so, I would change the structure to be:
<div id="myDialog>
<form id="myForm">
//inputs, etc...
</form>
</div>
So then your dialog call would look like:
$("#myDialog").dialog({
autoOpen: false,
modal: true,
close: function(){
//$('#myForm')[0].reset(); // This works in resetting the actual form values
$("#myForm").validate().resetForm(); // Not working :(
}
});
I think you are running into collisions with having jQuery UI act on the #myDialog in conjunction with it being the form you are trying to validate.
Another option is to destroy the dialog on close, and always recreate it on open.

If they are still not clearing, changing close to beforeClose works, so they are cleared before the dialog is closed and moved on the DOM.