jQuery Validate Triggering message from success - javascript

I'm trying to figure out once the callback to the remote function is made for either the username or email address, that if the data returned is equal to "n" it should trigger the message to be displayed.
JS:
$(document).ready(function() {
var validator = $("form").validate({
rules: {
username: {
minlength: 6,
maxlength: 12,
remote: {
type: 'post',
url: 'register/is_username_available',
data: {
'username': function() {
return $('#username').val();
}
},
dataType: 'json',
success: function(data) {
alert(data);
if (data == 'y') {
alert('available');
}
else {
alert('no available');
}
}
}
},
email_address: {
email: true,
remote: {
type: 'post',
url: 'register/is_email_available',
data: {
'email_address': function() {
return $("#email_address").val();
}
},
dataType: 'json',
success: function(data) {
alert(data);
if (data == 'y') {
alert('available');
}
else {
alert('no available');
}
}
}
}
},
messages: {
username: {
remote: 'The username is already in use'
},
email_address: {
remote: 'There is already an account set up that uses that email address!'
}
}
});
});​

Your "dataType" is incorrect.. right now your telling it to get and use JSON, you on the other hand are outputting or expecting a string or "text"/"html" rather than "json"
change your dataType to html or text, and see how that does ya.
if you wanted to keep it at json.. your output from the php side would have to be
{"response":"y"}
and your javascript in the sucess would have to be like
if(data.response == "y")

Related

This jquery method is not working when i called ajax function in another ajax function

it gives error like this in console.
XHR finished loading: POST "http://localhost/redono/Redono-ChurchAdmin/code/churchprofile/edit_password".
Here I want to create the change password method.
$.ajax({
type: "POST",
url: "churchprofile/edit_password",
data: {
password: oldByUser
},
success: function(data) {
if (data == 'pass') {
$.ajax({
type: "POST",
url: "churchprofile/update_password",
data: {
new_password: new_password
},
success: function(data) {
if (data == 'changed') {
alert("success");
} else if (data == 'failed') {
alert("failed");
} else {
alert("try again later");
}
}
});
}
}
});
Try this ,Its working for me.
$.ajax({
type: "POST",
url: "/churchprofile/edit_password",
data: {
password: oldByUser
},
success: function(data) {
if (data == 'pass') {
$.ajax({
type: "POST",
url: "/churchprofile/update_password",
data: {
new_password: new_password
},
success: function(data) {
if (data == 'changed') {
alert("success");
} else if (data == 'failed') {
alert("failed");
} else {
alert("try again later");
}
}
});
}
}
});

How to redirect after successful login from a bootstrap modal page to a different view or a page with the login user information

This is the UI of the demo Application.
I am sending an ajax request to the controller which is verifying the user id and password from the getloginuser method ,the response is coming. I just want to redirect it after successful login to some other page. Can i do anything in callback (jquery).i searched lot of things on net but could not get suitable answer.
Login Image
This is the jquery code
//method
function Login()
{
var res = LoginValidation()
if (res == false)
{ return false; }
var logininfo = {
Username: $('#Username1').val(),
PasswordHash: $('#PasswordHash1').val(),
};
$.ajax({
url: "/Home/Login",
data: JSON.stringify(logininfo),
type: "Post",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
//loadData();
$('#myModal1').modal('hide');
alert('Login Successful');
},
error: function (result)
{
$('#myModal1').modal('hide');
alert("Invalid Credentials");
}
});
This is the Login Controller Method:
public JsonResult Login(User info)
{
return Json(obj.GetLoginUser(info), JsonRequestBehavior.AllowGet);
}
You can do in your ajax function like this:
var res = LoginValidation()
if (res == false)
{ return false; }
var logininfo = {
Username: $('#Username1').val(),
PasswordHash: $('#PasswordHash1').val(),
};
$.ajax({
url: "/Home/Login",
data: JSON.stringify(logininfo),
type: "Post",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
//loadData();
if(result != null || result != "")
{
window.location.href= "Your redirect url";
}
else
{
alert("login error");
return false;
}
},
error: function (result)
{
$('#myModal1').modal('hide');
alert("Invalid Credentials");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can use window.location to redirect to any location your application. Just Implement it in the success part of your Ajax call.
function Login()
{
var res = LoginValidation()
if (res == false)
{ return false; }
var logininfo = {
Username: $('#Username1').val(),
PasswordHash: $('#PasswordHash1').val(),
};
$.ajax({
url: "/Home/Login",
data: JSON.stringify(logininfo),
type: "Post",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
//loadData();
$('#myModal1').modal('hide');
RedirectToPage();
},
error: function (result)
{
$('#myModal1').modal('hide');
alert("Invalid Credentials");
}
});
function RedirectToPage()
{
window.location='Your Link Goes here';
}

jQuery validator additional method not working as expected

I am using this jQuery validation plugin, http://jqueryvalidation.org/ And I am creating an addition method, as shown here.
jQuery.validator.addMethod('exists', function(value, element) {
$.ajax({
data: {username: value},
type: 'POST',
url: 'action/check/',
dataType: 'json',
success: function(data) {
if (data==true) {
console.log(data);
return true;
}
if (data==false) {
console.log(data);
return false;
}
}
})
}, 'This username is already in use');
My console is getting the proper data back from the check script and in my console I can see true and false etc. But what I do not understand is the validation flag seems to flag the input regardless of what the input is.
rules: {
password_confirm: {
equalTo: 'input[name=password]'
},
username: {
exists: true
}
}
I already have username chris in my database, so when I type chris into the username input I should get a flag for being a duplicate user, but regardless of what type I get the validation flag.
What am I missing
Your validation won't work because it is asynchronous(ajax request).
You can use the existing remote rule to do that, make sure your request is returning true/false as its result
rules: {
password_confirm: {
equalTo: 'input[name=password]'
},
username: {
remote: {
url: 'action/check/',
type: 'POST'
}
}
}
jQuery.validator.addMethod('exists', function(value, element) {
var result = false;
$.ajax({
data: {username: value},
type: 'POST',
url: 'action/check/',
dataType: 'json',
success: function(data) {
result = data; // make sure data returns bool value
}
});
return result;
}, 'This username is already in use');

How to change url of ajax function depending the return value of beforesend() function?

I want to run a function inside beforesend() in jquery ajax. Depending on the return value of that function I want to change the URL of ajax request. For an example refer below.
If myFunction() returns a value grater than 1, I want to run url1 otherwise I want to run url2. How to achieve that?
myFunction() gives a value grater than 1. But always ajax runs the url2.
$.ajax({
type: "POST",
data: {
fname: $('#com').val()
},
dataType: "json",
beforeSend: function () {
myFunction($('#com').val())
},
url: (myFunction($('#com').val()) > 1) ? url1 : url2,
success: function (data) {
if (data == 'success') {
window.location.href = 'index.php?r=site/index';
} else {
alert("Already registered email");
}
},
failure: function (errMsg) {
alert(errMsg);
}
});
try this
$.ajaxSetup({
beforeSend: function(jqXHR, settings) {
settings.url ="new Url";
}
});
Create a global variable something like:
var urlToSend;
and then assign it in beforeSend
$.ajax({
type: "POST",
data: {
fname: $('#com').val()
},
dataType: "json",
beforeSend: function () {
urlToSend=myFunction($('#com').val()) > 1 ? url1 : url2;
},
url: urlToSend,
success: function (data) {
if (data == 'success') {
window.location.href = 'index.php?r=site/index';
} else {
alert("Already registered email");
}
},
failure: function (errMsg) {
alert(errMsg);
}
});
$.ajax({
type: "POST",
data: {
fname: $('#com').val()
},
dataType: "json",
beforeSend: function () {
url = myFunction(parseInt($('#com').val())) > 1 ? url1 : url2;
},
url: url,
success: function (data) {
if (data == 'success') {
window.location.href = 'index.php?r=site/index';
} else {
alert("Already registered email");
}
},
failure: function (errMsg) {
alert(errMsg);
}
});

Very elementary jquery + ajax

On the click of a button, I want to capture a form's data and send it to a php page using ajax, json. Now, the alert "hello hello" comes on the click of a button ONLY WHEN I HAVE COMMENTED OUT MY AJAX PORTION.
When i include the ajax portion by un-commenting it, not only do i not get any errors but also my "hello hello" alert doesnt show up.
I find this odd. Why does it happen so?
Here is my ajax:
<script>
$(document).ready(function () {
$("#btn").click( function() {
alert('hello hello');
/* Coomenting starts here
$.ajax({
url: "connection.php",
type: "POST",
data: {
id: $('#id').val(),
name: $('#name').val(),
Address: $('#Address').val()
}
datatype: "json",
success: function (status)
{
if (status.success == false)
{
alert("Failure!");
}
else
{
alert("Success!");
}
}
});
*/
//commenting ends here.
//basically i just commented out the ajax portion
});
});
</script>
You are missing a comma after "data":
$.ajax({
url: "connection.php",
type: "POST",
data: {
id: $('#id').val(),
name: $('#name').val(),
Address: $('#Address').val()
}, // Missing comma!
datatype: "json",
success: function (status)
{
if (status.success == false)
{
alert("Failure!");
}
else
{
alert("Success!");
}
}
});
As #dystroy pointed out, since your code can't compile, this malformed block will potentially prevent other code (such as a simple alert) from firing.
Check comma syntax after data parameter:
data: {
id: $('#id').val(),
name: $('#name').val(),
Address: $('#Address').val()
},
You are missing a comma after the data part:
<script>
$(document).ready(function () {
$("#btn").click( function() {
alert('hello hello');
/* Coomenting starts here
$.ajax({
url: "connection.php",
type: "POST",
data: {
id: $('#id').val(),
name: $('#name').val(),
Address: $('#Address').val()
},
datatype: "json",
success: function (status)
{
if (status.success == false)
{
alert("Failure!");
}
else
{
alert("Success!");
}
}
});
*/
//commenting ends here.
//basically i just commented out the ajax portion
});
});
</script>

Categories