i have partial displays modal, , modal content dynamically generated when modal pops up. click events in javascript file have created aren't fired on click, assume because elements created dynamically. how can load javascript file once modal open? i'm trying add loading icon button once pressed, switched out once ajax response returns, 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 product .input-group.input-group-lg = text_field_tag :suggestion_search, '', class: 'form-control product_picker_input modal-focus', autocomplete: 'off', placeholder: 'start typing 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' } × -# = form_tag main_app.products_path(), method: :post = form_tag main_app.list_items_path, data: { passthru: current_user.nil?, remote: true } |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 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(){ $( ).html('<i class="fa fa-circle-o-notch fa-spin"></i>'); }); });
as said, listeners add elements present in document.
and, below code way add listeners elements going created in future (dinamicallly created inside body element):
$(document).ready(function(){ $('body').on('click', '.btn.btn-primary.btn-lg.t03e', function(){ $( ).html('<i class="fa fa-circle-o-notch fa-spin"></i>'); }); }); 
Comments
Post a Comment