ボタンをクリックすると同じページにデータを表示する方法[Sinatra/Ruby]

SinatraでWebアプリケーションを作成する練習中で、データベースからの情報がボタンに表示されるようにページを更新しようとしています（具体的には、生徒の年齢、名前、キャンパスの場所を持つ学生データベースを使用しています）。私は5つのボタン（各キャンパスに1つずつ）のルートを持っており、キャンパスボタンをクリックすると、同じページのすべての学生情報（そのキャンパスから）で更新されます。ボタンをクリックすると同じページにデータを表示する方法[Sinatra/Ruby]

これは、これは私が現時点でcampus.erb

<!DOCTYPE html> 
<html> 
<head> 
    <title>Campus Cohorts</title> 
    <link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
<h1>Cohorts</h1> 
<p>Click on a button to see all students from that location.</p> 

    <a href="/students/campus/SF"><button type="button">San Francisco</button></a> 
    <a href="/students/campus/NYC"><button type="button">New York City</button></a> 
    <a href="/students/campus/SD"><button type="button">San Diego</button></a> 
    <a href="/students/campus/CHI"><button type="button">Chicago</button></a> 
    <a href="/students/campus/SEA"><button type="button">Seattle</button></a> 


</body> 
</html>

のために持っているものであるボタンがクリックされた場合、それがリダイレクトされますapp.rbのために私が持っているもの

require 'sinatra' 
require 'sqlite3' 
set :public_folder, File.dirname(__FILE__) + '/static' 
db = SQLite3::Database.new("students.db") 
db.results_as_hash = true 

get '/' do 
    @students = db.execute("SELECT * FROM students") 
    erb :home 
end 

get '/students/new' do 
    erb :new_student 
end 

get '/students/campus' do 
    erb :campus 
end 

get '/students/campus/:campus' do 
    erb :campus 
    campus_data = db.execute("SELECT * FROM students WHERE campus=?", params[:campus]) 
    campus_data.to_s 
    response = "" 
    campus_data.each do |student| 
    response << "ID: #{student['id']}<br>" 
    response << "Name: #{student['name']}<br>" 
    response << "Age: #{student['age']}<br>" 
    response << "Campus: #{student['campus']}<br><br>" 
    end 
    response 
end 

post '/students' do 
    db.execute("INSERT INTO students (name, campus, age) VALUES (?,?,?)", [params['name'], params['campus'], params['age'].to_i]) 
    redirect '/' 
end

ですそのキャンパスの学生情報フォームを使って新しいページを開き、同じページに情報をどのように表示できますか？

出典

2017-04-14 CarlosG90

あなたはAJAXコールをしたいと思うようです。サーバーから生徒のビューを取得し、現在のページに挿入するためにJavaScriptを書く必要があります。

は、jQueryのようなJavaScriptライブラリを使用してください：http://api.jquery.com/jquery.ajax/

アイデアは、あなたのキャンパスのボタンをclickイベントを結合して、キャンパスボタンのhrefで指定されたURLにAJAX呼び出しを発射するだろうということです。サーバーは、そのキャンパスの表示されたビューで応答し、それをJavaScript関数に返します。それをページに挿入することができます。例えば

：

あなたは（簡単にjQueryを使ってそれらを選択するために）あなたのボタンにクラスを追加します。

<a class="campus" href="/students/campus/SF"><button type="button">San Francisco</button></a>

今、あなたはJavaScriptを記述します。あなたは、javascriptファイルを作成し、それをあなたのアプリケーションレイアウトに含める必要があります。 Sinatraは、アプリの./publicディレクトリにあるCSSやjavascriptファイルなどの静的アセットを提供します。次に、アプリレイアウトHTMLファイルの一番下に<script src="you_file.js"></script>と書いてください。またdownload the jQuery fileになりますし、あなたはAJAX呼び出しを実装するために、あなたのjQueryの関数を定義することができますjavascriptのファイルと同じだけその内部

すなわちjQueryのファイルは独自のJavaScriptファイル上のアプリのレイアウトに含まれていることを確認します。

クリックハンドラとAJAXコール：

# When the document receives a click on a '.campus' element run this function 
$(document).on('click', '.campus', function(){ 
    var path = this.href; # grab the route 

    # jQuery provides this convenient AJAX method that will fetch the HTML 
    # returned by calling the server at the path URL and insert it into 'body' 
    $('body').load(path) 
});

それについてです。 jQuery load関数は、クリックされたキャンパスリンクのパスにAJAXリクエストを送信します。サーバーはget '/students/campus/:campus' doルートでリクエストを受け取り、レンダリングされた結果を返します。 jQueryはbodyタグの内容を結果と置き換えます。

免責事項：この例をユースケースに合わせる必要があるかもしれませんが、正しい方向を指しているはずです。この回答でカバーいくつかの科目は、次のとおりです。

はシナトラアプリのjQuery中（http://www.sinatrarb.com/intro#Static%20Files）
イベントハンドラで静的な資産をロード（https://learn.jquery.com/events/handling-events/）は
AJAXは、innerHTMLプロパティ（http://api.jquery.com/load/）
交換要素のjQueryで呼び出します（How to replace innerHTML of a div using jQuery?）

ハッピーコーディング！

出典

2017-04-14 20:34:42 DiegoSalazar

ボタンをクリックすると同じページにデータを表示する方法[Sinatra/Ruby]

答えて

関連する問題