CODEWITHSUNDEEP
javascriptjqueryruby-on-railsajax
MikaAK
MikaAK

Reputation: 2364

Rails 4 ajax proccessing as html

I'm trying to get ajax working for my contact form and currently I'm trying to test to make sure the ajax is getting called.

In my console I can see that it's still getting processed as HTML and I cant figure out why.

#app/views/contact_mailer/_contact_me.html.haml
= form_for @message, url: contact_path, authenticity_token: true, remote: true do |f|
  = render 'layouts/error_messages', object: f.object
  = render 'layouts/flash'
  = f.label :name
  = f.text_field :name, :placeholder => 'Enter your your name...'

  = f.label :email
  = f.text_field :email, :placeholder => 'Enter your email address...'

  = f.label :subject
  = f.text_field :subject ,:placeholder => 'Enter your subject...'

  = f.label :body
  = f.text_area :body, :placeholder => 'Enter your message...', :size => '25x15'

  = f.button 'Send', :id => 'send-button', :class => 'darkgreen-button'

Somewhere In my messagesController I also need to fit a call to ContactMailer.contact_me(@message) but I'm not quite sure where I would add that.

class MessagesController < ApplicationController
  def contact
    @message = Message.new(params[:message])
    respond_to do |format|
      if @message.valid?
        format.html { redirect_to contact_path, notice: 'Message was sent successfully.' }
        format.js {  }                                                                                                                                                                                                                                                                                                                                                                      
      else
        format.html { render file: 'pages/contact' }
        format.js { }
      end
    end
  end
end

Finally I try to respond with a console log but it never shows up

#app/views/messsages/contact.js.haml
console.log("AJAX Called!")

*EDIT Application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//
//= require analytics.js.coffee
//= require turbolinks
//= require bootstrap.min
//= require_tree ./global

Upvotes: 1

Views: 85

Answers (2)

Richard Peck
Richard Peck

Reputation: 76774

Why not try this:

class MessagesController < ApplicationController
  def contact
    @message = Message.new(message_params)
    respond_to do |format|
      if @message.save
        format.html { redirect_to contact_path, notice: 'Message was sent successfully.' }
        format.js                                                                                                                                                                                                                                                                                                                                                                      
      else
        format.html { render file: 'pages/contact' }
        format.js
      end
    end
  end

  private

  def message_params
      params.require(:message).permit(:message, :params)
  end
end

To help you debug, you've got to look at how this works. When you send a remote: true request, it will be sent as a js request - that's standard.

Open your console & show us the request. It should say:

enter image description here

If it's not JS, your problem is you're not passing a valid AJAX request

Use alert when testing JS response

Console never seems to work with Rails, a far more robust approach is to use alert:

#app/views/messsages/contact.js
alert("Ajax Called");

Upvotes: 0

Dave Satch
Dave Satch

Reputation: 1171

Remove the { } from the end of format.js.

Because you are providing a block you are asking the controller to override the default file i.e. app/views/messages/contact.js.haml. By having the {} you are telling the controller to render what is in your block instead of rendering that file.

Update: issue resolved by including the two JQuery libraries if you are trying to use JQuery:

//= require jquery //= require jquery_ujs

Upvotes: 2

Related Questions