link_to Methode und klicken Sie auf Ereignis in Rails

72

Wie erstelle ich einen Link dieses Typs:

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

Methode link_toin Rails verwenden?

Ich konnte es nicht aus Rails-Dokumenten herausfinden .

Yud
quelle
1
Wenn Sie der Kürze halber nicht das '#' verlassen haben, scheint es nicht sinnvoll zu sein, link_to zu verwenden. Verwenden Sie wie oben beschrieben einfach ein Tag mit dem Onclick-Set.
Brian

Antworten:

191

Sie können verwenden link_to_function(in Rails 4.1 entfernt):

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

Oder wenn Sie unbedingt verwenden müssen link_to:

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

Das Einfügen von JavaScript in Ihr generiertes HTML ist jedoch aufdringlich und eine schlechte Praxis .

Stattdessen sollte Ihr Rails-Code einfach so aussehen:

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

Angenommen, Sie verwenden das Prototype JS-Framework , so lautet JS in Ihrem application.js:

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

Oder wenn Sie jQuery verwenden :

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

Mit dieser dritten Technik stellen Sie sicher, dass der Link zu einer anderen Seite führt - und nicht nur stillschweigend fehlschlägt -, wenn JavaScript für den Benutzer nicht verfügbar ist. Denken Sie daran, dass JS möglicherweise nicht verfügbar ist, weil der Benutzer eine schlechte Internetverbindung hat (z. B. mobiles Gerät, öffentliches WLAN), der Benutzer oder der Systemadministrator des Benutzers diese deaktiviert hat oder ein unerwarteter JS-Fehler aufgetreten ist (z. B. Entwicklerfehler).

Ron DeVera
quelle
link_to_function wurde nicht entfernt, sondern in Rails 3 eingeführt. Ich denke, Sie meinten link_to_remote.
Dimir
link_to_functiongibt es seit Rails 1.0, aber Sie haben Recht, dass es nicht entfernt wurde; es war veraltet (und dann nicht mehr veraltet und dann noch ein paar Mal umgedreht). Ich werde meine Antwort aktualisieren. Vielen Dank!
Ron DeVera
Wenn ich eine Liste von Aktien habe und etwas Ähnliches tun wollte. Wie bekomme ich das Aktiensymbol in die Klickfunktion?
Xavier John
25

Um Rons Antwort zu verfolgen, wenn Sie JQuery verwenden und es in application.js oder im Kopfabschnitt einfügen, müssen Sie es in einen ready () - Abschnitt einschließen ...

$(document).ready(function() {
  $('#my-link').click(function(event){
    alert('Hooray!');
    event.preventDefault(); // Prevent link from following its href
  });
});
Jim Morris
quelle
3
Beachten Sie, dass dies verkürzt werden kann $(function() { ... });, was$(document).ready(function() { ... });
Verwirrung
Übrigens empfiehlt jquery 3.0 , $(function() { // Handler for .ready() called. });anstelle von $ (document) .ready ()
alexventuraio
2
Für Schienen 5 mit Turbolinks verwenden Sie: $ (document) .on ('turbolinks: load', function () {
Brad
8

benutz einfach

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

Eine andere Lösung ist das Abfangen eines onClick-Ereignisses

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