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) {
Related
The below code has both success and failure handling
jQuery.ajax({
type:"post",
dataType:"json",
url: myAjax.ajaxurl,
data: {action: 'submit_data', info: info},
success: function(data) {
successmessage = 'Data was succesfully captured';
$("label#successmessage").text(successmessage);
},
error: function(data) {
successmessage = 'Error';
$("label#successmessage").text(successmessage);
},
});
$(":input").val('');
return false;
However we are not following the above...We are following as below
jQuery.ajax({
type:"post",
dataType:"json",
url: myAjax.ajaxurl,
data: {action: 'submit_data', info: info},
success: function(data) {
if(data.responseType == 'success') {
// success
}
if(data.responseType == 'failure') {
// failure
}
}
});
$(":input").val('');
return false;
Is our approach is the correct or wrong approach ??
Basically every response will be success and show error message based on the response type
Please advise. We need to follow the best practice
data. responseType doesn't return a 'success' or 'failure'. It is contains an enumerated value which represents the type of response coming back to you like text, json, arrayBuffer etc..
Hence in the second code block both if statements will be exceuted to be false and nothing will be done with the response received.
I think you should go with the first approach because
Whether you are using raw JS or a library to implement this functionality, you'll have access to the state of the request i.e. whether the request was successful; met with an error and finally whether it has been completed.
Make proper use of these events and their respective callbacks to manipulate the UI for a better user experience. For example, if the request was unsuccessful, you'd want to update the user interface to reflect that their changes weren't successful while if it was successful, you'd want to tell them so. Don't keep the user waiting!
With jQuery, you'd make use of the success and error callbacks. You also get other callbacks such as complete and beforeSend to be invoked for apporopriate use.
$.ajax({
//Other code
success: function(msg)
{
// Update the UI here to reflect that the request was successful.
doSomethingClever();
},
error: function(msg)
{
// Update the UI here to reflect that the request was unsuccessful
doSomethingMoreClever();
},
complete: function(msg)
{
// Update the UI here to reflect completion
doSomethingEvenMoreClever();
}
});
take a look at this
I am working on a small web application which simplifies the process of creating and populating USPTO IDS forms by accessing data from another server. For accessing data I am using this API - http://ops.epo.org/3.1/rest-services/published-data/publication/epodoc/US9623902/biblio.js.
I am doing this with angular and hence I used $http but it is throwing error 500 (Internal Server Error). while doing it with ajax-request, its working fine. In fact any other method like $.get() instead of ajax throwing the same error, even I used ng-resource get method but no help. I am not getting what I am doing wrong.
Here are my codes -
$.get( "http://ops.epo.org/3.1/rest-services/published-data/publication/epodoc/US9623902/biblio.js",
function( data ) {
vm.inventors = data['ops:world-patent-data']['exchange-documents']['exchange-document']['bibliographic-data']['parties']['inventors']['inventor'];
console.log(vm.inventors);
});
var req = {
method: 'GET',
url: 'http://ops.epo.org/3.1/rest-services/published-data/publication/epodoc/US9623902/full-cycle.js',
};
$http(req).then(function(response){
console.log(response);
}, function(response){
console.log(response);
});
Both of these codes are throwing error 500. Here is the image
while this code is working fine. But here I am getting an issue of page load, the page is loaded before data is bound to $scope and hence not showing on the page.
$.ajax({
url: 'http://ops.epo.org/3.1/rest-services/published-data/publication/epodoc/' + 'US9623902' + '/biblio.js',
type: 'GET',
dataType: "jsonP",
success: function(data) {
vm.inventors = data['ops:world-patent-data']['exchange-documents']['exchange-document']['bibliographic-data']['parties']['inventors']['inventor'];
console.log(vm.inventors);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
vm.errorContent = [{
heading: "Error",
description: "Could not load json data "
}];
return false;
}
});
Image of successful result
Any help would be appreciated. Thank you.
if you are using x-www-form-urlencoded as header, you might need to transform your request.
var req = {
method: 'GET',
url: 'http://ops.epo.org/3.1/rest-services/published-data/publication/epodoc/US9623902/full-cycle.js',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
transformRequest: function(obj) {
var str = [];
for(var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
},
};
I didn't get where the problem lies in my "GET" request. But "jsonP" method of $http did solve this issue.
#Sachila - As data is not being sent, the transformation is not required.
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.
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.
I want to call one of my webservices via jsonp with angularjs.
When i call http://example.com/files?callback=JSON_CALLBACK directly in my browser, i got :
["folder1", "folder2"]
When i call from angularjs with :
$http.jsonp('http://example.com/files?callback=JSON_CALLBACK')
.success(function(data){
console.log(data);
$scope.folders = data;
});
console.log does not appear....
What am i doing wrong ?
Must my webservice return
JSON_CALLBACK(["folder1", "folder2"])
? Should i do it manually in my api ? browser don't do that automatically ?
What you are currently returning (["folder1", "folder2"]) is not valid JSONP. The JSON result must be wrapped by a javascript function call in order to be valid JSONP.
For example, when you use the URL like this:
http://example.com/files?callback=JSON_CALLBACK
Angular will replace the JSON_CALLBACK parameter with an angular function name (created internally), like:
http://example.com/files?callback=angular.callbacks._0
Your server would then need to be able to read that callback parameter and return the result like this:
angular.callbacks._0(["folder1", "folder2"]);
This is not an automatic mechanism, you need to implement that logic on your web server.
Try Using Following code snippet.
(function($) {
var url = 'http://example.com/files?callback=JSON_CALLBACK';
$.ajax({
type: 'GET',
url: url,
async: false,
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType: 'jsonp',
success: function(data) {
console.dir(data);
},
error: function(e) {
console.log(e.message);
}
});
})(jQuery);
bmleite was right, I had to implement this logic on my API.
In my example, my server is made with Silex :
public function index()
{
$callback = $this->request->get('callback');
$files = $this->app['file.manager']->getList();
$response = new \Symfony\Component\HttpFoundation\JsonResponse();
$response->setData($files);
$response->setCallback($callback);
return $response;
}
And it works perfectly now. Thank you.