web-dev-qa-db-fra.com

Comment passer une variable javascript dans un code erb dans une vue js?

J'ai cette vue Javascript dans mon projet Rails 3:

app/vues/dépenses/new_daily.js.erb

var i = parseInt($('#daily').attr('data-num')) + 1;
//$('#daily').append('agrego fila ' + i + ' <br />');

$('#daily').append('<%= escape_javascript(render(partial: 'new_expense', locals: { i: i })) %>');

$('#daily').attr('data-num', i);

Je veux passer ma variable javascript 'i' à un Ruby partiel via les locaux, comment puis-je y parvenir?

javascriptruby-on-railsviewerb
28
fespinozacast

Autant que je sache, il n'y a aucun moyen de le faire directement et la raison est assez simple aussi, le HTML est exécuté côté serveur et javascript est un langage côté client qui signifie qu'il est exécuté dans votre navigateur local, c'est pourquoi si vous essayez même pour passer une variable entre les deux, vous devrez faire une demande au serveur. Cependant, ce problème est résolu en appelant une demande AJAX, ceci AJAX La demande fait la même chose que d'envoyer une nouvelle demande au serveur, mais elle le fait sans actualiser ou recharger la page, elle donne aux utilisateurs l'illusion qu'aucune demande n'a été faite.

un gars pose une question similaire Ici

et vous pouvez en savoir plus sur AJAX ici sur MDN :

22
Umer Hassam

Oui, vous pouvez transmettre la valeur en utilisant jquery;

<%=f.text_field :email ,:id=>"email_field" %>

<script type="text/javascript">
   var my_email= "[email protected]"
   $(document).ready(function(){
        $("#email_field").val(my_email);
   });
</script>
14
Thaha kp

La réponse simple est que vous ne pouvez pas. Les partiels sont développés côté serveur et les variables JavaScript sont définies ultérieurement côté client. Vous pouvez faire de i (comme nom de variable) un paramètre du partiel et l'utiliser là.

render :partial => 'xx', :locals => { :variable => 'i' }

Et en partie

alert(<%= variable %>);
3
Marek Sapota

Découvrez le gon gemme. https://github.com/gazay/gon

Il vous donne un objet simple auquel vous pouvez transmettre des variables qui seront disponibles pour vos scripts via window.gon

Également référencé ici http://railscasts.com/episodes/324-passing-data-to-javascript

3
Sam Figueroa

1) Vous pouvez créer une balise js avec une variable globale dans votre modèle erb, après quoi vous pourrez accéder à cette variable à partir de n'importe quel fichier js

<%= javascript_tag do %>
   window.productsURL = '<%= j products_url %>';
<% end %>

2) Vous pouvez passer des données à data-attribute dans le modèle erb et y accéder par js du côté client de cette façon $('#products').data('products')

<%= content_tag "div", id: "products", data: {products: Product.limit(10)} do %>
   Loading products...
<% end %>

3) Vous pouvez utiliser gon , pour utiliser vos variables Rails dans vos js

Il y a un bon article, lisez-le et une bonne solution pour votre cas spécifique http://railscasts.com/episodes/324-passing-data-to-javascript , plus de commentaires sont ici http://railscasts.com/episodes/324-passing-data-to-javascript?view=asciicast

2
Julia Usanova

Voici quelques options différentes sur la façon de le faire:

http://jing.io/t/pass-javascript-variables-to-Rails-controller.html

2
Greg

Les meilleures autres réponses ici ont raison: cela ne peut pas être fait en passant la variable javascript dans un partiel erb, car elle est rendue sur le serveur, pas sur le client.

Mais comme quiconque le recherche est probablement intéressé par une solution de contournement, que je ne vois pas ici, je posterai cet exemple qui fonctionne bien avec Rails UJS et Turbolinks.

Tout d'abord, vous configurez votre contrôleur pour renvoyer un partiel au format HTML:

format.html { render partial: "new_expense" }

Ensuite, écrivez un javascript AJAX dans app/views/expenses/new_daily.js.erb:

var i = parseInt($('#daily').attr('data-num')) + 1;

$.ajax({
  url: '/daily',
  type: 'GET',
  dataType: 'html',
  contentType: "application/html",
  success: function(response) { 

      $('#daily').replaceWith(response)

      $('#daily').attr('data-num', i);
  }
});

Cela va obtenir votre Rails partiel en tant que fragment html que vous pouvez utiliser pour remplacer cette partie de votre page rendue. Vous pouvez utiliser jQuery pour obtenir votre data-num valeur d'attribut, faites un peu de calcul dessus, remplacez le partiel dans votre vue, puis définissez à nouveau la valeur d'attribut.

Vous vous demandez peut-être pourquoi vous donner tant de mal à obtenir le Rails partiel et le remplacer sur la page, au lieu de simplement obtenir l'attribut de données, de faire des calculs dessus et de le définir? La réponse est que c'est la meilleure, et peut-être la seule façon de faire quelque chose qui est vraiment essentiel lors du rendu d'un Rails partiel en utilisant UJS tout en gérant une réponse asynchrone à une action).

Si vous gérez une réponse asynchrone de votre serveur dans un create.js.erb template, vos variables (@daily, par exemple) ne reflèteront pas le travail effectué après la fin de la requête (par exemple, s'il y a eu un traitement sur un serveur d'arrière-plan comme Sidekiq). Dans ce cas, vous n'avez pas de variables de réponse d'action à jour à transmettre dans votre Rails partiel dans le js.erb, mais vous ne pouvez pas non plus transmettre la réponse javascript data dans votre partiel, comme indiqué dans cette question.

Pour autant que je sache, cette approche est le seul moyen d'obtenir un partiel entièrement à jour après avoir reçu une réponse à une réponse asynchrone (non représentée). Cela vous donne la mise à jour partielle, vous permet d'y insérer votre javascript et est suffisamment flexible pour fonctionner dans pratiquement tous les cas d'utilisation.

2
user3670743