2011-03-08 2 views
1

J'ai un graphique à barres dans mon application web (dessinée en utilisant javascript). Il peut être plus large que l'écran, donc il y a des flèches qui déplacent le graphique le long de l'axe des x sur un clic (encore fait en utilisant javascript).Comment obtenir des données du serveur de javascript?

Je voudrais redessiner le graphique lorsque l'utilisateur clique sur une flèche. La manipulation des données effectuée pour générer le graphique est trop complexe à faire du côté client, et je ne veux pas tout envoyer en même temps, car ce serait un gâchis si l'utilisateur ne décidait jamais de faire défiler. À la place, sur un clic, je voudrais envoyer une requête au serveur pour les nouvelles données nécessaires pour dessiner la partie suivante du graphique. Comment cela peut-il être fait?

Note: Je veux seulement demander les données, pas une nouvelle page. Le côté serveur est Ruby on Rails v. 3.0.4.

Répondre

1

Vous avez besoin d'Ajax pour cela. Vous pouvez utiliser le prototype intégré ou toute autre bibliothèque Javascript pour accomplir ceci. Ainsi, vous donner un exemple en utilisant jQuery vous pouvez ajouter un gestionnaire de clic

$('#target').click(function() { 
    // Use the $.ajax or equivalent function to send a request to a method in your controller 
}); 

Ainsi, dans cet exemple, dans votre contrôleur, vous pouvez soit mentionner le code de manipulation de dom dans la méthode comme ci-dessous:

def target_method 
    # Process data 
    # dom manipulation code 
    render :update do |page| 
    #use a rails javascript helper like replace_html or the likes 
    end 
end 

Ou optez pour la méthode JavaScript non intrusive et insérez le code de manipulation DOM dans un fichier js.erb.

Voici quelques liens utiles

  1. Rails API on Prototype helpers
  2. Unobtrusive JavaScript on Rails
+0

Merci pour votre aide. J'irai avec jQuery comme vous l'avez recommandé car je l'utilise déjà. Y compris le prototype à ce stade, il va se battre avec le symbole '$' avec jQuery. – providence

+1

Si vous avez besoin d'utiliser les deux bibliothèques, vous pouvez utiliser la méthode noconflict de jQuery. http://api.jquery.com/jQuery.noConflict/ – Shreyas

Questions connexes