I do have a kendo datasource which populates a kendo template.
var remoteTemplate = kendo.template($("#remotetemplate").html(), {
useWithBlock: false });
var remoteDatasource = new kendo.data.DataSource({
transport: {
read: {
url: 'Home/RemoteData',
}
},
change: function () {
$("#remotemovies tbody").html(kendo.render(remoteTemplate, this.view()));
}
});
A GET request is made to Home/RemoteData when we call the read method remoteDatasource.read()
One more read , another request is made to Home/RemoteData
I know this is not good , but I am trying to understand this :-)
remoteDatasource.read()
So far good , however once more time I call the read() , GET request is
not happening. Why is that? remoteDatasource.read()
No Get request here no matter how many times I call after this
Also I noticed the same behaviour with fetch() method.
Can someone explain me why is this behaviour? also what is the difference between read and fetch.
The read() method is supposed to request the remote service every time.
The fetch() method only requests the remote service the first time.
Your particular read() may not be requesting the remote service because it is caching. Can you try your request as a POST or set the configuration in transport.read.cache to false?
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read.cache
It seems to optimize the behavior Kendo is limiting the number of calls to two if you call datasource.read() in successive lines. Which is fair as there is no need in practical scenario to have such a code.
Here are the two types of code i have written.
Scenario 1 : Calling the datasource.read() in response to a button click.
$("#remoteRequestBtn").click(function () {
var remoteTemplate = kendo.template($("#remotetemplate").html(), { useWithBlock: false });
var remoteDatasource = new kendo.data.DataSource({
transport: {
read: {
cache: false,
url: 'Home/RemoteData',
}
},
change: function () {
$("#remotemovies tbody").html(kendo.render(remoteTemplate, this.view()));
}
});
remoteDatasource.read();
});
Result : A Get request is called to the web api , whenever i click the button.
Scenario 2 : Calling multiple datasource.read() in response to a button click.
$("#remoteRequestBtn").click(function () {
var remoteTemplate = kendo.template($("#remotetemplate").html(), { useWithBlock: false });
var remoteDatasource = new kendo.data.DataSource({
transport: {
read: {
cache: true,
url: 'Home/RemoteData',
}
},
change: function () {
$("#remotemovies tbody").html(kendo.render(remoteTemplate, this.view()));
}
});
remoteDatasource.read();
remoteDatasource.read();
remoteDatasource.read();
remoteDatasource.read();
});
Note : I am calling the read method 4 times , Now if you ask me if this is a valid scenario :-) It is not :-)
Result : In this case i get only two GET requests (For the first and second read() , Rest of the reads are ignored )
As of now i would like to treat this as an optimization from the Kendo-UI side , unless someone comeback and correct it.
Special Thanks to JFlok & CodingWithSpike for giving right directions.
Does your change callback or any other Javascript throw an exception? Try removing your change handler function. I've seen issues in the past where if an uncaught exception is thrown while the DataSource is trying to process the server response, then the DataSource is left in a state where it thinks the previous request is still running (because it never finished due to the error) and won't do another request.
Related
I want to solve following issue. I have a Spring-MVC Application with Thymeleaf, with a post request (sent by a form) I trigger a simulation task, what could take several minutes. The task process big number of data and we would like to have a progress bar via JavaScript. If there are two sessions, the simulation should be triggered independently and each browser shows its progress status.
Currently we have a solution, what is not really working well all the time.
The MVC Controller gets the Post request:
#Autowired SimulatorView view; // SESSION SCOPE
#PostMapping("/view")
public String run(#ModelAttribute(CHECKS) ChecksDto checksWrapper, Model model) throws InterruptedException, ExecutionException {
view.setStatisticDto(simulate(checksWrapper)); // Can take several minutes
return "simulation/result :: simulated";
}
When I trigger the simulation on my WebGUI, a progress bar has been displayed and via JavaScript I am calling Rest Methods frequently to ask for the status of the progress.
RestController
#RequestMapping("simulation/api")
public class SimulatorApi {
#Autowired SimulatorView view; // SESSION SCOPE
#RequestMapping("/progressStream")
public double progressStream() {
return view.getProgress().progressStream();
}
#RequestMapping("/progressInvoice")
public double progressInvoice() {
return view.getProgress().progressInvoice();
}
}
My JavaScript code snippet looks like:
function registerSimulationRunEvent() {
// this is the id of the form
$("#simulatorForm").submit(function(e) {
handleSimulationStarted();
var url = location.protocol + "//" + location.host + "/fdsclient/simulation/view";
$.ajax({
type: "POST",
url: url,
data: $("#simulatorForm").serialize(), // serializes the form's elements.
success: function(data) { handleSimulationFinished(); },
error: function(xhr, error) { handleSimulationError(); }
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
}
function handleSimulationStarted() {
replaceResultPanelRunning(); // THYMELEAF FRAGMENT EXCHANGE
}
function handleSimulationFinished() {
stopResultPanelAnimation(); // STOP PROGRESS BAR ANIMATION
replaceResultPanelSimulated(); // EXCHANGE THYMELEAF FRAGMENT
}
function handleSimulationError() {
stopResultPanelAnimation();
replaceResultPanelError();
}
function replaceResultPanelRunning() {
var url = // URL;
$("#resultDiv").load(url);
startResultPanelAnimation();
}
// ANIMATION
var animationInterval = null;
function startResultPanelAnimation() {
animationInterval = setInterval(animateResultPanel,4000);
}
function stopResultPanelAnimation() {
clearInterval(animationInterval); // stop the interval
}
function animateResultPanel() {
$("#simulatorProgressLabel").animate({opacity: '0.4'}, "slow");
$("#simulatorProgressLabel").animate({opacity: '1.0'}, "slow");
}
I know using session scope for rest services is a bad thing, but I didn`t know yet what is a good and easy solution. On the other hand currently different browser can simulate independently, but not always the progress bar works (especially when trigger first time mostly doesnt work). The IE11 only works when the Developer Tools are activated. When deactivating the tool while progress, the progress bar stops to grow.
What I would like to know is, how a good solution looks like when using template engine with Spring-MVC and Thymeleaf for triggering the process and displaying the status of progress via Javascript (as JQUery). Thank you in advance.
I have done a similar thing using Jquery AJAX POST submission. You can do something like this. This will submit POST request as a JSON format to the controller and wait for a response. A progress UI component can be shown during this waiting period.
//Start Progress display
function setStatistic(){
var data = JSON.stringify(//build your ChecksDto)
if (data) {
$.ajax({
url : '/view',
headers : {
'Content-Type' : 'application/json'
},
method : 'POST',
dataType : 'json',
data : data,
success : function(data) {
if (data.status == 200) {
// Stop Progress display
// Handle success status
}
},
error : function(xhr, status, error) {
// Stop Progress display
// Handle errors here
}
});
}
}
You also need to change Controller method to retrieve ajax requests as follows,
#ResponseBody
#PostMapping("/view")
public String run(#RequestBody ChecksDto checksWrapper, Model model) throws InterruptedException, ExecutionException
At least I found the solution in another Stackoverflow Page. The magic word is setting ajax cache to false.
$.ajaxSetup ({
// Disable caching of AJAX responses */
cache: false
});
I'm using ajax to call a POST method in my controller. On average, this method runs between 15 and 20 seconds.
I'm using aync false in that call because I need to wait the answer to know which way to go. But, when i using async false my loading (gif) isn't showed.
$(document).ajaxStart(function() {
$('#overlay').show();
});
$(document).ajaxStop(function() {
$('#overlay').hide();
});
What is the best way to resolve it?
EDIT 1
I have the save function that performs multiple validations and calls the method in the controller:
function salvarInformacoes(pedidos, ums, callback) {
$.ajax({
url: 'PlanoCortes/SalvarInformacoes',
type: 'POST',
data: {
sglDeposito: $("#ddl-Deposito option:selected").text(),
codUnimetPCP: $('#ddl-Um-sip').val(),
numEtapa: $("#ddl-Operacao").val(),
rotinaUM: $('#chk-Rotina-UM').is(":checked"),
dscEtapa: $("#ddl-Operacao option:selected").text(),
dadosPedidosJson: pedidos,
dadosUMsJson: ums,
corteVirtual: corteVirtual
},
success: callback
});
}
function salvar() {
var resultado = false;
...
salvarInformacoes(JSON.stringify(pedidos), JSON.stringify(ums), myCallback);
function myCallback(retorno) {
if (retorno.success != false) {
...
}
else {
resultado = false;
return;
}
resultado = true;
}
return resultado;
}
...
Before the method "myCallback" is called, the function return false. In this way, the code inside the statement below is never executed:
if (salvar()) {
...
}
What is the best way to resolve it?
Don't use async: false.
The browser doesn't show the changes because async: false makes the operation not asynchronous and locks the browser. Keep asynchronous code asynchronous and you can do other things while that code is executing.
I need to wait the answer to know which way to go.
This is the result of a design flaw somewhere in the code. You might try looking through the question and answers here for some help. Essentially you don't want to block the client-side code while waiting for the response, but instead want to handle the response when it arrives.
I have the following code, where I have a myBool (a boolean) in my Data Browser initially set to false,
however sometime while I'm still viewing my page I have code set to turn it to true.
How can I make a real time update that will automatically hide my #div when myBool turns to true?
var myBool = currentUser.get("myBool");
if(myBool) {
$('#div').hide();
}
I did some research and found that the Parse.Cloud.afterSave() function may be useful, but I don't see how it will update the content automatically?
Hope I've been clear!
Thanks.
Edit:
Possibly something like this in my main.js?
Parse.Cloud.afterSave("setBool", function() {
var query = new Parse.Query(Parse.Installation);
query.equalTo('myBool', true);
Parse.Push.send({
where: query,
}, {
success: function() {
$('#div').hide();
},
error: function(error) {
$('#div').show();
}
});
});
Your problem with your afterSave function is that your calling it for a function rather than a class.
AfterSave is called after an object from a certain class is saved. If your bool
Parse.Cloud.afterSave(Parse.Installation, function(request) {
// Send push here, use request to target correct user
});
Additionally your push listener should be the one modifying the divs, not the CloudCode.
I'm making a functional mockup using mootools,and in this prototype I have to load an html file via request.HTML, but as soon as I run the script, the call never reaches the onSuccess due to the state = 0.
The blame could be that the request is treated as a violation of the crossdomain.
So I was wondering if is out there a way to work it around?
this is the code I use for performing the request
req = new Request.HTML({
url: "detail.html",
onFailure: function(a) { console.log("iFailed: " + a); },
onSuccess: function(r3, rEls, rHTML, rJS) {
console.log("It worked!!");
},
onComplete: function() { console.log('completed'); }
}).send();
as I run this it always goes into the onFailure and in the onComplete without hitting the onSuccess.
I need this to work with safari, because the mock shall work on an iphone/ipad/ipod.
thx a ton
in the end I managed it bu injecting an iframe via js, instead of populating the div via ajax.
it's kind of lame and it sucks a lot, but at least it work and it's good for prototyping purposes.
I am wondering what is the best way to stop duplciate submissions when using jquery and ajax?
I come up with 2 possible ways but not sure if these are the only 2.
On Ajax start disable all buttons till request is done. 2 problems I see with this though is I use jquery model dialog so I don't know how easy it would be to disable those button as I not sure if they have id's. Second I if the the request hangs the user has really no way to try again since all the buttons are disabled.
I am looking into something called AjaxQueue at this time I have no clue if it is what I need or how it works since the site where the plugin is apparently down for maintenance.
http://docs.jquery.com/AjaxQueue
Edit
I think this is a spin off of what I was looking at.
http://www.protofunc.com/scripts/jquery/ajaxManager/
The only problem I see with this ajaxManager is that I think I have to change all my $.post, $.get and $.ajax ones to their type.
But what happens if I need a special parameter from $.ajax? Or that fact I like using .post and .get.
Edit 2
I think it can take in all $.ajax options. I am still looking into it. However what I am unsure about now is can I use the same constructor for all requests that will use the same options.
First you have to construct/configure a new Ajaxmanager
//create an ajaxmanager named someAjaxProfileName
var someManagedAjax = $.manageAjax.create('someAjaxProfileName', {
queue: true,
cacheResponse: true
});
Or do I have to make the above every single time?
How about setting a flag when the user clicks the button? You will only clear the flag when the AJAX request completes successfully (in complete, which is called after the success and error callbacks), and you will only send an AJAX request if the flag is not set.
Related to AJAX queuing there is a plugin called jQuery Message Queuing that is very good. I've used it myself.
var requestSent = false;
jQuery("#buttonID").click(function() {
if(!requestSent) {
requestSent = true;
jQuery.ajax({
url: "http://example.com",
....,
timeout: timeoutValue,
complete: function() {
...
requestSent = false;
},
});
}
});
You can set a timeout value for long-running requests (value is in milliseconds) if you think your request has a possibility of hanging. If an timeout occurs, the error callback is called, after which the complete callback gets called.
You could store an active request in a variable, then clear it when there's a response.
var request; // Stores the XMLHTTPRequest object
$('#myButton').click(function() {
if(!request) { // Only send the AJAX request if there's no current request
request = $.ajax({ // Assign the XMLHTTPRequest object to the variable
url:...,
...,
complete: function() { request = null } // Clear variable after response
});
}
});
EDIT:
One nice thing about this, is that you could cancel long running requests using abort().
var request; // Stores the XMLHTTPRequest object
var timeout; // Stores timeout reference for long running requests
$('#myButton').click(function() {
if(!request) { // Only send the AJAX request if there's no current request
request = $.ajax({ // Assign the XMLHTTPRequest object to the variable
url:...,
...,
complete: function() { timeout = request = null } // Clear variables after response
});
timeout = setTimeout( function() {
if(request) request.abort(); // abort request
}, 10000 ); // after 10 seconds
}
});
$.xhrPool = {};
$.xhrPool['hash'] = []
$.ajaxSetup({
beforeSend: function(jqXHR,settings) {
var hash = settings.url+settings.data
if ( $.xhrPool['hash'].indexOf(hash) === -1 ){
jqXHR.url = settings.url;
jqXHR.data = settings.data;
$.xhrPool['hash'].push(hash);
}else{
console.log('Duplicate request cancelled!');
jqXHR.abort();
}
},
complete: function(jqXHR,settings) {
var hash = jqXHR.url+jqXHR.data
if (index > -1) {
$.xhrPool['hash'].splice(index, 1);
}
}
});