This is my response.. How to display the error message? passwords do not match
{"errors": {"password": ["Passwords donot match"]}, "status": false, "msg": "Validation erro", "error-type": 0}
Currently my code is
<script>
regBox = new Vue({
el: "#regBox",
data: {
..........
response: {
message: '',
status: '',
state: '',
errors: '',
}
},
methods: {
handelSubmit: function(e) {
var vm = this;
data = {};
..............
$.ajax({
url: '',
data: data,
type: "POST",
dataType: 'json',
success: function(e) {
if (e.status)
{
alert(" Success")
}
else {
vm.response = e;
alert(" Failed")
}
}
});
return false;
}
},
});
</script>
My html code to display the same is
<p class="error">{{response.errors.password}}</p>
Currently i am getting error message as
["Passwords donot match"]
How to get only message as
Passwords donot match.. so, how can i able to get it.. can anybody help
This should work:
<p class="error">{{response.errors.password[0]}}</p>
Get the first element
<p class="error">{{response.errors.password[0]}}</p>
Related
The question is quite simple,
All I want is to get the data after the AJAX post saved in Vue instace's data.
Here is my code:
const VMList = new Vue({
el: '#MODAL_USER_DATA',
data: {
user: []//,
//userAcc: []
},
methods: {
getUserAcc: function ( userID ) {
this.user = { _id : userID };
var self = this
$.ajax({
url: "/listuser",
type: "POST",
data: this.user,
success: function(data) {
this.user = data ;
//this.userAcc = Object.assign({}, this.userAcc, data );
alert(JSON.stringify(this.user));//show the user correctly (e.g user = data)
$('#popupDeleteModal').modal('show');
alert(JSON.stringify(data));//show data,the entire json object,everything is good
},
error: function(err) {
console.log('error: ',err);
},
});
}
}
});
And after I trigger the getUserAcc(id) method,I try to verify the VMList.user value in browser console,and I get only the id.Seems like after the function is over the data is reset.How could I store the data from the AJAX post request in the user object from data:{...} ?
Thank you for help!!!
The problem is that this inside your ajax return function doesn't refer to the vue instance anymore.
The solution is to save the this keyword into a variable inside the function. Example:
getUserAcc: function ( userID ) {
var that = this;
this.user = { _id : userID };
$.ajax({
url: "/listuser",
type: "POST",
data: this.user,
success: function(data) {
that.user = data;
//Rest of your code
},
error: function(err) {
console.log('error: ',err);
},
});
}
Here is more information about the behavior of the keyword this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
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);
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
{ message: "Hello how are you", status: false, state: Kerala }
The following values are the response of an AJAX request. Each time the response changes. I need to print it using Vue.js?
<script>
regBox = new Vue({
el: "#regBox",
data: {
username : '',
},
methods: {
handelSubmit: function(e) {
data = {};
data['username'] = this.username;
$.ajax({
url: 'https://herokuapp.com/api/user/box/',
data: data,
type: "POST",
dataType: 'json',
success: function(e) {
if (e.status) {
alert(" Success")
} else {
alert("failed");
}
}
});
return false;
}
},
});
</script>
Example #1: just one response at a time
regBox = new Vue({
el: "#regBox",
data: {
username : '',
response: {
message: '',
status: '',
state: ''
}
},
methods: {
handelSubmit: function(e) {
var vm = this; // so you can access "this" inside jquery success
data = {};
data['username'] = this.username;
$.ajax({
url: 'https://herokuapp.com/api/user/box/',
data: data,
type: "POST",
dataType: 'json',
success: function(e) {
vm.response = e;
}
});
return false;
}
},
});
example template:
<div id="regBox">
<div v-if="response.message" class="{ 'alert-success': response.status, 'alert-danger': !response.status}">
<p>{{ response.message }}</p>
</div>
</div>
Example #2: multiple responses at a time:
regBox = new Vue({
el: "#regBox",
data: {
username : '',
responses: []
},
methods: {
handelSubmit: function(e) {
data = {};
data['username'] = this.username;
$.ajax({
url: 'https://herokuapp.com/api/user/box/',
data: data,
type: "POST",
dataType: 'json',
success: function(e) {
// like this to prevent all items to be binded, they would otherwise change whenever you get a new response.
vm.responses.push({
message: e.message,
status: e.status,
state: e.state
});
}
});
return false;
}
},
});
example template:
<div id="regBox">
<div class="{ 'alert-success': response.status, 'alert-danger': !response.status}" v-for="response in responses">
<p>{{ response.message }}</p>
</div>
</div>
afterwards, you can also use setTimeout if you want to remove the response after some time.
I see from the $.ajax that you are mixing vue.js with jquery, which should be avoided whenever possible. You can use a different library for your AJAX request, such as axios.
Here is an explanation for using axios with vue.js:
https://alligator.io/vuejs/rest-api-axios/
<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/";
}
I have a ASP.NET MVC application and I have a few entries on the page that user can change and click Save and I go save those entries. My problem: It works fine for some entries and for other entries it just doesn't go in the controller Save function to do the save.
My code:
function DoSave() {
$("#pisave").attr("disabled", true);
var pid = $("#personid").val();alert(pid);
var firstname = $("#fname").val();alert(firstname);
var lastname = $("#lastname").val();alert(lastname);
var plz = $("#zip").val();alert(plz);
var ort = $("#city").val();alert(ort);
var bday = $("#birthdate").val();alert(bday);
var strasse = $("#street1").val(); alert(strasse);
var emailtext = $("#email").val();alert(emailtext);
var url = "#(Url.Action("SavePersonInfo", "Info"))";alert("URL");
$.ajax({
url: url,
data: { personid: pid,fn: firstname, ln: lastname, email: emailtext, zip: plz, city:ort, birthday: bday, street:strasse },
success: function () {
alert("Update Successful");
$("#pisave").removeAttr("disabled");
},
error: function () {
alert("Update Failed! Check entries.");
$("#pisave").removeAttr("disabled");
}
});
}
All alerts are displayed in all the cases. Only for some it goes to SavePersonInfo and for others it doesn't go in there. Any ideas what might be wrong?? Can it be validation issue for the entries?
The model binder fails to parse your date, change to post:
$.ajax({
type: "POST",
url: url,
data: { personid: pid,fn: firstname, ln: lastname, email: emailtext, zip: plz, city:ort, birthday: bday, street:strasse },
success: function() {
alert("Update Successful");
$("#pisave").removeAttr("disabled");
},
error: function() {
alert("Update Failed! Check entries.");
$("#pisave").removeAttr("disabled");
}
});
Read more about the problems with dates in asp.net-MVC
Note that you can add all the elements a class and use the serialize function:
$.ajax({
type: "POST",
url: url,
data: $('.theClass').serialize(), // <=============
success: function() {
alert("Update Successful");
$("#pisave").removeAttr("disabled");
},
error: function() {
alert("Update Failed! Check entries.");
$("#pisave").removeAttr("disabled");
}
});