0

サーバーに対して ajax 呼び出しを行い、画面上で描画を行うコードがあります。すべてが機能しますが、実行が不安定なようです。描画機能の結果を表示する前に、ページを数回リロードする必要がある場合があります。描画は Processing.js を介して行われます。これは、コードの意図を示すコメントを追加したコードです。

ビュー構造 (Rails 3.2 です) は次のとおりです。

アプリ/文/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 <- ここに getstatus 関数があります:

     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 <- ここで描画が行われます。jquery.dataを介して対応するdivに保存され、コントローラーからの最新の戻り値と比較される「キャッシュ」変数があります。

    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);

    }

その結果、実際に pjs.update(text) の結果を確認できる場合もありますが、何も描画されない場合もあります。サーバー コンソールから、コントローラ アクションが正常に機能し、モデルから必要なものが常に返されることがわかります。

編集:これが役立つ場合は、HTMLページの「ソースの表示」です..

    <!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>

任意の入力をいただければ幸いです。提供できる情報がさらにある場合は、お知らせください。

ありがとう！

4

0 に答える 0