web-dev-qa-db-fra.com

méthode link_to et événement de clic dans Rails

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 ne pouvais pas le comprendre à partir de documentation Rails .

ruby-on-railsruby
71
Yud

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 devez absolument utiliser link_to :

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

Cependant, placer JavaScript dans le code HTML généré est envahissant et constitue une mauvaise pratique .

Au lieu de cela, votre code Rails devrait simplement ressembler à ceci:

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

Et en supposant que vous utilisiez le framework 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 suivra jusqu'à une autre page, et pas seulement s'il échouera silencieusement, si JavaScript n'est pas disponible pour l'utilisateur. Rappelez-vous que JS peut ne pas être disponible parce que l'utilisateur dispose d'une mauvaise connexion Internet (par exemple, un appareil mobile, un accès wifi public), que son utilisateur ou son administrateur système l'a désactivé ou qu'une erreur JS inattendue s'est produite (c'est-à-dire une erreur du développeur).

186
Ron DeVera

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

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

juste utiliser

=link_to "link", "javascript:function()"
8
Alan Wang

une autre solution attrape l'événement onClick et pour les données agrégées à la fonction js, vous pouvez

.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');
});
1
Joaquin Diaz