Assign enter key to close button in Magnific Popup - javascript

I have a functioning popup form that I use with Magnific Popup Lightbox. Inside I have a custom close button that handles the collected information when clicked. I would like the user to be able to press enter (at any time, not just after the final text box) and have the close button activated. My code is as follows:
$.magnificPopup.open({
items: {
src: 'nameselect.html',
type: 'ajax'
},
closeOnContentClick : false,
closeOnBgClick :true,
showCloseBtn: false,
enableEscapeKey : false,
callbacks: {
open: function(){
$.magnificPopup.instance.wrap[0].addEventListener('focus', function (e) {kNameSearch(e,focusText)});
$(document).keypress(function(e){
if (e.which == 13){
$("#cbutton").click();
}
});
},
afterClose: function(){
document.getElementById("SearchName").blur();
}
}
});
But the $(document).keypress(function(){}) lines don't seem to be working. I have also tried inserting the code in the function called by the listener above it, with no success. Any suggestions greatly welcomed.

The solution was to directly call the button function, not to try to "click" the button. So this:
$(document).keypress(function(e){
if (e.which == 13){
$("#cbutton").click();
}
});
was changed to this:
$(document).keypress(function(e){
if (e.which == 13){
closeButton();
}
});
Given that the button was identified in the HTML as:
<input id="cbutton" onclick="closeButton()" type="button" value="Close" />

Related

jQuery click event trigger $.confirm stacking the event

I want a button to submit a form when is clicked or the enter key is pressed on focus, but before I want to display a confirm alert displaying some information to the user using jquery-confirm, when he accepts the modal then the target form must submit.
For some reason when I confirm the first time is OK, but when I do a second time looks like the $.confirm is stacking, then is displayed two times, after confirm if I click again it's displaying 3 times... Why this is happening?
I'm using data attributes to select the element plus form target, there is a fiddle with my code:
https://jsfiddle.net/z3mn21dz/7/
Note: I don't want a walk around, I know there's a lot of possible alternatives but I want to know what's wrong.
HTML
<button data-role="confirm" data-target="target">
Submit
</button>
<h1>Form to submit</h1>
<form action="" id="target"><input type="text"></form>
JS/jQuery
$(document).ready(function($){
$('[data-role="confirm"]').on('keyup click', function (e) {
e.preventDefault();
var target = $(this).data('target');
if(e.keyCode == 13 || e.type == "click")
{
$(this).confirm({
title: 'Confirm!',
content: 'Simple confirm!',
buttons: {
confirm: function () {
$.alert('Confirmed!');
},
cancel: function () {
$.alert('Canceled!');
},
somethingElse: {
text: 'Something else',
btnClass: 'btn-blue',
keys: ['enter', 'shift'],
action: function(){
$.alert('Something else?');
}
}
}
});
}
})
});
In your fiddle updated your entire JS code like below and it seems working properly. P.S. Line number line 9 on the script $(this).confirm({ was changed to $.confirm({.
$(document).ready(function(){
$('[data-role="confirm"]').on('keyup click', function (e) {
e.preventDefault();
var target = $(this).data('target');
if(e.keyCode == 13 || e.type == "click")
{
$.confirm({
icon: 'fa fa-exclamation-triangle',
confirmButton: 'bestätigen',
confirmButtonClass: 'btn btn-danger',
cancelButton: 'abbrechen',
confirm: function(ee){
$( "#"+target ).submit();
}
});
}
})
});
UPDATE
The Javascript part is updated as
$(document).ready(function($){
$('[data-role="confirm"]').on('keyup click', function (e) {
e.preventDefault();
var target = $(this).data('target');
if(e.keyCode == 13 || e.type == "click")
{
$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
buttons: {
confirm: function () {
$.alert('Confirmed! Target: '+target);
},
cancel: function () {
$.alert('Canceled!');
},
somethingElse: {
text: 'Something else',
btnClass: 'btn-blue',
keys: ['enter', 'shift'],
action: function(){
$.alert('Something else?');
}
}
}
});
}
})
});
The reason for your stack was that you were using $(this).confirm instead of $.confirm. i.e., the confirm function was associated with JQuery, and since you used this it was not getting bound at first instance. Secondly, the syntax of confirm needs buttons to take the necessary actions which too was missing before. Hope this clarifies.
$(document).ready(function($){
$('[data-role="confirm"]').on('keyup click', function (e) {
e.preventDefault();
var target = $(this).data('target');
if(e.keyCode == 13 || e.type == "click")
{
$(this).confirm({
title: 'Confirm!',
content: 'Simple confirm!',
buttons: {
confirm: function (e) {
$.alert('Confirmed! Target: '+target);
$('.jconfirm').remove();
},
cancel: function () {
$.alert('Canceled!');
},
somethingElse: {
text: 'Something else',
btnClass: 'btn-blue',
keys: ['enter', 'shift'],
action: function(){
$.alert('Something else?');
}
}
}
});
}
})
});
The reason is, once you click 'confirm' button, a new element 'jconfirm' is created,you can see the 'Elements' tab, so you need to remove it everytime.
This issue is happening because your button is outside the form element, it might cause the issue
Take the button within your form element and include type="sumbit" in the button.
Look the following function, customize as you needed.
function confirmDel(e){
e.preventDefault();
$('#dialog-confirm').dialog({
resizable:false,
height:"auto",
width:300,
modal:true,
buttons:{
"Confirm Delete":function(){
e.target.submit();
$(this).dialog("close");
},Cancel:function(e){
e.preventDefault();
$(this).dialog("close");
}
}
});
}
}
Call this function in the onsubmit event of your form. It will solve the issue.
You don't need to re-define the confirm object in every click, only once. In order to prevent the sticky confirm dialog behaviour you can add a control variable, so the confirm definition only happens once. Following your code:
$('[data-role="confirm"]').on('keyup click', function (e) {
if ($(this).data.defined) {return;}
$(this).data.defined = true;
//...
There are other issues you might want to fix, as the keyup event should be attached to the input field rather than the button (I'm guessing). This workaround is focused on the confirm behaviour only.

Alert popup and confirm disable the e.preventDefault()

I have textboxes in html table, and I want to bind the enter event with jQuery like this
$(function ()
$('#MainPage_resultatTable td.resultat input:text')
.bind('keydown',function (e) {
if (e.keyCode == 13) {
e.preventDefault();
confirm('are-you ok ?'); /* or alert*/
}
});
});
The e.preventDefault() doesn't work. The postback is achieved
When I remove the "confirm" line the e.preventDefault() do the job.
Any suggestion for keeping the confim popup without postback would be appreciated.
Note : I tried it with e.stopPropagation(); and e.stopImmediatePropagation();. Same result.

Dialog Widget. How do I programmatically call the ok method when I hit return key

I am using jQuery UI dialog widget. I have a function associated with the "ok" key within the buttons object:
var myself = this;
this.dialogForm.dialog({
autoOpen: false,
modal: true,
buttons: {
"ok": ok,
cancel: function() {
myself.dialogForm.dialog( "close" );
}
},
close: function() {
myself.form[ 0 ].reset();
myself.dialogForm.remove();
myself.dialogForm = undefined;
if (trackMenu) trackMenu.hide();
}
});
How do I programmatically call the ok function when I press the return key. I want to get rid of the need for the user to mouse over and click the ok button.
Add an event listener when the jQuery UI modal is open.
Very basic example:
function modalEnterKeyPress (e) {
if (e.keyCode === 13)
return ok()
}
// When you open the modal
$(document.body).one('keyup', modalEnterKeyPress);
// When you close the modal
$(document.body).off('keyup', modalEnterKeyPress);

Jquery dialog submit form by Enter Key

I want submit form for Jquery dialog by pressing enter key.
HTML
<!-- Pin Notification Form -->
<div id="pin-dialog-form" title="Verification Pin">
<div id="agent_pin_container">
<input type="password" name="verification_pin" id="verification_pin"
value="" class="form-control" placeholder="Verification Pin" />
</div>
</div>
JQUERY
$( "#pin-dialog-form" ).dialog({
autoOpen: false,
height: 200,
width: 300,
modal: true,
buttons: {
"Submit": function() {
// PROCESS
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$( this ).dialog( "close" );
}
});
Now, I can not use this type of code in here, if (e.keyCode == 13) {. Because, the form is submitted by modal window itself. on the other hand I can not use this,
open: function() {
$(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();
}
because, I need to enter PIN first then focus on submit button.
Is there any other way to do it?
Thanks.
As per comments you should be able to grab keypress document-wide using:
$(document).keypress(function(e){
if (e.keyCode == 13) {
// CODE TO SUBMIT THE FORM either AJAX or *form*.submit()
// CODE TO CLOSE THE MODAL
}
});
sources:
Submitting a form on 'Enter' with jQuery?
Capture key press without placing an input element on the page?

jquery using trigger('click') within the click handler

I am trying to create a custom confirm dialog when user clicks on a link with specific class. It's pretty trivial, but the catch is, if the user clicks on the "Confirm" button in the dialog (Using Twitter Bootstrap 3), I want to trigger click on the same link, but this time instead of showing dialog, to follow the link.
Everything is well up to the point when I want to trigger a click event on the <a> tag with some parameters. Here is very simplified sample of what I want to achieve
Html:
<a class="initial" href="http://yell.com">click me</a>
<div class="dialog hidden">
Click me again
</div>
JavaScript:
$(document).on('click', 'a.initial', function(e, forced){
//return true;
if(typeof(forced) !== 'undefined' && forced === true){
$(this).addClass('clicked');
console.log('Clicked');
return true;
} else{
e.preventDefault();
$(this).removeClass('clicked');
$('div').removeClass('hidden');
}
});
$(document).on('click', 'div.dialog a', function(e){
$(this).parent().addClass('hidden');
$(this).parent().prev().trigger('click', [true]);
});
Here is JSFiddle sample
As you can see, if the second link is clicked, the first link is colored in red, as well as console.log triggers message, but then the link doesn't follow the url. Unfortunately, I don't see any error or warning which could give me some clue. I know I can use window.location = $(element).attr('href'), but I am wondering why it is not working in the described way?
Any help is much appreciated.
It's possible to do this, for example, running
document.getElementById('nav-tags').click();
On this page will take the user to the tags page.
Therefore, it seems the issue is the jQuery trigger function.
The problem then becomes, being able to natively trigger the click event but also pass that forced boolean into the event.
The solution I came up with is to remove the second argument, and to set a state in the original link via data:
$(document).on('click', 'a.initial', function(e){
//return true;
if($(this).data('trigger') === true) {
$(this).addClass('clicked');
console.log('Clicked');
} else{
e.preventDefault();
$(this).removeClass('clicked');
$('div').removeClass('hidden');
$(this).data('trigger', false);
}
});
$(document).on('click', 'div.dialog a', function(e){
$(this).parent().addClass('hidden');
$(this).parent().prev().data('trigger', true).get(0).click();
});
JSF
You can consider to use a solution like this:
$(document).on('click', 'a.initial', function(e, forced){
e.preventDefault();
$('div').removeClass('hidden').find("a").attr("href",this.href);
});
:) like #Archer suggest solution.
Try this:
$(document).on('click', 'a.initial', function(e, forced){
e.preventDefault();
//return true;
if(typeof(forced) !== 'undefined' && forced === true){
$(this).addClass('clicked');
console.log('Clicked');
return true;
} else{
//e.preventDefault();
$(this).removeClass('clicked');
$('div').removeClass('hidden');
}
});
$(document).on('click', 'div.dialog a', function(e){
e.preventDefault();
$(this).parent().addClass('hidden');
$(this).parent().prev().trigger('click', [true]);
});
okey. I found something. This is already a bug in jquery as per the below ticket, but closed.
http://bugs.jquery.com/ticket/11326
And the workaround is adding a span(or similar) inside the anchor and add click on that. Please find below the fiddle for same
http://jsfiddle.net/RCmar/2/
HTML
<a class="initial" href="http://yell.com"><span>click me</span></a>
<div class="dialog hidden">Click me again</div>
JS
$(document).on('click', 'a.initial span', function(e, forced){
//return true;
alert(1);
if(typeof(forced) !== 'undefined' && forced === true){
$(this).addClass('clicked');
console.log('Clicked');
return true;
} else{
e.preventDefault();
$(this).removeClass('clicked');
$('div').removeClass('hidden');
}
});
$(document).on('click', 'div.dialog a', function(e){
$(this).parent().addClass('hidden');
$(this).parent().prev().children().trigger('click', [true]);
});

Categories

Resources