e.preventDefault only at first action - javascript

I have the following script:
var submited = false;
$('.trx-form').one('submit', function(e){
if(!submited){
e.preventDefault();
var i = 0, $this = $(this);
(function conf(){
$.confirm({
title: 'Confirm Action',
content: 'Yakin data yang dimasukan sudah benar?',
closeIcon: 'fa fa-close',
theme: 'dark',
confirm: function(){
if(i < 2){
i++; submited = true;
conf();
}else{
$('.trx-form').trigger('submit');
}
},
cancel: function(){
e.preventDefault();
}
});
})();
}
});
on first click on submit button the confirmation dialog popup for 3 times, after that the form should be submited without the popup. it's working if I click the submit button once again, but not with $('.trx-form').trigger('submit'). anyone knows the problem?

Because you are using the $().one function which means it can be clicked once, how about $("").on("")

one is only executed once and will unbind the event after the first execution.
Try using on to bind the event and handle multiple clicks if needed.

Try using like this:
var submited = false;
$(document).on("submit", ".trx-form", function(e) {
$this = $(this);
if(!submited){
e.preventDefault();
var i = 0,
(function conf(){
$.confirm({
title: 'Confirm Action',
content: 'Yakin data yang dimasukan sudah benar?',
closeIcon: 'fa fa-close',
theme: 'dark',
confirm: function(){
if(i < 2){
i++; submited = true;
conf();
}else{
$this.submit();
}
},
cancel: function(){
e.preventDefault();
}
});
})();
}
});

thanks for everyone that answered my question. I fix it with much help from
var submited = false;
$('.trx-form').on('submit', function(e){
if(!submited){
e.preventDefault();
var i = 0, $this = $(this);
(function conf(){
$.confirm({
title: 'Confirm Action',
content: 'Yakin data yang dimasukan sudah benar?',
closeIcon: 'fa fa-close',
confirmButton: 'Ok',
cancelButton: 'Cancel',
confirmButtonClass: 'btn btn-primary',
cancelButtonClass: 'btn btn-danger',
theme: 'black',
confirm: function(){
if(i < 2){
i++; submited = true;
conf();
}else{
$('[name="submit"], #_submit').click();
}
},
cancel: function(){
submited = false;
}
});
})();
}
});
first, instead of doing submit() or trigger('submit') I do click() on the submit button. second, I forget the popup should re-appear if the user hit cancel button and then resubmit the form, so i use on() instead of one(), because one() as it descripted only handle the event one time, it will unreg itself on second chance.

Related

jQuery - wait until confirmation popup returns value

So I have a table of records, where everyone of them has a remove button. I want to add a confirmation popup, which will shows up when button clicked.
var $confirmDialog = $('<div></div>')
.html('This record will be removed.')
.dialog({
autoOpen: false,
title: 'Remove confirtmation',
buttons: {
"OK": function () {
$(this).dialog("close");
return true;
},
"Cancel": function () {
$(this).dialog("close");
return false;
}
}
});
My remove button event:
$(".removeButton").on("click", function(){
if($confirmDialog.dialog('open')){
var name = $(this).siblings(".someClassForNameHolder").text();
var urlPath = $("#hiddenForUrl").val();
Application.postRecord(name, "Remove", urlPath);
}
});
Btw, i have few following points:
1) I can't provide every record in the table with unique ids, so I have to keep my data collections (name variable) inside my removeButton event (to be able to use this.sibling...).
2) I want my script to wait until $confirmDialog returns value and only then continue code execution.
Just assign your urlPath to a global variable, and execute the POST inside the OK handler:
var nameToRemove, urlPathToRemove;
var $confirmDialog = $('<div></div>')
.html('This record will be removed.')
.dialog({
autoOpen: false,
title: 'Remove confirtmation',
buttons: {
"OK": function () {
$(this).dialog("close");
Application.postRecord(nameToRemove, "Remove", urlPathToRemove);
},
"Cancel": function () {
$(this).dialog("close");
return false;
}
}
});
$(".removeButton").on("click", function(){
if($confirmDialog.dialog('open')){
nameToRemove = $(this).siblings(".someClassForNameHolder").text();
urlPathToRemove= $("#hiddenForUrl").val();
}
});

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.

Turning a Standard Javascript Confirm Dialog into Bootbox Confrim

$(document).ready(function () {
$("#close").click(function () {
var link = $(this).attr("href"); // "get" the intended link in a var
var result = confirm("Are you sure?");
if (result) {
document.location.href = link; // if result, "set" the document location
}
});
});
How would I use Bootbox dialogs instead of the JavaScript Dialogs?
EDIT
Well I've tried but nothing happens upon clicking the Ok button the bootbox dialog
$(document).on("click", "#close", function (e) {
e.preventDefault();
var link = $(this).attr("href"); // "get" the intended link in a var
bootbox.confirm("Are you sure you want to close this Incident? This operation cannot be reversed.", function (result) {
if (result) {
document.location.href = link;
} else {
console.log("user declined");
}
});
});
I would consider using a Bootbox Dialog, like below.
Bootbox Dialogs allow you to attach callback functions to the buttons, so you can specify a specific function to occur for each button.
I also included the line closeButton: false, so that the user cannot click a close button to dismiss the Dialog, and instead must either click Ok or Cancel.
$(document).on("click", "#close", function (e) {
e.preventDefault();
var link = $(this).attr("href"); // "get" the intended link in a var
bootbox.dialog({
closeButton: false,
message: "Are you sure you want to close this Incident? This operation cannot be reversed.",
buttons: {
cancel:{
label: "Cancel",
callback: doThisOnCancel
},
ok:{
label: "Ok",
callback: doThisOnOk
}
}
});
doThisOnCancel(){
console.log("user declined");
}
doThisOnOk(){
document.location.href = link;
}
});

jQuery ajax form submitting multiple times

I am having some issues with multiple form submissions with a jQuery/ajax form. I found this by printing every instance of form submission on my server, and saw that a form would submit correctly once, then again multiple times.
Just to be clear, this code works 100% correctly for the first submission, but when I click on another row in my table, and create a new dialog/submit it, it ends up submitting multiple times.
I think it has to do with event binding, but am having trouble fixing it. Any insight or help would be much appreciated.
The button's id is "save-flag-button"
// When someone clicks on the flag column in my table, a dialog pops up //
// on the condition that a flag does not exist. //
$(function() {
$('.flag').click(function() {
var cellId = "flag" + String(this.getAttribute("data-client-rel"));
if (this.getAttribute("data-flag-exists") == '0') {
// create dialog
var dialog = flagDialog('Create Flag');
// Making the form ajax
$("form", dialog).ajaxForm(function(success, data) {
if (success) {
$("#" + cellId).attr("data-flag-exists", '1');
$("#" + cellId).attr("data-flag-content", data["flag_state"]);
$("#" + cellId).text(data["flag_state"]);
$("#flag-dialog").dialog("close");
} else {
alert("Failed to submit flag. Please retry.");
}
});
} else { }
}).hover(function() {
if (this.getAttribute("data-flag-exists") == '0') {
this.innerHTML = '<span style="color: #4183C4;">Create flag!</span>';
}}, function() {
this.innerHTML = this.getAttribute("data-flag-content");
})
});
// jquery dialog code //
function flagDialog(dialogTitle) {
var dialog = $("#flag-dialog").dialog({
autoOpen: false,
autoResize: true,
modal: true,
minHeight: 300,
minWidth: 450,
position: "center",
title: dialogTitle,
buttons: [{
id: "flag-cancel-button",
text: "Cancel",
click: function() {
$(this).dialog("close");
}
},
{
id:"save-flag-button",
text: "Submit",
click: function() {
$("#flag-dialog").dialog("destroy");
// $("#client-relationship-flag-form").submit();
}
}],
close: function() {
//$("#notes-text").text("");
}
});
// Unbinding buttons here //
$("#save-flag-button, #flag-cancel-button").unbind();
$("#save-flag-button").unbind('click').click(function() {
$("#client-relationship-flag-form").submit();
});
$("#flag-cancel-button").click(function() {
$("#flag-dialog").dialog("close");
});
dialog.dialog("open");
return dialog;
};
ajaxForm binding should be done once only.
Try to put the ajaxForm binding on $(document).ready event and try to restructure your logic. ajaxForm was bind every time you click .flag element and all previously bind ajaxForm would be called on all succeeding click event.

Jquery modal dialog and form submit

I have a form where I need to display a confirm dialog to the user before saving.
I have done this by intercepting the form submit function as follows:
$("#my_form").submit(function(e) {
if ($("#id").val() > 0) {
var $dialog = $('<div></div>')
.html('Are you sure?')
.dialog({
autoOpen: false,
title: 'Save New Invoice',
modal: true,
buttons: {
"OK": function() {
$dialog.dialog('close');
$("#my_form").submit();
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
e.preventDefault();
return false;
}
});
However, the OK button does not function correctly - the dialog does not close and the form is not submitted.
If I change the OK function as follows, then the dialog is closed and the alert is shown.
"OK": function() {
$dialog.dialog('close');
alert('form will be submitted');
},
So, I am guessing that this is something to do with the $("#my_form").submit(); method.
Isn't this like calling your form submit function again and again. I see you are attaching the function to submit functionality, and when you call the submit again,it is invoking the same function.
Your $("#invoice_edit_form") is some other form.Is it like asking one form to submit other form?
The problem you've got is that your submit handler always returns false and has e.preventDefault() too for good measure. Both of these will stop the form being submitted, regardless of whether the user clicked OK or Cancel.
You need to change the logic so that your modal confirmation is shown on a button click (or any other event), not on the form submission. Then, if the user clicks ok you can call the forms' submit() method.
$("#submitButton").click(function(e) {
if ($("#id").val() > 0) {
var $dialog = $('<div></div>')
.html('Are you sure?')
.dialog({
autoOpen: false,
title: 'Save New Invoice',
modal: true,
buttons: {
"OK": function() {
$dialog.dialog('close');
$("#my_form").submit();
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
}
});

Categories

Resources