I have a grid control which I reload via a timer every second or so. I initiate this timer immediately before calling a AJAX request which is long processing at times.
The grid I am refreshing is actually a list of tasks to be carried out on the server.
I am trying to give the user some ideas as to how much longer they have to wait.
this code:
var task = {
run: function(){
Ext.getCmp("id_task_approval_progress").store.reload();
},
interval: 1000
}
var runner = new Ext.util.TaskRunner();
runner.start(task);
Ext.Ajax.request({
url: 'services/index.php/application/task/approve',
params: { id_primary: id_task, id_status: status },
success: function(response, action){
if(!ajax_error_handler(response, action)){
window.location.reload(true);
}
}
});
Does not work...it prevents the grid from refreshing until the AJAX request is complete???
Using ExtJS 3.2.1 - what am I doing wrong? Is there a work around or setting?
Regards,
Alex
I think that several requests were sent to server and the issue isn't related to the client side (apache config or how php works with sessions). If yes - please check this link.
Related
I am created a AngularJs Post request.The request contain a long process take more than 2 minutes for perform that.But my angular request return null error after 15 seconds.request perfectly working and no error.But angular request time out with in 15 seconds
$http.post('/api/evaluateOmrExamination',{exam_id:$scope.curExam.id})
.success(function(data,status,headers,config){
$scope.showProgress=false;
ngNotify.config({
theme: 'pure',
position: 'top',
duration: 3000,
type: 'info',
sticky: false,
button: true,
html: false
});
ngNotify.set('Evaluate Examination Completed Successfully');
$scope.errorLists=data;
}).error(function(data,status,headers,config){
console.log(data);
//$scope.showProgress=false;
});
I am also set time out in angular but no use.
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.timeout = 10000000;
}]);
I need your suggestions
Short term fix is to increase your server's timeout (this is not a client / Angular issue). You say you're using LAMP, so you must configure PHP's max_execution_time property in php.ini to a larger value. You may also need to configure Apache's timeout in httpd.conf.
Long term fix, the request could return immediately (i.e. not 2 minutes or even 15 seconds later). This doesn't mean the job is done, just that the request to perform the job is done. Then you can ping your server every X seconds to see if the job is complete, and then get the data to display to the user. It seems like more work, and it may take a little more time, but I've found that it can be easier to develop and debug this way instead of having single monolithic requests that do a lot of work. In addition to being a better user experience :)
There are some good recommendations here.
app.factory('timeoutHttpIntercept', function ($rootScope, $q) {
return {
'request': function(config) {
config.timeout = 10000000;
return config;
}
};
});
And in your config:
$httpProvider.interceptors.push('timeoutHttpIntercept');
I have a server written with Nodejs that collects data. My client side is written with AngularJS. I need to create http request every two seconds to my server (setInterval) and display updated data. My server running 24/7. Can chrome block my requests if it reaches maximum? Can I implement another way, instead of create request from client side, maybe to push from my server?
Example of some request:
var indicesTimer = setInterval(getIndices,2000);
getIndices();
function getIndices(){
dataService.getIndices().then(function(res){
$scope.recentIndeces = res.data;
});
}
Check $interval service.
var stop = $interval(function() {
// Your code
}, 100);
With your code
var indicesTimer = $interval(getIndices,2000);
getIndices();
function getIndices(){
dataService.getIndices().then(function(res){
$scope.recentIndeces = res.data;
});
}
You can use websocket. By using that, your server can notify your client in case something changed in the server side so you don't have to do a polling (polling is what you do when sending request every x seconds). Take a look at socket.io
This is the typically behavior of a heartbeat. Chrome or any other browser does not block requests.
As long as your setInterval() handler doesn't run forever, it won't block other things from eventually running.
I have a grid with remote data (php/mysql/json) and use a form to insert records or to edit this data.
I use the api configuration of the proxy/store. I use MVC architecture.
So, all very simple (in pseudo code):
get selected model form grid or create model
frm.loadRecord()
frm.updateRecord()
frm.getRecord().save()
and all works fine, but I noticed in the browser console that after the POST (works fine, calls either the url configured with create or the url configured with update), the store calls (GET) the url configured with retrieve twice. These calls are identical.
So functionally all works fine and I could ignore it, but now I've noticed I want it fixed.
Can anyone help me where to look? Thanks in advance.
Details:
It's all really basic:
In the controller of the gridpanel:
updateRow: function (gridpanel) {
var sm = gridpanel.getSelectionModel();
var record = sm.getLastSelected();
this.showForm(record);
}
and
showForm: function (record) {
...
formpanel.show();
var frm = formpanel.getForm();
frm.loadRecord(record);
}
In the controller of the formpanel:
submit: function(frm) {
frm.updateRecord();
frm.getRecord().save();
}
When I remove the save action the GET requests aren't called, so this seems to trigger them.
In the store:
api: {
create: '../php/api/customers.php?request=create',
read: '../php/api/customers.php?request=retrieve&scope=summary',
update: '../php/api/customers.php?request=update',
destroy: '../php/api/customers.php?request=delete'
}
The screenshot:
I have a service that makes a simple POST:
saveVersion: function(styleGuideId, data){
return $http({method: 'post', url: '/style_guides/' + styleGuideId + '/new_version', data: data}).then(function(project){
console.log('request completed')
});
},
In the console, if I fire this request, it works fine.
But when I click a button in my ui that makes this request, I see on my server the request gets completed with a 200 but on the client side the browser says it is cancelled.
The extra GET is also a mystery. In the console, I trigger the request like this:
angular.element(document.body).injector().get('StyleGuides').saveVersion(sg_id, data)
//sg_id and data are local variables that I got like this:
sg_id = angular.element($0).scope().project.style_guide_id
Just figured it out. Stupid Mistake
The button that triggers the save looked like this:
Save
See the typo? changing javacript:// to javascript:// fixed the issue.
In my backbone project I am trying to fetch a model based on some search criteria submitted by the users from a form. In submit handler, I am trying to fetch the model by passing search criteria's via data option (following is the code).
var productType=$("#productType").val();
var customerId=$("#customerId").val();
var stateSelected=$("#selectedState").val();
var srbStatus=$("#stateReportingStatus").val();
var dateType=$("#dateType").val();
var fromDate=$("#fromDate").val();
var toDate=$("#toDate").val();
var billTypeInd=$("#billTypeIndicator").val();
var dataElement=$("#dataElement").val();
var ediFileName=$("#ediFileName").val();
var ediBillName=$("#ediBillNumber").val();
var billId=$("#billId").val();
var claimantFirstName=$("#claimantFirstName").val();
var claimantLastName=$("#claimantLastName").val();
var insurerName=$("#insurerName").val();
var insurerFEIN=$("#insurerFEIN").val();
var insurerZip=$("#insurerZIP").val();
var dashboardSearchResultModel= new dashboardSearchResult();
var dashboardSearchResultModel= new dashboardSearchResult();
dashboardSearchResultModel.fetch({
data:{
productType: productType,
customerId: customerId,
state:stateSelected,
srbStatus:srbStatus,
dateType:dateType,
fromDate:fromDate,
toDate:toDate,
billTypeInd:billTypeInd,
dataElement:dataElement,
ediFileName:ediFileName,
ediBillName:ediBillName,
billId:billId,
claimantFirstName:claimantFirstName,
claimantLastName:claimantLastName,
insurerName:insurerName,
insurerFEIN:insurerFEIN,
insurerZip:insurerZip
},
wait:true,
success: function(dashboardSearchResultModel)
{
alert("This is what we get for result"+JSON.stringify(dashboardSearchResultModel));
$('#dashboardResultArea').html(self.dashboardResultTemplate({results:dashboardSearchResultModel.get("results")}));
},
error: function (model, xhr, options) {
alert("Error: An error occurred while trying to fetch the dashboardSearchResultModel");
alert("Error got model"+JSON.stringify(model));
alert("options:"+JSON.stringify(options));
alert("xhr:"+JSON.stringify(xhr));
}
});
Initially when the page loads after providing the search criteria's if I click submit the fetch doesn't work and goes to the error handler. After that when I submit the from second time the fetch works and retrieves data from the backend server. Any idea what is wrong? Thanks in advance.
When error callback is called, it is because your XHTMLRequest to the server returned a error (HTTP status code). So, there is where your problem resides.
Who starts this code? As the erros does not occur on a second attempt, I would suggest that you area callind $('#id').val() when the DOM is not ready. This way you are sending null values to the server, and that's causing the error you are receiving.
To solve your problem, assure you DOM is ready when executing this script.
See if your request is leaving the browser and reaching the server (i.e., cross-domain request fail with status 0, not reaching the server).
And, if it is, debug your server-side, as it does not seem to be an client-side problem.
So after trying many things I finally decided to try $.ajax call rather the fetch method. This is what I came up with
$.ajax({
type: "GET",
url: "rest/dashboardResult",
dataTyp: 'json',
data: {
productType: productType,
customerId: customerId,
state:stateSelected,
srbStatus:srbStatus,
dateType:dateType,
fromDate:fromDate,
toDate:toDate,
billTypeInd:billTypeInd,
dataElement:dataElement,
ediFileName:ediFileName,
ediBillName:ediBillName,
billId:billId,
claimantFirstName:claimantFirstName,
claimantLastName:claimantLastName,
insurerName:insurerName,
insurerFEIN:insurerFEIN,
insurerZip:insurerZip
}
})
.done(function(response) {
alert( "Result is: " + response);
});
This works without any problem from the get go. Now my question is how to bind the response to the backbone model?
Finally I figured out what was wrong. The call was inside a submit click handler, and $.ajax call or fetch is asynchronous. So by the time the call got reply from the server default action of submit click already took place (which is to reload the page). So by the time success or .done got called the whole page was reloaded. So I put event.preventDefault() at the beginning of handler method and let the handler receive the call back from the server and display it at the template. Thanks everyone for your time.