Rails 3 Édition sur place

Question

J'essaie d'implémenter la modification sur place dans une application Rails 3 qui prend la valeur modifiée et révise un calcul basé sur cette valeur. Par exemple:

Avant modifier des « crédits pour faire un don » terrain:
Vous avez 10 crédits restants. Crédits pour faire un don: 0.

Après modification du champ "credits to donate":
Il vous reste 5 crédits. Crédits pour faire un don: 5.

J'ai examiné diverses options, et il semble que l'éditeur jquery-in-place fasse ce que je recherche. Pour référence:

• jQuery-in-place-editor code
• Sample Rails app
• Github Repo of Sample Rails app

Les travaux de démonstration. Mais je pense que ce que je dois faire est d'utiliser la fonction de rappel pour appeler un script ruby, donc je peux faire un peu plus de traitement. Je ne suis pas entièrement sûr si c'est ce que je dois faire si, alors je cherche des conseils.

Voici le javascript jQuery (de /public/javascripts/application.js dans l'application de l'échantillon) que je pense est pertinent:

// Using a callback function to update 2 divs 
$("#editme4").editInPlace({ 
    callback: function(original_element, html, original){ 
     $("#updateDiv1").html("The original html was: " + original); 
     $("#updateDiv2").html("The updated text is: " + html); 
     return(html); 
    } 
}); 

Il ressemble à ce que je dois faire est de prendre original et html et jouer avec eux un peu , puis les renvoyer aux divs appropriés. La question est, comment puis-je faire cela? Je pense à deux possibilités:

A. Il existe une fonction dans l'éditeur jquery-in-place pour appeler un URL. Puis-je l'utiliser pour appeler un script ruby ​​et obtenir un résultat? Comment ferais-je cela dans les rails? Voici le code pour appeler une URL (encore une fois de /public/javascripts/application.js); mais il appelle un script PHP.

$("#editme1").editInPlace({ 
    // callback: function(unused, enteredText) { return enteredText; }, 
    url: 'server.php', 
    show_buttons: true 
}); 

B. Modifier le texte mis à jour directement en javascript, et le transmettre aux divs appropriés. Je préférerais utiliser un script ruby, mais peut-être que ce serait plus facile.

Answer 1

La solution à ce problème est assez complexe, mais j'ai trouvé un moyen de le faire. Il est surprenant pour moi que la solution ne soit pas facilement disponible, car il semble, comme le dit r-dub, quelque chose de très commun. Je n'ai fini par utiliser aucune des fonctions d'édition sur place d'un plugin jQuery, et j'ai modifié un champ de texte directement à l'aide de jQuery en me basant sur un champ de texte de formulaire. J'ai d'autres mots, j'ai suivi (B) ci-dessus.

J'ai une vue qui ressemble à ceci:

Available: <span id="available_cr"><%= @available_credits %></span> 
Remaining: <span id="remaining_cr"><%= @remaining_credits %></span> 

<%= form_for(@page, :html => { :id => 'do_fvalue' }, :remote => true) do |f| %> 
    <div class="field"> 
    How many to buy at <%= @cost %> credits per unit? <%= f.text_field :fvalue, :autocomplete => :off %> 
    </div> 
    <div class="field"> 
    How many to buy at <%= @cost_20 %> credits per unit? <%= f.text_field :gvalue, :autocomplete => :off %> 
    </div> 
    <div class="actions"> 
    <%= f.submit "Update" %> 
    </div> 
<% end %> 

Je puis farcir les rails @ -variables dans un (partiel .html.erb rendu au début de ma page .html.erb) de sorte que le javascript/jQuery peut y accéder:

<script type="text/javascript"> 
    var cost = parseInt(<%= @cost %>) 
    var cost_20 = parseInt(<%= @cost_20 %>) 
    var available_credits = parseInt(<%= @available_credits %>) 
    var remaining_credits = parseInt(<%= @remaining_credits %>) 
</script> 

Puis, en public/JavaScripts/applications.js, je le code suivant:

function checkFields(){ 
    var to_buy_f = $("#page_fvalue").val(); 
    var to_buy_g = $("#page_gvalue").val(); 
    var subtract_f = to_buy_f * cost; 
    var subtract_g = to_buy_g * cost_20; 
    var remain = available_credits - subtract_f - subtract_g; 
    $("#remaining_cr").text(remain); 
}; 

$("#page_fvalue").keyup(function() { 
    checkFields(); 
}).keyup(); 

$("#page_gvalue").keyup(function() { 
    checkFields(); 
}).keyup(); 

Les mises à jour de la fonction de checkFields #remaining_cr basés sur les valeurs trouvées dans #page_fvalue et #page_gvalue. Notez qu'il utilise use_credits, cost et cost_20, que nous avons introduits dans les variables javascript ci-dessus. Les deux dernières fonctions indiquent à jQuery de surveiller #page_fvalue et #page_gvalue pour les événements keyup. Lorsque l'utilisateur appuie sur une touche, il appelle checkFields() pour mettre à jour #remaining_cr. Tout cela mis à part, lorsque l'utilisateur clique sur "soumettre" sur le formulaire, l'ensemble du formulaire est soumis avec les valeurs actuelles. Je ne sais pas si c'est le moyen le plus efficace de faire ce que j'essayais de faire, mais ça marche!

Answer 2

Ce que vous essayez de faire est assez commun. Ce que vous voulez faire est de faire une requête AJAX dans ce rappel en envoyant les données d'origine à votre application rails et en renvoyant le code html modifié à votre page. Voici le jQuery AJAX manual page. Faites défiler vers le bas pour voir quelques exemples.