Wysyłka formularza bez przeładowania strony

Zielona szkoła
1

Witam
Czy moglibyście pomoc mi zrobić formularz kontaktowy bez przeładowywania strony?

index.html.erb

<%= simple_form_for @contact, :html => {:class => 'form-horizontal', :remote => true } do |f| %>
                           <div class="form-group">
                           <!--<label for="exampleInputName2">Imię</label>
                           <input type="text" class="form-control" id="exampleInputName2" placeholder="Jan Kowalski">-->
													 <%= f.input :name, :required => true, placeholder: 'Jan Kowalski',label: "Imię",input_html: { class: 'form-control' }%>
                           </div>
                           <div class="form-group">
                           <!--<label for="exampleInputEmail2">Email</label>
                           <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jan.kowalski@przyklad.pl">-->
													 <%= f.input :email, :required => true, placeholder: 'jan.kowalski@przyklad.pl',label: "Email",input_html: { class: 'form-control' }%>
                           </div>
                           <div class="form-group ">
                           <!--<label for="exampleInputText">Twoja wiadomość</label>
                           <textarea  class="form-control" placeholder="Opis"></textarea>-->
													 <%= f.input :message, :as => :text, :required => true, placeholder: 'Opis',label: "Twoja wiadomość",input_html: { class: 'form-control' }%>
                           </div>
                           <!--<button type="submit" class="btn btn-default">Wyślij wiadomość</button>-->
													 <%= f.button :submit, 'Wyślij wiadomość', :class=> "btn btn-default" %>
                       <% end %>

publiccontroller

layout 'public'
def index
    @contact = Contact.new
  end

contact model

class Contact < MailForm::Base
  attribute :name,      :validate => true, :class => "form-control"
  attribute :email,     :validate => /\A([\w\.%\+\-]+)@([\w\-]+\.)+([\w]{2,})\z/i
  attribute :message
  attribute :nickname,  :captcha  => true

  # Declare the e-mail headers. It accepts anything the mail method
  # in ActionMailer accepts.
  def headers
    {
      :subject => "My Contact Form",
      :to => "kafar610@gmail.com",
      :from => %("#{name}" <#{email}>)
    }
  end
end
2

Formularz wyglada ok. Po submicie powinna sie wywolac akcja :create w kontrolerze - zobacz w logach jaki kontroler jest wywolywany, jesli chcesz zmienic ktory kontroler jest uzywany to powinienes ustawic :url w formularzu (np. simple_form_for @contact, url: my_controller_path, …).

I wtedy powinienes dodac akcje:

def create
  @contact_form = ContactForm.new(params[:contact_form])
  @contact_form.deliver
  respond_to :js
end

I w create.js.coffee:

alert 'sent'

1 Like
3

Zrobiłem tak jak mówiłeś
_new.html.erb

<%= simple_form_for :contact, url: contacts_path, :html => {:class => 'form-horizontal', :remote => true } do |f| %>
    <div class="form-group">
    <%= f.input :name, :required => true, placeholder: 'Jan Kowalski',label: "Imię",input_html: { class: 'form-control' }%>
    </div>
    <div class="form-group">
    <%= f.input :email, :required => true, placeholder: 'jan.kowalski@przyklad.pl',label: "Email",input_html: { class: 'form-control' }%>
    </div>
    <div class="form-group ">
    <%= f.input :message, :as => :text, :required => true, placeholder: 'Opis',label: "Twoja wiadomość",input_html: { class: 'form-control' }%>
    </div>
    <%= f.button :submit, 'Wyślij wiadomość', :class=> "btn btn-default" %>
<% end %>

ContactsController

class ContactsController < ApplicationController
skip_before_action :verify_authenticity_token

  def new
    @contact = Contact.new
  end

  def create
    @contact = Contact.new(params[:contact])
    @contact.deliver
    respond_to :js
  end
  
end

no i skrypt “create.js.coffe” wrzucilem do views/contacts, w logach pokazuje ze się wysłało ale nie wyskakuje żadna informacja o tym a email tak naprawdę nie dochodzi :rage:
“ActionView::Template::Error (TypeError: Obiekt nie obsługuje tej właściwości lub metody.):
1: alert ‘sent’
app/views/contacts/create.js.coffee:1:in _app_views_contacts_create_js_coffee__78947886_68971380' app/controllers/contacts_controller.rb:11:increate’”

4

Dobra coś pokombinowałem i już wyskakuje powiadomienie o wysłaniu wiadomości, tylko trochę nie o to mi chodziło, chciałbym aby informacja o wysłaniu wiadomości wyskakiwała nad formularzem lub aby formularz się schował i w tym miejscu wyskakiwało powiadomienie, emaile dalej nie dochodzą.

5

Ustawiles wysylanie maili w development.rb? Najlepiej zainstaluj gem mailcatcher i zrob jak tutaj. Jesli chodzi o chowanie formularza, musisz pokombinowac w create.js.coffee, np.

//jesli masz jQuery
$('#id_formularza').replaceWith('<p>sent</p>')
1 Like