I am using http://vitalets.github.io/x-editable/ and wish to validate an input using Ajax. For testing, I created the following script https://jsfiddle.net/m698gxgj/1/.
My Ajax request is asynchronous so the validate callback returns I believe undefined, and therefore it doesn't result in the input failing validation.
I "could" change my Ajax request to be synchronous, but everything I read (https://stackoverflow.com/a/14220323/1032531) indicates that is not a good idea.
How is this accomplished?
<p>Name</p>
$('#name').editable({
type: 'text',
title: 'Name',
url: '/echo/json/',
pk: 123,
validate: function (value) {
if (value == 'bob') {
return 'bob is not allowed';
} else {
$.post('/echo/html/', {
html: 'false',
delay: .5
}, function (result) {
if (result == 'false') {
console.log('remote error');
return 'remote error';
}
});
}
}
});
The validate option is only to be used for client side validation, so the if (value == 'bob') bit is alright, but you shouldn't fire the ajax post in the else block.
You should make the url option do the ajax post, then you can leverage the success and error options to handle async callback properly.
For example:
$('#name').editable({
type: 'text',
title: 'Name',
url: function () {
return $.post('/echo/json/', {
json: 'false',
delay: .5
});
},
pk: 123,
validate: function (value) {
if (value == 'bob') {
return 'bob is not allowed';
}
},
success: function (response) {
if(response === false) {
console.log('remote error from success');
return 'remote error';
}
},
error: function (response) {
console.log('remote error from fail');
return 'remote error';
}
});
jsfiddle:
https://jsfiddle.net/x0bdavn7/
Related
I have next method that is triggered on button click
function approveDay(URL, dateDay, action, cNT) {
var message = '';
if (action === 'false') {
message = prompt('Enter notes : ', '');
if (message === null) {
return false;
} else if (message.trim() === "") {
showMessage(2,
"The status of the timesheet cannot be changed to \"Not approved\" if no comments are specified!");
return false;
}
}
var data;
if (cNT === null) {
data = addAntiForgeryToken({ UID: userId, dateDay: dateDay, action: action, message: message });
}
else {
data = addAntiForgeryToken({ UID: userId, dateDay: dateDay, action: action, message: message, cNT: cNT });
}
blockUI();
$.ajax({
type: 'POST',
url: URL,
data: data,
success:
function (result) {
showMsg(result);
location.reload();
},
error: function (xhr, textStatus, errorThrown) { AjaxErrMessage(xhr, textStatus, errorThrown); }
});
return false;
}
I need to remove prompt and replace it with dialog box, which contains input field for message and button for add that saves this message. But also I need to stop the execution of the function. I know than promises can help me with my problem.
How can I implement this solution or solution without promises. My dialog box initialize function is below
function initModalWindow() {
$("#RejectNotesBlock").dialog({
width: 500,
modal: true,
close: function (event, ui) {
$("#RejectNotesBlock").dialog("close");
}
});
}
Thank you.
I have 2 functions: one to add and another to delete. I would like to reuse the same ajax call to send the parameters that are added or deleted. How can I optimize my function?
Here is my code at the moment
jQuery(document).ready(function () {
function ajaxCall(action, callback) {
jQuery.ajax('/index.php', {
type: 'POST',
dataType: 'json',
data: {
option: 'quotes',
view: 'request',
task: action,
format: 'raw',
tmpl: 'component'
},
success: function (response) {
if (response.error == true) {
alert(response.errors.join('\n'));
}
else if (response.status == "DONE") {
callback(false);
}
},
error: function (xhr) {
console.log("Error: ", JSON.stringify(xhr));
callback(true);
}
});
}
jQuery('#ajax_add').click(function (event) {
event.stopPropagation();
var id = jQuery('#id').val();
var price = jQuery('#price').val();
//I want to send two variables: id, price
ajaxCall("addData", function (error) {
if (error) {
alert("Error!.");
}
else {
alert("It's OK!");
}
});
});
});
The function to delete is similar to "addData" function, it also calls "ajaxCall" and will send parameters to remove.
I'm blocked and I do not know how to solve it, I hope you can give me some help, thanks
You could add a new argument to the ajaxCall function and send the parameters as an object them merge them with the data you've in the function like :
function ajaxCall(action, params, callback) {
Then in the ajax call :
jQuery.ajax('/index.php', {
type: 'POST',
dataType: 'json',
data: $.extend(params, {
option: 'quotes',
view: 'request',
task: action,
format: 'raw',
tmpl: 'component'
}),
...
The call inside the event will be like :
ajaxCall("addData", {id: id, price: price}, function (error) {
I'm having a real hard time figuring out the behaviour of Promises. I'm using Vue and the vee-validate library, which allows for manual validation of a form via:
this.$validator.validate()
However, when I try to use it I get weird behaviour:
async isFormValid() {
return await this.$validator.validate();
},
Whenever I submit a form with errors, the form sends the AJAX request:
onApprove() {
if (!that.isFormValid) {
return false;
}
$.ajax({
...
});
return false; // Modal never closes unless AJAX is successful.
},
Additionally, I've tried the following construct:
onApprove() {
this.$validator.validate().then(result => {
if(result) {
$.ajax({
...
});
}
return false; // Modal never closes unless AJAX is successful.
});
},
But this doesn't work either. I've found a work-around by doing this:
isFormValid() {
this.$validator.validate();
return Object.keys(this.fields).every(key => this.fields[key].valid);
},
But if someone could explain what I'm misunderstanding about the `Promise, that would be great.
Edit
Full onApprove example (always returns true regardless of validation:
onApprove() {
that.$validator.validate().then(result => {
if (result) {
$.ajax({
url: '/settings/user_management_add_user', method: 'POST', data: {
csrfmiddlewaretoken: that.csrfToken, password: that.password, user: JSON.stringify(that.users[that.activeUserRow]),
}, success() {
$('#modify_user_modal').modal('hide');
that.showToast('check icon', gettext('User created'));
that.activeUserRow = undefined;
that.initialQuery();
}, error(data) {
that.showToast('remove icon', gettext('User could not be created'));
if (data.responseText && data.responseText.length < 20) {
that.showToast('remove icon', data.responseText);
}
},
});
}
return false; // Modal never closes unless AJAX is successful.
});
},
This method also doesn't work (return false first):
onApprove() {
that.$validator.validate().then(result => {
if (!result) {
return false
}
$.ajax({
url: '/settings/user_management_add_user', method: 'POST', data: {
csrfmiddlewaretoken: that.csrfToken, password: that.password, user: JSON.stringify(that.users[that.activeUserRow]),
}, success() {
$('#modify_user_modal').modal('hide');
that.showToast('check icon', gettext('User created'));
that.activeUserRow = undefined;
that.initialQuery();
}, error(data) {
that.showToast('remove icon', gettext('User could not be created'));
if (data.responseText && data.responseText.length < 20) {
that.showToast('remove icon', data.responseText);
}
},
});
return false; // Modal never closes unless AJAX is successful.
});
},
So #Axnyff found this semantic-ui beug report, which led me to the solution:
onApprove() {
that.$validator.validate().then((result) => {
if (result) {
$.ajax({
...
},
complete() {
$('#modify_user_modal').modal('hide'); // Manually hide.
},
});
}
});
return false; // Modal never closes.
},
I got a signup-form with a textfield for the username.
For this textfield I added a custom validator function to check the availability for the selected username:
xtype: 'textfield',
name: 'username',
msgTarget: 'under',
bind: {
fieldLabel: '{texts.username}'
},
allowBlank: false,
minLength: 3,
checkChangeBuffer: 300,
validator: function (value) {
if (value.length < 3) {
return null;
}
Ext.Ajax.request({
method: 'POST',
url: '/rest/availability',
params: {
name: value
}
}).then(
function (result) {
return Ext.JSON.decode(result.responseText) ? true : 'Username already exists';
},
function (response) {
return 'Server issue.';
}
)
}
This should probably do it. But it doesnt.
I get a broken error, the validator shows always invalid and the message is not displayed:
When I check the response I get the correct value from the server.
What am I missing here?
Thanks in advance.
In order for the validation to pass you need to return true.
validator: function(value) {
if(!valid) {
return 'error message';
}
return true; // successfully passed
}
For some reason I can't throw an error message to say whether or not an email exists inside of my user table. I understand that because AJAX is async I can't use try and catch error messages inside the complete function. But I tried splitting it into functions and it still doesn't work.
Try, Catch Function (I do call this else where in my code)
try {
// Check fields are not empty
if (!firstName || !lastName || !aquinasEmail || !sPassword || !sCPassword || !Gender) {
throw "One or more field(s) have been left empty.";
}
// Check the email format is '#aquinas.ac.uk'
if(!emailCheck.test(aquinasEmail)) {
throw "The email address you entered has an incorrect email prefix. ";
}
// Check there are not any numbers in the First or Last name
if (!regx.test(firstName) || !regx.test(lastName)) {
throw "First Name or Last Name is invalid.";
}
// Check the confirmation password is the same as the first password
if (sPassword != sCPassword) {
throw "The two passwords you've entered are different.";
}
if(duplicatedEmail()) {
throw "Sadly, your desired email is taken. If you have forgotten your password please, Click Here";
}
} catch(err) {
if (!error) {
$('body').prepend("<div class=\"error alert\">"+err+"</div>");
$('.signupInput.sPassword').val('');
$('.signupInput.sCPassword').val('');
setTimeout(function() {
$('.error.alert').fadeOut('1000', function() {$('.error.alert').remove();});
}, 2600);
}
event.preventDefault();
}
AJAX Function:
function duplicatedEmail() {
// Use AJAX function to do verification checks which can not be done via jQuery.
$.ajax({
type: "POST",
url: "/login/ajaxfunc/verifyReg.php",
dataType: "JSON",
async: false,
data: $('.signupForm').serialize(),
success: function(data) {
if (data.emailTaken == true) {
return true;
} else {
return false;
}
}
});
}
verifyReg.php
<?php
header('Content-Type: application/json', true);
$error = array();
require_once '../global.php';
$_POST['aquinas-email'] = "aq142647#aquinas.ac.uk";
// Check if an email already exists.
$checkEmails = $db->query("SELECT * FROM users WHERE aquinasEmail = '{$_POST['aquinas-email']}'");
if ($db->num($checkEmails) > 0) {
$error['emailTaken'] = true;
} else {
$error['emailTaken'] = false;
}
echo json_encode($error);
?>
to handle the error with jquery ajax function add error callback like this
function duplicatedEmail() {
// Use AJAX function to do verification checks which can not be done via jQuery.
$.ajax({
type: "POST",
url: "/login/ajaxfunc/verifyReg.php",
dataType: "JSON",
async: false,
data: $('.signupForm').serialize(),
success: function(data) {
if (data.emailTaken == true) {
return true;
} else {
return false;
}
},
error: function() {
//Your Error Message
console.log("error received from server");
}
});
}
to throw an exception in your PHP:
throw new Exception("Something bad happened");
Looking at your AJAX Function, and these two answers here and here, you need to make a small change to how you are returning the synchronous result:-
function duplicatedEmail() {
var result;
$.ajax({
type: "POST",
url: "/login/ajaxfunc/verifyReg.php",
dataType: "JSON",
async: false,
data: $('.signupForm').serialize(),
success: function(data) {
result = data.emailTaken;
}
});
return result;
}
use ajax error function..
function duplicatedEmail() {
// Use AJAX function to do verification checks which can not be done via jQuery.
$.ajax({
type: "POST",
url: "/login/ajaxfunc/verifyReg.php",
dataType: "JSON",
async: false,
data: $('.signupForm').serialize(),
success: function(data) {
if (data.emailTaken == true) {
return true;
} else {
return false;
}
},
error: function (result) {
alert("Error with AJAX callback"); //your message
}
});
}