I have a code that is making ajax calls to the server and does some drawing on screen. Everything works, but the execution seems unstable, sometimes I have to reload page several time before I will see the results of the drawing function. The drawing is done through Processing.js Here is the code with some comments, that I added that show what I intend the code to do.
The view structure (it is Rails 3.2 ) is as follows:
app/sentence/show.html.erb
<script>
$(document).ready(function () {
//This calls the action in controller that queries database for new results:
setInterval(function(){
var idx = "<%= @sentence.id %>";
$.post("getstatus/", {id:idx});
console.log("reload");
},6000);
});
</script>
<%= javascript_include_tag "pjs" %>
<div class="container-fluid plots-field" >
<div id="grid-system">
<canvas id="graphsketch" data-processing-sources="/assets/pjs/graphBuilder2_2.pde"></canvas>
<div id='node_div'></div>
<div id='iframe_div'></div>
<div id='comments_div'></div>
<div id='link_to_plot'><%= link_to "Original plot", @sentence.plot %></div>
</div>
</div>
<div id="data_div"></div>
app/controllers/sentences_controller.rb <- Here I have a getstatus function:
def getstatus
@sentence = Sentence.find(params[:id])
@sentence_so_far = @sentence.get_graph.to_json.html_safe
@sentence_test = "BBB"
respond_to do |format|
format.js
end
end
app/controllers/sentences/gestatus.js.erb <- Here is where the drawing is happening. I have a "cache" variable, that is saved to corresponding div through jquery.data and gets compared with latest return from the controller.
var bound = false;
var pjs = Processing.getInstanceById("graphsketch");
var text = <%= @sentence_so_far %>;
var test = <%= array_or_string_for_javascript(@sentence_test)%>;
//Added this to be able to check difference between cache and current data
Array.prototype.diff = function(a) {
return this.filter(function(i) {
return !(a.indexOf(i) > -1);
});
};
//Saving current state to data with 'orig' ket
$("#data_div").data("orig", text);
var orig = $("#data_div").data("orig");
//Getting cache from data_div
var cache = $("#data_div").data("cache");
//If I have the cache, get the difference and get assign it to text variable, if there is no difference, means I already have what I need on screen
if (cache) {
var dif = cache.diff(orig);
text = dif;
}
//If cache is different from what I had before, draw stuff with text.
if (cache != orig) {
pjs.update(text);
}
//Save current text to cache.
$("#data_div").data("cache", text);
//This allows Processing.js to interact with Javascript
function bindJavascript() {
var pjs = Processing.getInstanceById("graphsketch");
if (pjs != null) {
pjs.bindJavascript(this);
bound = true;
}
if (!bound) setTimeout(bindJavascript, 250);
}
bindJavascript();
//This function is getting called form within Processing.js and works fine..
function nodeName(name) {
$.post("/nodes/this_node/", {id: name});
// console.log(name);
}
So the result is that sometimes I actually get to see the results of pjs.update(text) but sometimes nothing is drawn. From server console I can see that controller action works fine and always returns what I need from the model.
EDIT: Here is the "show source" of the HTML page, if that is helpful..
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/docs.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-responsive.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/style.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Didact+Gothic' rel='stylesheet' type='text/css'>
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/pjs.js?body=1" type="text/javascript"></script>
<script src="/assets/pjs/lib/toxiclibs.js?body=1" type="text/javascript"></script>
<script src="/assets/pjs/lib/toxiclibs.min.js?body=1" type="text/javascript"></script>
<script src="/assets/pjs/processing.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
</head>
<body>
<script>
$(document).ready(function () {
setInterval(function(){
var idx = "5";
$.post("getstatus/", {id:idx});
console.log("reload");
},6000);
});
</script>
<script src="/assets/pjs.js?body=1" type="text/javascript"></script>
<script src="/assets/pjs/lib/toxiclibs.js?body=1" type="text/javascript"></script>
<script src="/assets/pjs/processing.js?body=1" type="text/javascript"></script>
<div class="container-fluid plots-field" >
<div id="grid-system">
<canvas id="graphsketch" data-processing-sources="/assets/pjs/graphBuilder2_2.pde"></canvas>
<div id='node_div'></div>
<div id='iframe_div'></div>
<div id='comments_div'></div>
<div id='link_to_plot'><a href="/plots/60">Original plot</a></div>
</div>
</div>
<div id="data_div"></div>
<div id="video_grid" class="row"></div>
</body>
</html>
Any input greatly appreciated. If there is more info I can provide, please let me know.
Thanks!