Develop Reference

How to write a synchronous jQuery dialog for validation before submit?

Here's what I would like to do:
I have a SUBMIT button. After clicking the button, the javascript will do some check/validation on my text (such as spelling, uppercase/lowercase). If the check/validation is not passed, then a jQuery dialog will pop-up and confirm with two options:(1) submit anyway (2) cancel (go back to the page and correct some content).
However, I find that the code executes all the script (and skip the dialog's code in the middle), so the dialog's confirmation code executes last and submit anyway. Is there any way to make the dialog's code execute according to its line number? Many thanks!
P.S. I don't want to use the confirm because I need the font larger.
Here's the <form>:
<form name="annotation" id="annotation" method="post">
...
<input type="submit" class="btn" value="SUBMIT" id="submit">
</form>
Here's the script:
<script>
$( "form" ).submit(function( event ) {
// Perform some checking/validation
// ...
if (!valid) {
$("#dialog").dialog({width:500,
buttons: [
{
text: "Submit anyway?",
click: function() {
// Perform submission
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
// Perform cancelation
$( this ).dialog( "close" );
}
}]
});
}
else
{
// Perform submission
}
});
</script>
And the <div>:
<div id="dialog" style="display:none"><h4>Are you sure you want to submit this?</h4></div>
For example, after I click the button (in the condition of valid == false), a very flash showing of the message "Are you sure you want to submit this?" and then the code submit anyway (too fast, I cannot click anything).

Got some help from friend and solved using document.getElementById('').submit(). Firstly, change <input> to <button>:
<form name="annotation" id="annotation" method="post">
...
<button type="button" class="btn" onclick="submit_post()" value="SUBMIT" id="submitBtn">SUBMIT</button>
</form>
Then change the script:
<script>
function submit_post()
{
// Perform some checking/validation
// ...
if (!valid)
{
$("#dialog").dialog({
width:500,
buttons: [
{
text: "Submit anyway",
click: function() {
document.getElementById('annotation').submit();
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
}
else
{
document.getElementById('annotation').submit();
}
}
</script>

You should use preventDefault(), like below
<script>
$("form").submit(function(event) {
var form = event.target;
if (!valid) {
event.preventDefault() //Here you can prevent submission
$("#dialog").dialog({
width: 500,
buttons: [{
text: "Submit anyway?",
click: function() {
// Perform submission
form.submit();
$(this).dialog("close");
}
},
{
text: "Cancel",
click: function() {
// Perform cancelation
$(this).dialog("close");
}
}
]
});
} else {
// Perform submission
}
});
</script>

Disable a submit input from submitting a form jquery

I am implementing a password manager like chrome extension, which detect the password field and try to intercept the submit function. What I would like is:
User click "login" in a website (say Facebook). The extension content script detect the value of password and username
Ask if the user would like to store the login credentials in the manager
If yes, store the credentials.
The problem is in step 2, I was trying to prevent it from submitting until the dialog returns user action, just like any other browser built-in password manager. But apparently the preventDefault() does not work because the webpage keeps refreshing just like calling curSubmit[0].click(), which would make the dialog keep reappearing.
Is there any idea what is wrong? Part of my code is:
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
if (inputs[i].type.toLowerCase() === "password") {
var curSubmit = $("input[type=submit]",inputs[i].closest('form'));
curSubmit[0].click(function(event){
event.preventDefault();
});
curSubmit[0].onclick = function(){
$('body').append('<div id="store-dialog" title="Store password?"><p>Do you want to store the login credentials?</p></div>');
var buttons = $( ".store-dialog" ).dialog( "option", "buttons" );
$( "#store-dialog" ).dialog({
resizable: false,
height: "auto",
position: { my: "center", at: "center", of: window },
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
},
"Not this time": function() {
$( this ).dialog( "close" );
},
"Never": function() {
$( this ).dialog( "close" );
}
}
});
}
}
break;
}

The syntax you're using for the click handler is invalid because curSubmit[0] is not a jQuery object but a standard DOM element.
These are correct:
curSubmit[0].onclick = function(e) { ...... };
curSubmit[0].addEventListener("click", function(e) { ...... });
As for stopping try the entire artillery for both click and submit events:
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();

Assign enter key to close button in Magnific Popup

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" />

jQueryUI Modal Refreshing Page on Close

In my jQueryUI modal, whenever I click on the buttons, the parent page refreshes, even when I have preventDefault() or return false. Is this expected behavior?
The HTML:
<li><a id="addFunds" class="no-close" href="#">Add Funds</a></li>
The modal:
<div id="addFundsModal" class="modal-hidden" title="Add Funds to Your Account">
<div class="leftBar">
<h3>Add Funds</h3>
//other stuff
<form>
//<fieldset>, etc.
<button class="modal-close btnBlue" href="#">Cancel</button>
<button class="add-funds btnGreen">Add Funds</button>
</form>
</div>
</div>
The jQuery:
$('#loggedInDropdown').on('click', '#addFunds', function(e) {
e.preventDefault();
$('#addFundsModal').dialog({
modal: true,
dialogClass: 'no-close',
width: 500
});
});
$('.ui-dialog').on('click', '.modal-close', function(e) {
e.preventDefault();
$('#addFundsModal').dialog('close');
});
I'm also not sure about whether I should use dialog.close or dialog.destroy, but that is for another post, I suppose.

We usually attach the button behavior inside the .dialog options:
.dialog({
resizable: false,
height:240,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});

Your issue is in the event delegation, i think your click event for cancel never gets executed because .ui-dialog is created only the first time you click on the link so initially attaching the event to that class doesn't take any effect (as .ui-dialog doesn't exist then) and with normal button behavior form submits, page refreshes.
Try:
$('#addFundsModal').on('click', '.modal-close', function (e) {
e.preventDefault();
$('#addFundsModal').dialog('close');
});
or apply it to the class (must better)
$('.modal-hidden').on('click', '.modal-close', function (e) {
e.preventDefault();
$('#addFundsModal').dialog('close');
});
Demo

Generating button clicked event on Jquery Dialog on ENTER Press?

i have below function in my jsp which create and opens the dialog. There is textbox in this dalog. What i want is when i enter on this dialogue
CreateCustomer button should be licked
function createCustomerDialog(){
$("#createCustomerDialog").dialog( {
title : ""Create Customer,
buttons : {
'CreateCustomer' : function() {
},
'Cancel': function() {
$( this ).dialog( "close" );
}
}
});
$("#createCustomerDialog").dialog("open");
}
i tried this but dnot working
$('.ui-dialog-buttonpane > button:last').focus();

On dialog input's onKeyPress event check for a keycode == 13 (ENTER key), when this code is reached just click your button.
$("#yourInputId").keypress(function (e) {
if (e.keyCode == 13)
$("#yourButtonId").click();
});

May be you should use .click() method instead .focus() in this code:
$('.ui-dialog-buttonpane > button:last').focus();
And I think you should try button:first selector, because CreateCustomer button will first.
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
alert('Delete all items clicked');
},
Cancel: function() {
$( this ).dialog( "close" );
alert('Cancel clicked');
}
}
});
And in browser console try this:
$('.ui-dialog-buttonpane button:first').click();