Comment afficher les données sur la même page après avoir cliqué sur un bouton [Sinatra/Ruby]

Je m'exerce à créer une application web dans Sinatra et j'essaye de mettre à jour une page pour que les informations d'une base de données soient affichées une fois sur un bouton est cliqué (plus précisément, je suis en utilisant une base de données d'étudiants avec l'âge des étudiants, le nom et l'emplacement du campus). J'ai un itinéraire avec 5 boutons (un pour chaque campus) et une fois qu'un bouton de campus est cliqué, je veux que la page mette à jour avec toutes les informations des étudiants (de ce campus) sur la même page.Comment afficher les données sur la même page après avoir cliqué sur un bouton [Sinatra/Ruby]

C'est ce que je le 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

C'est ce que je le 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>

Actuellement, si un bouton est cliqué il redirigera vous à une nouvelle page avec le formulaire d'information des étudiants de ce campus, comment puis-je rendre l'information sur la même page?

Source

2017-04-14 CarlosG90

Il semble que vous souhaitiez effectuer un appel AJAX. Vous devrez écrire du javascript pour récupérer la vue des étudiants depuis votre serveur et l'insérer dans la page en cours.

Utilisez une bibliothèque javascript comme jQuery: http://api.jquery.com/jquery.ajax/

L'idée est que vous lier un événement click sur vos boutons sur le campus et le feu d'un appel AJAX à l'URL donnée par le href du bouton du campus. Le serveur répondra avec la vue rendue pour ce campus et le retournera à votre fonction javascript. Vous pouvez ensuite l'insérer dans la page.

Par exemple:

Vous ajoutez une classe à vos boutons (pour les sélectionner facilement avec jQuery):

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

vous écrivez maintenant javascript. Vous devrez créer un fichier javascript et l'inclure dans la mise en page de votre application. Sinatra propose des ressources statiques telles que les fichiers css et javascript du répertoire ./public de votre application. Ensuite, écrivez <script src="you_file.js"></script> dans le bas de votre fichier html mise en page de l'application. Vous aurez également à download the jQuery file et faire la même chose assurez-vous juste le fichier jQuery est inclus dans votre mise en page de l'application ci-dessus votre propre fichier javascript à savoir

<script src="the-downloaded-jquery-file.js"> 
<script src="you-file.js">

Dans ce fichier javascript vous pouvez définir vos fonctions jQuery pour mettre en œuvre l'appel AJAX .

Le gestionnaire de clic et appel 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) 
});

C'est à ce sujet. La fonction jQuery load envoie une requête AJAX au chemin du lien campus cliqué. Le serveur recevra la demande à l'itinéraire get '/students/campus/:campus' do et répondra avec les résultats rendus. jQuery va alors remplacer le contenu de la balise body par les résultats. Clause de non-responsabilité: vous devrez peut-être adapter cet exemple à votre cas d'utilisation, mais cela devrait vous orienter dans la bonne direction.Certains sujets couverts par cette réponse sont:

Chargement des actifs statiques dans une application Sinatra (http://www.sinatrarb.com/intro#Static%20Files)
Handlers événement dans jQuery (https://learn.jquery.com/events/handling-events/)
appels AJAX jQuery (http://api.jquery.com/load/)
éléments Remplacement innerHTML (How to replace innerHTML of a div using jQuery?)

Bonne programmation!

Source

2017-04-14 20:34:42 DiegoSalazar

Comment afficher les données sur la même page après avoir cliqué sur un bouton [Sinatra/Ruby]

Répondre

Questions connexes