Develop Reference

Why e.status is getting as undefined in success function of ajax request?

I am getting my reponse as {"status":true}. But when I do console.log(e.status) I am getting as undefined.
When I do console.log(e) I get {"status":true}
This is my ajax request
$("#msgfrm").on("submit", function(e) {
event.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
$.ajax({
url: 'ajaxinsert.php',
method: 'POST',
data: {
name: name,
email: email
},
success: function(e) {
console.log(e);
console.log(e.status);
if (e.status === 'true') {
alert("success");
} else {
alert("Fail");
}
}
});
});
Please tell me what is my error??

It is because you are getting result as string. Try parsing it before using it.
success:function(e){
var obj=jQuery.parseJSON(e);
alert(obj);
alert(obj.status);
}

Why isn't window.location.href working in Vue.js?

<script>
logBox = new Vue({
el: "#logBox",
data: {
email : '',
password: ''
},
methods: {
handelSubmit: function(e) {
data = {};
data['email'] = this.email;
data['password'] = this.password;
$.ajax({
url: 'https://herokuapp.com/api/', //my url
data: data,
type: "POST",
dataType: 'json',
success: function(e) {
if(e.status != false){
alert("Login Success").then(function() {
// Redirect the user
window.location.href = "https://stackoverflow.com/";
console.log('The Ok Button was clicked.');
});
}
else {
alert("failed to login!");
}
}
});
return false;
}
},
});
This is my login code. After a successful login, I need to redirect to a success page, but window.location.href is not working and I'm not able to direct to the new page. So, can any body please sort out my problem?

alert() is not a promise. You should fix it to:
if (e.status != false) {
alert("Login Success");
// Redirect the user
window.location.href = "https://stackoverflow.com/";
}

jquery ajax - how to use response in success

page.php
$sqlQuery = "";
$result = $mysqli->query($sqlQuery);
if (mysqli_affected_rows($mysqli) > 0) {
echo "success";
} else {
echo "error";
}
I want to use response text in success but with if condition is not working.
How can i use with if.
Thanks for your help.
$.ajax({
metod: "POST",
url: "page.php",
data: {data},
success: function (response) {
console.log(response); // It is working
notification("success"); // It is working
// response text is succes or error
if (response == 'success') {
btnLabel.html("DONE"); // It is not working
} else if (response == 'error') {
btnLabel.html("ERROR"); // It is not working
}
},
error: function (err) {
notification("error"); // It is working
}
});

How do I throw an error message within AJAX?

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
}
});
}

event.preventDefault(); only works some of the time with submit form

I am using the Mailchimp API to submit a form. The goal is to prevent the default callback provided by Mailchimp. The majority of the time event.preventDefault() is behaving as it should. Then randomly it will not work:
$(function () {
var $form = $('#mc-embedded-subscribe-form');
$('#mc-embedded-subscribe').on('click', function(event) {
if(event) event.preventDefault();
register($form);
});
});
function register($form) {
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
cache : false,
dataType : 'json',
contentType: "application/json; charset=utf-8",
error : function(err) { alert("Could not connect to the registration server. Please try again later."); },
success : function(data) {
if (data.result != "success") {
// Something went wrong, do something to notify the user. maybe alert(data.msg);
var message = data.msg
var messageSh = data.msg.substring(4);
if (data.msg == '0 - Please enter a value' || data.msg == '0 - An email address must contain a single #') {
$('#notification_container').html('<span class="alert">'+messageSh+'</span>');
} else {
$('#notification_container').html('<span class="alert">'+message+'</span>');
}
} else {
// It worked, carry on...
var message = data.msg;
$('.popup-promo-container').addClass('thanks');
$('.checkboxes, #mc_embed_signup_scroll').addClass('hidden');
$('.complete-promo').html(message).removeClass('hidden');
setTimeout(function() {
document.querySelector('.popup-promo').style.display = "none";
},20000);
}
}
});
}

Try
take off ready function.
remove if on event
Code:
var $form = $('#mc-embedded-subscribe-form');
$('#mc-embedded-subscribe').on('click', function(event) {
event.preventDefault();
register($form);
});