wake-up-neo.net

Rails, die ein Formular über Ajax senden und die Ansicht aktualisieren

Ich möchte ein Formular aktualisieren, das über ajax übermittelt wird, ohne die Seite neu zu laden und die Ansicht entsprechend zu aktualisieren. Ich habe die verschiedenen Methoden ausprobiert und versagt, als ich neu bei Rails bin.

Hier ist die Situation. 

In modal

def new
    @new_entry = current_user.notes.build
    @words = current_user.notes
    @notes_false_list = current_user.notes.where(known: false).order("title").group_by { |note| note.title[0] }
    @notes_true_list = current_user.notes.where(known: true).order("title").group_by { |note| note.title[0] }
  end

In Ansicht den Formularcode.

<%= form_for @new_entry, :html => {:class => 'home-form without-entry clearfix'}  do |f| %>
      <%= f.text_field :title, placeholder: 'Squirrel', autofocus: true, class: 'title-field pull-left' %>
      <%= f.submit '', class: 'btn home-add without-entry' %>
  <% end %>

Die Aktion zum Erstellen

def create
    @new_note = current_user.notes.build(new_note_params)
    if @new_note.save
      @notes_list = current_user.notes.count
      unless @new_note.user.any_entry
        @new_note.user.toggle!(:any_entry) if @notes_list >= 50
        redirect_to root_url
      end
    else
      redirect_to root_url
    end
  end

und zum Schluss möchte ich die Ansicht ändern

<p class="instructions count-instruction text-center">
      <%= @words.count %>
    </p>

Ich habe viel Zeit damit verbracht, dies mit AJAX zu aktualisieren, schlug aber jedes Mal fehl. Irgendwelche um zu helfen? Danke im Voraus.

javascriptjqueryruby-on-railsajaxforms
7
Praveen KJ

ihr Code ist gut, aber für ajax ,

  1. sie müssen dem Formular remote=true hinzufügen. 

    <%= form_for(@image,:html=>{:id=>"your_form_id",:multipart => true,:remote=>true}) do |f |%>

  2. Außerdem müssen Sie auf der Serverseite eine js.erb - Datei in views/users/show_updated_view.js.erb erstellen, um dem Browser als js - Aufruf und NICHT-HTML-Aufruf zu antworten, und müssen daher angezeigt werden der Benutzer, dass nach der Formularübergabe etwas passiert ist (Erfolg/Fehler) (wenn sein users_controller),

in deiner Handlung brauchst du so etwas wie: 

        respond_to do |format|  
            format.js { render 'users/show_updated_view'}
        end

  1. In show_updated_view.js.erb sollten Sie Ihre Ansicht für die Benutzer so aktualisieren, dass Weiß, dass die Ansicht aktualisiert wurde oder das Formular erfolgreich Gesendet wurde, indem Sie entweder das gesamte Formular ausblenden oder das Formular zurücksetzen oder [.____. .] Ersetzen des Formulars durch ein neues div, das besagt, dass die Daten aktualisiert werden ... oder alles, was intuitiv ist. Es gibt jedoch viele Möglichkeiten :).

    // Hier ersetze ich dein gesamtes Formular durch div, das eine Nachricht hat 

    $("#your_form_id").html("<div><p>You have submitted the form successfully.</p></div>");

Der Name der Ansicht kann beliebig sein, aber Sie müssen sowohl auf Erfolg als auch auf Misserfolg achten.

14
Milind

Hier ist ein kurzer Artikel über AJAX mit Rails . Ein paar Dinge zu beachten:

  1. Fügen Sie remote: true in Ihren form_for ein.
  2. Fügen Sie format.js in Ihren Controller ein, damit er create.js.erb rendert.

  3. Führen Sie in create.js.erb etwas (nicht getestet) aus:

    $("p.instructions").innerHTML("<%= @notes_list %>")

1
Yen-Ju

Bei AJAX ist zu beachten, dass Sie die Anfrage nicht umleiten (normalerweise), sondern nur Text generieren, der an den Browser gesendet wird. AJAX ist im Grunde nur Javascript, um Text aus dem Browser abzurufen und etwas damit zu tun. Oft möchten Sie einen Abschnitt der Seite ersetzen, dh ein HTML-Tag und dessen Inhalt durch den zurückgegebenen Text ersetzen. In diesem Fall möchten Sie, dass der Text ein HTML-Code ist. Sie können einen Teil der HTML-Datei in Rails rendern, indem Sie einen Teil davon rendern, sodass Sie dies tun. Außerdem verwenden Sie häufig Javascript, um dem Browser mitzuteilen, was er mit dem Text tun soll, normalerweise um ein Element zu ersetzen, das eine bestimmte ID enthält der Text.

def create
  @new_note = current_user.notes.build(new_note_params)
  if @new_note.save 
    @notes_list = current_user.notes.count
    unless @new_note.user.any_entry
      @new_note.user.toggle!(:any_entry) if @notes_list >= 50
    end
  end
  respond_to do |format|
    format.html { redirect_to root_url }
    format.js #default behaviour is to run app/views/notes/create.js.erb file
  end
end

mit dem respons_to-Block können Sie html- und js-Anforderungen (z. B. ajax) unterschiedlich behandeln.

Die app/views/notes/create.js.erb könnte so etwas haben

page.replace "foo", :partial => "app/views/notes/bar"
0
Max Williams

Fügen Sie reply_to block in Ihre Controller-Aktion "create" und die entsprechenden create.js.erb ein, und fügen Sie Ihre js ein, die nach der create-Aktion ausgeführt werden sollen, und melden Sie alle Fehler, die in Ihrem Controller angezeigt werden Browser-Konsole oder Rails-Serverkonsole. Tun Sie dies, damit wir Sie finden können, wo Sie sich irren

0
sghosh968