Calling javascript function from button_tag?

Question

I have next file with jquery function:

assets/ javascripts/poll_items.js

$(document).ready(function(){
    $('.up_id').on('click', function() {
    $(this).closest('.poll_row').insertAfter($(this).closest('.poll_row').next());
  });
  $('.down_id').on('click', function() {
    $(this).closest('.poll_row').insertBefore($(this).closest('.poll_row').prev());
  });
});

when i click `= button_tag 'up', type: 'button', value: 'up', input_html: {class: 'up_id'}' nothing happens. How me correct call code from file javascript?

full code:

polls/new.html.haml

%h1= title "Новый опрос"
= simple_form_for @poll do |f|
  = f.error_messages header_message: nil
  = f.input :question, disabled: [email protected]?(current_user), input_html: { class: 'input-block-level' }
  = f.input :results_hidden, as: :boolean, inline_label: 'Скрыть результаты до окончания опроса', label: false
  = f.input :from_date, as: :datetime, input_html: { class: 'poll_date' }
  = f.input :to_date, as: :datetime, input_html: { class: 'poll_date' }
  %h3#poll-items Варианты ответа (не больше пяти)
  .item_index  
    = f.simple_fields_for :poll_items do |poll|
      = render 'poll_item_fields', f: poll
    = link_to_add_association 'Добавить еще вариант', f, :poll_items
    .form-actions
      = f.button :submit, 'Опубликовать опрос', class: 'btn-bg'
      %p 
        Вернуться к посту:
        = link_to @owner

poll_fields.html.haml

%h3#poll-items Варианты ответа (не больше пяти)
.item_index  
  = f.fields_for :poll_items do |poll|
    = render "poll_item_fields", f: poll
  .links
    = link_to_add_association 'Добавить еще вариант', f, :poll_items, render_options: {class: 'links'}

poll_item_fields.html.haml

.poll_row
  .poll_item
    = f.input :answer, input_html: { class: 'ctrlenter expanding' }, label: false, placeholder: 'Введите вариант ответа'
    = button_tag 'up', type: 'button', class: 'up_id', value: 'up'
    = button_tag 'down', type: 'button', class: 'down_id', value: 'down'
    = link_to_remove_association "удалить", f, { wrapper_class: 'poll_item' }

vijayP · Accepted Answer · 2016-03-02 12:51:10Z

1

I am suspecting that the DOM is getting build dynamically so try changing your JS code as follows:

$(document).ready(function(){
  $(document).on('click', '.up_id', function() {
    $(this).closest('.poll_row').insertAfter($(this).closest('.poll_row').next());
  });
  $(document).on('click','.down_id', function() {
    $(this).closest('.poll_row').insertBefore($(this).closest('.poll_row').prev());
  });
});

Here we are using event delegation technique to propagate the click event to required DOM element which may be present in DOM.

answered Mar 2, 2016 at 12:51

vijayP

11.5k5 gold badges28 silver badges42 bronze badges

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

4 Comments

vijayP Over a year ago

could you please add an alert("Hello"); inside the click handler and see if its getting called or not.

vijayP Over a year ago

how you have added a poll_items.js onto your html page? I doubt that its not at all getting included in your page OR please check the browser console and see if you are getting js errors there.

Stefan Hansch Over a year ago

I checked in console. nothing. i added in folder assets/javascripts/. In HTML template added: = javascript_include_tag :defaults, = javascript_include_tag :cocoon

Stefan Hansch Over a year ago

i know why. i added now in applicatiom.js.coffee #=require poll_items.js. and now work alert("Hello")

Stefan Hansch · Accepted Answer · 2016-03-02 13:59:31Z

0

SOLUTION:

I added in application.js.coffee #=require poll_items.js and everything works

answered Mar 2, 2016 at 13:59

Stefan Hansch

1,5914 gold badges24 silver badges59 bronze badges

Collectives™ on Stack Overflow

Calling javascript function from button_tag?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related