Méthode link_to et événement click dans Rails

Question

Comment créer un lien de ce type :

<a href="#" onclick="document.getElementById('search').value=this.value">

en utilisant la méthode link_to dans Rails ?

Je n'ai pas pu le comprendre à partir Documentation sur Rails .

Answer 1

Vous pouvez utiliser link_to_function (supprimé dans Rails 4.1) :

link_to_function 'My link with obtrusive JavaScript', 'alert("Oh no!")'

Ou, si vous avez absolument besoin d'utiliser link_to :

link_to 'Another link with obtrusive JavaScript', '#',
        :onclick => 'alert("Please no!")'

Cependant, mettre JavaScript directement dans votre HTML généré est obtrusif et est mauvaise pratique .

Au lieu de cela, votre code Rails devrait simplement être quelque chose comme ceci :

link_to 'Link with unobtrusive JavaScript',
        '/actual/url/in/case/javascript/is/broken',
        :id => 'my-link'

Et en supposant que vous utilisez le Cadre JS Prototype JS comme ceci dans votre application.js :

$('my-link').observe('click', function (event) {
  alert('Hooray!');
  event.stop(); // Prevent link from following through to its given href
});

Ou si vous utilisez jQuery :

$('#my-link').click(function (event) {
  alert('Hooray!');
  event.preventDefault(); // Prevent link from following its href
});

En utilisant cette troisième technique, vous garantissez que le lien sera suivi d'une autre page - et non qu'il échouera en silence - si JavaScript n'est pas disponible pour l'utilisateur. N'oubliez pas que JavaScript peut être indisponible parce que l'utilisateur dispose d'une mauvaise connexion Internet (par exemple, appareil mobile, wifi public), parce que l'utilisateur ou son administrateur système l'a désactivé ou parce qu'une erreur JS inattendue s'est produite (par exemple, une erreur du développeur).

Answer 2

Pour faire suite à la réponse de Ron, si vous utilisez JQuery et que vous le placez dans application.js ou dans la section head, vous devez le placer dans une section ready()...

$(document).ready(function() {
  $('#my-link').click(function(event){
    alert('Hooray!');
    event.preventDefault(); // Prevent link from following its href
  });
});

Answer 3

Utilisez simplement

=link_to "link", "javascript:function()"

Answer 4

Une autre solution consiste à capturer l'événement onClick et à agréger les données dans une fonction js.

.hmtl.erb

<%= link_to "Action", 'javascript:;', class: 'my-class', data: { 'array' => %w(foo bar) } %>

.js

// handle my-class click
$('a.my-class').on('click', function () {
  var link = $(this);
  var array = link.data('array');
});