After submitting my form, jQuery steps seems to consider the submit as failed. The last step turns red.
I did not find any documentation on this topic.
Is the plugin expecting a particular response (type) from the server?
onFinishing: function() {
debugger;
var formData = $("#wizardSumbit").serialize();
$.ajax({
type: "POST",
url: '#Url.Action("Wizard_Submit", "Wizard")', //serverside
data: formData,
beforeSend: function () {
//show loading image
},
success: function (result) {
console.log(result); //use this to see the response from serverside
},
error: function (e) {
console.log(e); //use this to see an error in ajax request
}
});
}
I am a little bit confused here.
jQuery steps is considering the submit as failed because of the missing return=true statement in the event.
Related
I am creating a registration form in AngularJS, wherein once the admin fills the form and on submit, I am doing two things: 1. Saving the data into the DB. 2. Sending an email to the person with his username and password. So on submitting my application is taking some time (around 5-7 seconds) to post the success message back on the screen. So I want to show some message while these background operations complete. I need your help as I am new to AngularJS.
createUserService.Register(obj, function(data) {
if (data.error) {
console.log("Check " + data.error);
} else {
alertify.alert("Successfully Registered");
$state.reload();
}
This is my service:
function Register(obj, callback) {
$http({
method : 'POST',
url : '/api/addUserOps',
data : obj
}).then(function(response) {
callback(response.data);
}, function(error) {
callback(error);
});
}
});
You can try this way.
Service function
function Register(obj) {
return $http({
method : 'POST',
url : '/api/addUserOps',
data : obj
});
}
Calling your function
// Trying using https://github.com/cgross/angular-busy for showing a loader here.
createUserService.Register(obj)
.then(function(data){
// stop your loader here with a success message.
})
.catch(function(error) {
// your error message here.
})
Hope you find this useful.
I have an application made with .NET core framework and pure html in the front end. I was using AJAX to post and get data.
I am new to Angular and decided to convert the front end of the application to Angular for learning purposes.
For Example, I have a button that will change the state of employees from 'Billed' to 'Available' state. The ID for available state is defined in the back end and it is '1'.
//MOVE TO BENCH BUTTON CLICK
$(document).ready(function()
{
var allVals = [];
$("#MoveToBench").click(function()
{
$('input:checkbox:checked').each(function () {
allVals.push($(this).val());
});
for (i = 0;i<allVals.length;i++){
PostBenchList(allVals[i])
}
function PostBenchList(entityId) {
var data = 'entityID='.concat(entityId).concat('&nextStateId=1');
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "http://localhost:1783/api/Workflow?"+data,
data: data,
dataType: "text",
success: function (data) {
location.reload();
alert("Successfully added the selected Employees to TalentPool");
},
fail: function (error) {
Console.Log(error);
}
})
}
});
});
The above code is taking an array of entityID's as input. For the Angular application, the array is not required as only one entity ID will be passed.
The API controller in the backend is :
// POST api/values
[HttpPost]
public void Post(int entityId, int nextStateId)
{
JObject jsonObject = JObject.Parse(System.IO.File.ReadAllText("Config.Json"));
string jsonFile = jsonObject.GetValue("WorkfowJsonFileLocation").ToString();
var nextState = _stateServices.Get(nextStateId);
var handler = new WorkflowHandler(nextState, jsonFile, _entityServices, 1, _stateServices, _subStateServices, _appServices);
handler.PerformAction(entityId);
}
The above code worked for me and it would change the state ID of the employee(EntityID)to 1(nextStateId)
Now I have a button in AngularJS and I want it to do the same action. How would I achieve this? As I am still in the procedure of learning, I don't have a clue how to do this. Can anyone help me to achieve this? This would help me to learn and do all similar buttons.
Thank You.
You can use ng-click and call a function to post the data,
HTML:
<button ng-click="PostData()">
Click to POST
</button>
Controller:
app.controller('PostController',['$scope',function($scope)
{
$scope.sendPost = function() {
var data = $.param({
json: JSON.stringify({
name: $scope.newName
})
});
$http.post("/echo/json/", data).success(function(data, status) {
$scope.hello = data;
})
}
}]);
DEMO APP
I am new to React & JEST framework, I tried doing ajax call in react as below, if i receives a success data it will redirect to home page else an error message is displayed.
let params ={
userName : this.state.userName,
password : this.state.passWord
};
$.ajax({
url: '/reactApp/login',
dataType: 'json',
contentType: 'application/json;',
type: 'POST',
data: JSON.stringify(params),
success: function (successData) {
if (typeof(Storage) !== "undefined") {
localStorage.setItem('userProfile', JSON.stringify(successData));
browserHistory.push('/reactApp/Home');
} else {
alert("The browser version is not supported.Please use Internet explorer 11, Chrome or firefox.")
}
}.bind(this),
error: function(errorData){
this.setState({
errorMessage: errorData.message,
errorDisplay: true,
});
}.bind(this);
The react code is working, i tried to write an unit test in JEST for the above code for ajax call as below,
jest.unmock('jquery');
jest.unmock('./AjaxLogin');
var $ = require('jquery');
const Login = TestUtils.renderIntoDocument(<AjaxLogin />);
expect(Login).toBeDefined();
var handleClick = jest.genMockFunction();
var button = TestUtils.findRenderedDOMComponentWithTag(Login, 'button');
TestUtils.Simulate.click(button);
Login.handleClick();
expect($.ajax).toBeCalledWith({
url: '/reactApp/login',
dataType: 'json',
contentType: 'application/json;',
type: 'POST',
data: JSON.stringify({userName : 'testing', password : 'password'}),
success: jasmine.any(Function),
error: jasmine.any(Function)
});
When i run this test case, i received an below error message, i don't know what is wrong in the above code.
Expected Function to be called with Object
can anyone please help me to identify the issue in unit test script.
unmock method removes mock so you need to use Jest mock method instead.
Jest repo has several examples describing the basic usage including how to mock jquery as well as how to use with react so it is worth looking at.
I have an issue, i use my service that has GET and POST method. I try to update an select component on view. So when i try to add a new item, and click on button, which trigger a POST of new object, and what i want is to recieve updated list with my GET method, but it doesn't work. In only works if i refresh the page. I guess there is something wrong with callback
Here is the code i use:
Controller
$scope.addSubject = function(){
var newSubject = {"subjectName" : $scope.subjectType};
InterpelationSubjectFactory.create(newSubject);
/* Calling query method to update subjectType list */
InterpelationSubjectFactory.query(function(response){
$scope.subjectTypes = response;
});
console.log($scope.subjectTypes);
//$scope.selectedSubjectType = $scope.subjectType;
$scope.hideSubjectForm = true;
$scope.subjectType = '';
/*console.log(newSubject);*/
}
Service
services.factory('InterpelationSubjectFactory', function($resource){
return $resource(baseUrl + '/subjectTypes', {}, {
query: { method: 'GET', isArray: true},
create: { method: 'POST'}
})
});
Can please someone point me where i did wrong?
Thanks
For the callback, you only have the one in case of success. Can you please add the one that handles error and display the error message? That should give us a clue.
InterpelationSubjectFactory.query(function(response){
// success handler
$scope.subjectTypes = response;
}, function(error) {
// error handler
console.log("Error InterpelationSubjectFactory.query: " + JSON.stringify(error));
}
);
Please share the error message.
In my application i have used the Ext.Viewport.setMasked function, When i call the Processing mask showing properly.But not disabled when it reaches success.Here my code
{
Ext.Viewport.setMasked({
xtype: 'loadmask',
message: 'Processing...',
indicator: true
});
var data = Ext.JSON.encode(obj);
Ext.Ajax.request({
url: App.gvars.apiurl + 'AddItem', // url : this.getUrl(),
method: "POST",
params: data,
useDefaultXhrHeader: false,
withCredentials: true,
success: function (response) {
var respObj = Ext.JSON.decode(response.responseText);
if(respObj[0].response=="Success"){
Ext.Viewport.setMasked(false);
Ext.Msg.alert("Success", "A new wish has been added To Ur Wish List");
viewgiftlist();
goitems();
}
else{
Ext.Viewport.setMasked(false);
Ext.Msg.alert("Error",respObj[0].errorMsg);
}
},
failure: function (response)
{
Ext.Msg.alert("Error",response.responseText);
}});
}
Please help me to solve the issue
You didnt give setmask(false) in your failure message.. are you getting success response or failure?
The correct usage is in fact Ext.Viewport.setMasked(false);
My guess is that your success conditional isn't working properly. This should be an easy fix for you if you're using console! Fire up Chrome, hit F12 and use your console. Use a console.log after you decode your response, then you can properly debug this.
var respObj = Ext.JSON.decode(response.responseText);
console.log(respObj);
Also, not sure why the success portion of your response would be an array, usually a response looks something like this:
{"success":true,"data":[{"id":"1","first_name":"Test","last_name":"Test"}],"total":1}
Obviously you can craft them how you want, but just looks strange to me. With the above JSON the conditional would be like so:
if(respObj.success) {