0

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>
rails_developer
  • 149
  • 1
  • 17

1 Answers1

0

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

Serabe
  • 3,834
  • 19
  • 24
  • Sorry I'm not positive on what you mean, however I assume you're referring to $("input.submit") which actually seems to work fine. My issue is the function below that where $("datepicker").click refuses to execute – rails_developer Nov 07 '12 at 00:33
  • Can you paste the generated html, please? – Serabe Nov 07 '12 at 10:30
  • I updated the question with the generated html, it's interesting however since the html for the partial is never really generated or at least displayed in the source when it's rendered, which I think why .click isn't working but I'm not sure how to fix it. It's either something to do with the render function in rails or ajax I think. – rails_developer Nov 07 '12 at 12:30
  • 1
    If it's not rendered when the page is loaded, then the event will not get the callback. – Serabe Nov 07 '12 at 12:31
  • how would I fix it so it renders correctly? As I am able to see the partial as well as press the submit button/interact with the partial and have it work fine, minus the fact that it doesn't actually exist in the source code. – rails_developer Nov 07 '12 at 12:50
  • Can you update the question with how your form works? Right now I'm assuming the partial is rendered when the form is submitted, but I'm not sure about this. – Serabe Nov 07 '12 at 12:55
  • when a user selects a radio button the partial is rendered within the update-container div. From there you can enter information inside the partial and press the submit button inside to submit the data. – rails_developer Nov 07 '12 at 13:14
  • thanks, the fix works great. Takes a little bit to load before it appears unfortunately but that's probably another issue. Thanks – rails_developer Nov 07 '12 at 13:30