質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

rails から js へのgon を使ったデータの引き渡しがうまくいかない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,247

score 6

簡単なタスクのシェアアプリをrails と javascripts を使って作成しています。
each文を使った繰り返し処理の中に、ボタンを押すと発火して画像の表示・非表示の要素をJSで実装しました。
eachで作成された要素の一つ一つが単独で発火するように.each_with_indexを用いて各要素に番号を割り振りました。
jsでの記述にwhile(i < gon.tasks.length){ のようにgon を用いたrails と JSのデータの連携をしようと考えましたが、コントローラーでgon.tasks = @tasks のように定義すると何も表示されないページに偏移し、ウィンドウの左上のロードアイコンがずっと回っている状態になってしまいます。

解決したいこと 上記の画面を解消しraiks から jsへのデータの連携を行いたい。

★エラー内容
gon を使って 変数をコントローラーに指定。

・gon未使用時 Uncaught TypeError: Cannot read property 'length' of null 
(検証ツール.consoleにて)

・gon使用時  ページ自体が読み込まれなくなる

app/aseets/javascripts

$(function () {
  var i = 0;
  while(i < gon.tasks.length){
  const index = i;
    $('img_open_'+index).on('click', () => {
    $('img').toggle(hidden);
    });
  }});
app/controllers/taskscontller

class TasksController < ApplicationController
  def index
    @tasks = Task.where(params[:id]) 
    gon.tasks = @tasks  ← この部分が原因?
  end

  def show
    @task = Task.find(params[:id])
  end

  def edit
    @task = Task.find(params[:id]) 
  end

  def update
    @task = Task.find(params[:id])
    @task.update(task_params)
    redirect_to action: 'index'
  end

  def destroy    
    @task = Task.find(params[:id])
    @task.destroy 
    redirect_to action: 'index'
  end


  private
def task_params
  params.require(:task).permit( :name, :tasktext)
end

end
app/view/index.html.haml


 .said-content-body
    - @tasks.each_with_index do |task,index| 
      .task-box{:id => "task-box_#{index}"}
        .tasks 
          .task-d-h
            %a{:href  => edit_task_path(task.id)}編集
            %a{"data-method" => "delete", :href => task_path(task.id), :rel => "nofollow"} 削除
          .tasks-name 
            作業名:
            =task.name
          .tasks-text 
            作業内容:
            =task.tasktext
          %button{:id => "img_open_#{index}"} 確認
          %img{:src => "https://t.pimg.jp/035/424/702/1.jpg"}/
          .tasks-day
            =task.created_at.strftime("%Y年%m月%d日 %H時%M分")
application.html.haml


!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title tasks
    = stylesheet_link_tag    'application', media: 'all'
    = include_gon(init: true)
    = javascript_include_tag 'application'
    = csrf_meta_tags

  %body
    = yield

試したこと
https://whatsupguys.net/programming-school-dive-into-code-learning-37/
↑のページを参考にさせていただき記述を変えました。
gonでの読み込みエラーを中心に検索し
gon clear で解消できるとのことだったので、コントローラに記述を行う
→ページは表示されるが、gon clearで変数がクリアされ
Uncaught TypeError: Cannot read property 'length' of null の記述がコンソールにて確認できる。
↑ length の 変数が定義されてませんよと解釈。

手詰まりです。
お知恵を貸していただけると助かります。
よろしくお願いいたします。


Rails 5.0.7.2
gem'gon' bundle済み

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • randm_meet

    2020/03/30 12:54 編集

    $(function () {
    var i = 0;
    while(i < gon.tasks.length){
    const index = i;
    $('img_open_'+index).on('click', () => {
    $('img').toggle(hidden);
    });
    }});
    のwhile部分を↓

    $(function () {
    $('img_open_'+index).on('click', () => {
    $('img').toggle(hidden);
    });
    }});
    に変更(削るだけ)すると通常の画面が表示されます。→無限ループしなくなっている

    やはりこの部分でずっとロードし続けている様子です。

    キャンセル

  • s.k

    2020/03/30 12:57

    そうなんですね。それでは無限ループが原因ですね。
    gon.tasks.length は何が表示されますか?
    console.log で確認してみてください。

    キャンセル

  • randm_meet

    2020/03/30 13:20 編集

    console.log(gon.tasks.length); → 2
    console.log(gon.tasks); ↓
    Array(2)
    0: {id: 65, name: "Aさん 通院", tasktext: "2/17 16時〜", created_at: "2020-03-29T11:36:24.000Z", updated_at: "2020-03-29T11:36:24.000Z", …}
    1: {id: 67, name: "通院", tasktext: "cさん
    ↵", created_at: "2020-03-29T13:15:50.000Z", updated_at: "2020-03-30T01:41:36.000Z", …}
    length: 2
    __proto__: Array(0)
     との表示でした!

    キャンセル

回答 1

checkベストアンサー

0

whileの条件は自動的に +1 して増えることはありませんので i++ を書きましょう。

while(i < gon.tasks.length){
  const index = i;
  $('img_open_'+index).on('click', () => {
  $('img').toggle(hidden);
  i++
});

const index = i; はいらないと思います。 i が使えます。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/30 23:43

    i++を記入することで無事に無限リピートが解消されました!
    何度も解決策を探ってくださり、とても助かりました
    ありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る