Search code examples
javascriptjqueryruby-on-rails-3partialrenderpartial

Using javascript .click inside a partial rails

I have a javascript click function that is called every time my textbox gets clicked on, however for some reason it only works if the textbox is inside the main page, when I move the textbox into the partial I render nothing happens when I click on it. Does anyone know how to make a click event work inside a partial?

My users.js.coffee file

$ ->
  $("form[data-update-target]").live "ajax:success", (evt, data) ->
    target = $(this).data("update-target")
  $("#" + target).html data

  $("input.submit").click ->
    $(this).parent().submit()
    true

  $("#datepicker").click ->
    alert "hello world"

The new page for users

<%= form_tag({:controller => 'users', :action => 'preview'}, :remote => true, :'data-update-target' => 'update-container') do %>
  <%= radio_button_tag(:page_type, 'event', false, :class => 'submit') %>
  <%= label_tag(:page_type, "Event") %>
  <br/>
<% end %>
<div id="update-container">
</div>

The users controller

def preview
  if params[:page_type] == "event"
    @event = Event.new
    render :partial => 'event', :object => @event
  end
end

The events partial called _event.html.erb

<%= form_for(@event) do |f| %>
  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :description %>
    <%= f.text_area :description %>
  </div>
  <div class="field">
    <%= f.label :start %>
    <input id="datepicker" type="text" value="" name="event_start">
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

generated html

<body>
<p id="notice"></p>
<p id="alert"></p>
  <h1>New page</h1>

<form accept-charset="UTF-8" action="/users/preview" data-remote="true" data-update-target="update-container" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="iIodOQohxJgk1P5ZmFrbgw4W/h4cq45LBxGN3xjyREk=" /></div>

<input class="submit" id="page_type_event" name="page_type" type="radio" value="event" />
<label for="page_type">Event</label>
<br/>
</form><div id="update-container">
</div>
<input id="datepicker" type="text" value="" name="event_start">

<a href="/users">Back</a>
</body>
Solution

  • Quick answer: there is no input with submit class. You either want to add the submit class to the proper input element or change the selector to something like $('input[type=submit]')

    On the other hand, if I use a class only for js behaviour, I usually prepend js- to the name, so the designer knows that he should not remove it (or use it for styling).

    But, if the problem is because the datepicker is not rendered when the page is loaded (added later with javascript, for example), you need to declare the callback differently.

    Choose a datepicker's parent that is present since the first time the page is rendered (in case there is none, you can use document). In this case, the parent is div#update-container:

    $("#update_-container").on 'click', '#datepicker', (evt) ->
    # code here....

    For more info, look at the official jQuery docs