Ruby on Rails jQuery button click populate text_field

Question

I have the following form in my edit.html.erb page

<%= form_for(@device) do |f| %>

  <%= render 'shared/error_messages', :object => f.object %>

  <%= f.label :name %>
  <%= f.text_field :name %>

  <%= f.label :description %>
  <%= f.text_area :description, :rows => "5" %>

  <%= f.label :device_identifier %>
  <%= f.text_field :device_identifier, :value => @device.device_identifier, :readonly => true, :class => "d-id", :id => "deviceIDfield" %>


  <%= button_tag "New device identifier", :id => "deviceIDbutton", :class => "btn btn-small btn-inverse", :type => "button" %>

  <%= f.submit "Save changes", :class => "btn btn-large btn-primary", :id => "white" %>
<% end %>

When clicking on the "New device identifier" I want the :device_identifier field to regenerate its value which is currently set through the Ruby method SecureRandom.urlsafe_base64. This simply generates a random base64 encoded string. I have been trying to do this through jQuery however am having trouble as I am new to both Ruby on Rails and JQuery.

I set up a file called shared.js.erb which is located in my javascripts directory. In here I have the following code...

$(document).ready(function(){
 $('#deviceIDbutton').click(function () {
     $("#deviceIDfield").val('<%= SecureRandom.urlsafe_base64 %>');
     });
})

This works the first time I click the button (i.e. it updates the device_identifier field with a new string) however stops working after this. I assume this is because SecureRandom.urlsafe_base64 is being called once (when the document is ready..?) and not each time the button is clicked. Could someone please help me!, I've been banging my head over this for way too long.

I am quite unsure about a few things such as why I don't need to use :remote => true anywhere and if I were to use it where to put it?

Also, I am by no means sure that I have the right idea about where the jQuery should go and although it seems to work in the shared.js.erb file that I created, if some one could recommend a better/more natural way that would be great.

It's also worth mentioning that I have the same button in my new.html.erb file which I want to apply the same functionality.

Thanks a lot!

Ben

Community · Accepted Answer · 2017-05-23 12:29:06Z

0

As you said, the random string is being generated only once, but not when the document is ready. The shared.js.erb is being rendered in the server side when included by your layout. This 'creates' a shared.js file with the content, for eg.:

$(document).ready(function(){
 $('#deviceIDbutton').click(function () {
     $("#deviceIDfield").val('werwe87wer78we7w8erew');
     });
})

The function in the ready() call is being executed when the document is ready and that binds a function to be executed on the click event to the #deviceIDbutton element. So, every time you click your button, the same function in executed, setting the same random code again and again.

You function should be making a remote call to a method in the controller that returns a new secure random code. You can do this using JQuery.get().

If the code is just going to be a randomly generated code, you could generate on the browser with some JavaScript, avoiding the call to the server side.

You can see this other SO answer for examples of calling a controller method.

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Apr 19, 2012 at 13:41

Christian

1,24810 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1344048 Over a year ago

Any chance of some sample code regarding calling a controller method using JQuery.get()? Thanks

Christian Over a year ago

Added reference to other SO thread for this. Let me know if you need further help

user1344048 Over a year ago

I'm still stuck on this issue...this method seems a bit long winded and unnatural. Do I need to add a route to my routes file? Why is something as trivial as populating a text box on click using jQuery so difficult? Something doesn't seem right.

user1344048 Over a year ago

I fixed this with help from miked on this question link Your answer was correct and so I've marked it as so, however if any wants further guidance and sample code see miked's answer. Thanks

Collectives™ on Stack Overflow

Ruby on Rails jQuery button click populate text_field

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related