Implementing AJAX into a rails form.

Question

I have a from in which a user can send out a message via SMS. The form functions with the capability of scheduling out a message. Right now I have a static button that says "send message" and it works but when a user schedules a message I'd like the button to switch the inside text to read "schedule message" by an onlcick type action. I think this should be an esay thing to implement using ajax but I've never used it before in a rails app. I'll show a screen shot and some code, hopefully this will be enough info. let me know if you need anymore provided code than I initially show.

Here is my form screenshot, so when a user clicks on the calender glyphicon it will initiate the ajax and switch the "Send Message" button to say "Schedule Message"

Here is the code for my form

<div class="container text-center">
 <div class="row">
  <div class="col-lg-8 col-lg-offset-2 well">
     <%= form_for @message do |form| %>
       <div class="form-group">
         <%= form.label :body, "Enter a Message:", class: "message_label"%>
         <%= form.text_field :body, class: "form-control", placeholder: "New things are happening!" %>
       </div>
       <%= form.submit "Send Message", class: "btn btn-primary" %>
       <h3>Groups:</h3>
       <div class="radio">
         <div class="row col-span10">
           <% Group.all.each do |group| %>
             <div class="col-md-3">
               <label>
                 <input id="message_group_<%= group.id %>" name="message[group_ids][]" value="<%= group.id %>" type="checkbox">
                 <%= group.name %>
               </label>
            </div>
          <% end %>
        </div>
      </div>
      <h3>Scheduled Text Message:</h3>
      <div class="row">
        <div class='col-sm-4 col-sm-offset-4'>
          <div class="form-group">
            <div class='input-group date' id='datetimepicker'>
              <%= form.text_field :send_at, class: "form-control" %>
              <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
        </div>
      </div>
    <% end %>
  </div>

If I understand your question correctly, you don't need an ajax call for simply changing the button text. Have a look at [this post](http://stackoverflow.com/a/5580652/2968762) if it helps. — Abhi, Apr 13 '16 at 20:24

score 0 · Accepted Answer · answered Apr 13 '16 at 20:27

0

I suggest you to read Working with javascript in Rails, there it explain several things about javascript and AJAX.

Basically, you need to tag your form as remote and hook with javascript to AJAX events (success, complete, error, etc) to perform any animation/transition you want.

answered Apr 13 '16 at 20:27

Axxiss

4,759
4
26
45

Thanks! anyway you could code an example for my situation I'm having trouble understanding some of the tuts. – Bitwise Apr 13 '16 at 20:29

Implementing AJAX into a rails form.

1 Answers1