Schienen form_tag remote-Beispiel

Habe ich diese unglaublich einfache form:

<%= form_tag("/portal/search", method: 'get', remote: true ) do %>

  <%= label_tag(:query, 'Search for:') %>
  <%= text_field_tag(:query) %>
  <%= submit_tag("Find") %>

<% end %>
<div id="results"></div>

Ich weiß aus den Unterlagen, die ich verwenden kann AJAX durch die remote-option:

<%= form_tag("/portal/search", method: 'get', remote: true ) do %>

Dann ich stecken. Ich weiß, wie zu generieren, Ergebnisse in einem view/partial, aber wie Schaffe ich es, dass teilweise innerhalb des div-Elements? Ich weiß, ein bisschen JQuery, so kann ich wählen Sie das element aus. Ich fand eine Menge von Ergebnissen, aber Sie scheinen zu übersehen, dass Erleuchtung für mich. Ich bin mit Schienen 4.1.6

Meine Ergebnisse sind nur einfache Aufzeichnungen aus einem Modell, wie das Buch (Titel, Autor)

Danke für die Hilfe!

BEARBEITEN

Habe ich den Pokal gewonnen für die fehlt der Punkt, durch eine lange erschossen. Ich hatte, um die Suche.js.erb innerhalb der Ansicht Ordner anstelle von Vermögenswerten.

InformationsquelleAutor MiningSam | 2014-09-22

  1. 7

    Angenommen, Sie bekommen @results aus Ihrem such-Methode.

    In der Steuerung, Suche Methode:

    respond_to do |format|
  format.html {render or redirect_to wherever you need it}
  format.js 
end

    Dann alles, was Sie brauchen ist eine Datei namens search.js.erb zum ausführen der erforderlichen js am Ende Ihrer Anfrage. Es könnte so Aussehen:

    $('#results_div').html("<%= j @results.pluck(:title).join('<br/>') %>")
    okay - ich glaube, ich habe zu ändern, um etwas coffeescript wie?
    Wenn Sie mit coffeescript ja, kann dir nicht helfen, weil ich persönlich es nicht verwenden. In den oben genannten bin ich davon ausgegangen, Sie wurden mithilfe von jQuery-durch die Art und Weise, es würde etwas anders Aussehen, die in reinem javascript.
    muss ich hinzufügen @Ergebnisse nach dem Rendern Anweisung (format.js) habe ich noch nicht bekommen, Ergebnisse...
    Es scheint, das JS kann nicht seine Arbeit wegen einer Null-Klasse. Irgendwo das @ - Ergebnisse müssen auf ihn übergegangen ist, denke ich mal :S
    dies war die Antwort auf alle zusammen. Ich verpasste aus, um die Datei Namen in der ANSICHT Ordner.... 🙂

    InformationsquelleAutor NicoFerna

  2. 3

    Wenn Sie add remote: true jquery-ujs werden Ihnen die ajax-Anfrage (standardmäßig die javascript-lib ist erforderlich app/assets/javascripts/application.js).

    Des ajax-Aufrufs fordern einen 'text/javascript' Antwort. aus diesem Grund Sie Ihre server code sollte Antworten mit:

    # action
def search_query
  respond_to do |format|
    format.js { 
      # additional code
    }
  end
end

    Wenn aus Ihrer Sicht (search_query.js.erb) Sie javascript, wird Sie ausgeführt. Das ist, warum jeder antwortet Sie mit einem $('#my_div_id').html('my html text') Vorschlag, die, wenn Sie ausgeführt wird, ersetzen Sie Ihre div-Inhalt mit dem neuen HTML.

    Wenn Sie aus irgendeinem Grund zurückgeben möchten eine json-Datenstruktur, dann sollten Sie eine andere Daten-Typ:

    form_tag("/jquery_ujs/search_query", remote: true, 'data-type' => :json) do
  # ....
end

    Und Sie sollten Antwort mit:

    # action
def search_query
  respond_to do |format|
    format.json { render json:  @my_object }
  end
end

    Und Griff den Erfolg der Veranstaltung:

    <script>
  $(document).ready(function(){
    $("form#my_form").on('ajax:success', function(event, data, status, xhr) {
      console.log("Great!");

      //use data to access to your json data structure
    });

    $("form#my_form").on('ajax:error', function(event, xhr, status, error) {
      console.log("sorry mate!");
    });

    //....
  })
</script>

    Können Sie auch verlangen, eine html-Antwort (für den Fall, Sie möchten eine Tabelle zurückgeben, zum Beispiel), mit :'data-type' => :html und format.html { render layout: false }

    Danke für deine Ergänzungen!
    es ist vielleicht eine seltsame Frage, aber die Suche.js.erb gehört in den Ordner "assets" Recht?
    Ich werde einfach der idiot cup. In den Ansichten. Doh!
    Du hast Recht, Sie gehören zu der Ansicht. Rails Kennt, die anrufen basierend auf der server-Anfrage und Ihre Antwort-format. Sie sind nicht ein idiot ... nehmen Sie sich Zeit, denn es wird immer schwer :D.

    InformationsquelleAutor Paulo Abreu

  3. 1

    Ajax

    Erstens, die Schienen UJS (unobtrusive javascript) - Treiber ermöglicht nur eine "Konserve" Weg zu schicken Sie eine ajax-Anfrage an Ihren browser. Um Verwirrung zu vermeiden, ist es am besten zu schätzen wissen, werden Sie das senden von Ajax-Anfragen, unabhängig davon, ob Sie Rails UJS oder die standard-Ajax-Methode

    Dies bedeutet, dass der Prozess der Erfassung des response von Ajax ist immer noch die gleiche - Sie brauchen, um sicherzustellen, dass Sie haben zu fangen die Reaktion des Systems

    Entweder :-

    #app/assets/javascripts/application.js
$(document).on("ajax:success", ".element", function(status, data, xhr) {
   //do something here
});

    oder

    #app/controllers/portal_controller.rb
class PortalController < ApplicationController 
  def search
     respond_to do |format|
        format.js #-> app/views/portal/search.js.erb
        format.html
     end
  end
end

#app/views/portal/search.js.erb
//something here

    Fix

    wie Schaffe ich es, dass teilweise innerhalb des div-Elements

    Du wirst in der Lage sein zu verwenden, JS:

    #app/controllers/portal_controller.rb
class PortalController < ApplicationController
   def search
      @results = ...
      respond_to do |format|
         format.js
         format.html
      end
   end
end

#app/views/portal/search.js.erb
$(".div").html("<%=j render @results %>");
    ein problem - das Rendern ist nicht verfügbar in Vermögen... 🙁
    Ja, aber Sie ist verfügbar in den Ansichten 😉

    InformationsquelleAutor Richard Peck

Schreibe einen Kommentar