Loading a javascript file when partial is rendered in Rails

Question

I have a partial that displays a modal, and all modal content is dynamically generated when the modal pops up. The click events in the javascript file I have created aren't fired on click, which I assume is because the elements are created dynamically. How can I load the javascript file only once the modal is open? I'm trying to add a loading icon to a button once pressed, which is then switched out once the AJAX response returns, which is executed in create.js. Code:

partial:

#list_item_product_modal.modal._large.fade
    .modal-dialog
        .modal-content
            .modal-body
                .product_picker.product_picker_always_open
                    .row
                        .col-xs-12.col-md-10.col-md-offset-1
                            %h4.text-center.picker_title{ style: 'z-index:99;' }
                                %span
                                    Add a Product
                            .input-group.input-group-lg
                                = text_field_tag :suggestion_search, '', class: 'form-control product_picker_input modal-focus', autocomplete: 'off', placeholder: 'Start typing a product name...'
                                %span.input-group-btn
                                    %button.product_picker_submit.btn.btn-default
                                        %i.fa.fa-search
                        .hidden-xs.hidden-sm.col-md-1.text-right
                            %button.close{ type: :button, 'data-dismiss' => 'modal', 'aria-hidden' => 'true' }
                                &times;

                    -# = form_tag main_app.products_path(), method: :post do
                    = form_tag main_app.list_items_path, data: { passthru: current_user.nil?, remote: true } do |f|
                        = hidden_field_tag :success, 'back'
                        = hidden_field_tag :list_id, args[:list].try(:id) || '0'
                        .product_picker_inner
                            .product_picker_body

                                .product_picker_details
                                    .product_picker_details_default
                                        = hidden_field_tag :product_id, '{raw-product_id}'
                                        = hidden_field_tag :added_from, 'search'
                                        %h4.text-center
                                            {escaped-title}
                                        .text-center.product_picker_category
                                            %span
                                                {escaped-category}
                                        .product_picker_content
                                            .row
                                                .col-xs-12.col-md-6.product_picker_avatar6
                                                    %img.img.img-responsive.center-block{ src: '#{raw-avatar}' }
                                                    -# .rectangle-avatar.contain-image{ style: 'background-image: url("{encoded-avatar}")' }
                                                .col-xs-12.col-md-6.product_picker_description
                                                    {escaped-description}
                                                .col-xs-12.col-md-6
                                                    .text-center{ style: 'margin:1em 2em 0.3em 0' }
                                                        price:
                                                        %b
                                                            {raw-price_formatted}
                                            .row{ style: 'padding: 1em 0 0 0;' }
                                                .col-xs-12
                                                    .fancy-span{ style: 'font-size: 0.8em' }
                                                        %span Tell us about this product
                                                    = text_area_tag :comment, '', class: 'form-control'
                                        .text-center.product_picker_controlls
                                            = button_tag 'ADD', type: 'submit', class: 'btn btn-primary btn-lg t03e', id: 'product-{raw-product_id}'
                                            -# %a.btn.btn-primary.btn-lg.t03e{ href: "#{products_path( list_id: args[:list].try(:id) || '0', success: 'back' )}&u={raw-id}", data: { method: :post } }
                                                ADD
                                .product_picker_loading_overlay
                                    %div{ style: 'position: absolute;top: 50%;left: 0;line-height: 1.1em;right: 0;text-align: center;font-size: 40px;margin: -20px 0 0 0;' }
                                        %i.fa.fa-circle-o-notch.fa-spin
                    .text-center{ style: '' }
                        %a{ href: '#', 'data-dismiss' => 'modal' }
                            CLOSE

JS:

$(document).ready(function(){

    $('.btn.btn-primary.btn-lg.t03e').click(function(){
        $( this ).html('<i class="fa fa-circle-o-notch fa-spin"></i>');
    });

});

leo.fcx · Accepted Answer · 2015-07-21 04:16:45Z

1

As you said, the listeners that you add are for elements that are already present in the document.

And, below code is the way to add listeners also for elements that are going to be created in future (dinamicallly created inside body element):

$(document).ready(function(){

    $('body').on('click', '.btn.btn-primary.btn-lg.t03e', function(){
        $( this ).html('<i class="fa fa-circle-o-notch fa-spin"></i>');
    });

});

answered Jul 21, 2015 at 4:16

leo.fcx

6,4972 gold badges23 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

Loading a javascript file when partial is rendered in Rails

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related