0

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!

2
  • Have you checked the JS console? Apr 4, 2012 at 17:10
  • yes, all is fine. Everything works, no errors. Just that sometimes I have to force-reload (CMD+R) page several times before something shows up..
    – Stpn
    Apr 4, 2012 at 17:22

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy