Datepicker не работает с bootstrap-modal

Я пытаюсь реализовать модальный бутстрап в проекте рельсов. Он отлично работает, за исключением того, что мой указатель даты не работает внутри модального окна. В моем индексном файле у меня есть следующее

<%= link_to "search_products", search_products_path, remote: true,  "data-toggle" => "modal", 
     'data-target' => '#search-products' %>

<div class="modal fade" id="search-products" tabindex="-1"  
    role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content"></div>
  </div>
</div>

Затем в app/views/products/search_products.js.erb у меня есть

 $("#search-products").html("<%= escape_javascript(render 'products/search_product') 
  %>")

И внутри партиала search_product,

  <%= text_field_tag :date_purchased, type: "text", placeholder: t('click_here'), 
     class: "form-control date_picker" %>

Я использую rails4 Средство выбора даты не из начальной загрузки и отлично работает на немодальных страницах моего приложения. Я был бы признателен, если бы кто-нибудь мог сказать мне, что я делаю неправильно.

Спасибо


ruby-on-rails bootstrap-modal
person Tiamon    schedule 16.10.2014    source источник
comment
Мой вопрос не ясен или недостаточно интересен, чтобы заслуживать ответа? :-)   -  person Tiamon    schedule 16.10.2014

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте использовать это, я широко использую это в своем проекте.

$('body').on('shown.bs.modal', '.modal', function () {

        //Or perhaps any other initializer.
        $('[databehaviour~=datepicker]').datepicker({
            minViewMode: "months",
            format: "MM-yyyy",
            startDate: "today"
        });
}
person Ronak Jain    schedule 16.10.2014
comment
Спасибо. Это тоже не сработало. Даже размещение кода javascript внутри обработанного фрагмента не работает. - person Tiamon; 16.10.2014
comment
Очистите кэш браузера и повторите попытку. - person ; 16.10.2014
comment
Я попробовал это с Firefox и, по-видимому, вижу, что он скрыт за модальным окном. Какая трагедия! :-) - person Tiamon; 16.10.2014

arrow_upward
3
arrow_downward

В вашем app/views/products/search_products.js.erb вы также должны явно инициализировать средство выбора даты, когда вы динамически добавляете HTML в DOM. Таким образом, файл должен выглядеть примерно так (в зависимости от того, какой инструмент выбора даты вы используете):

$("#search-products").html("<%= escape_javascript(render 'products/search_product') %>");
$(".date_picker").datepicker();
person mccannf    schedule 16.10.2014
comment
Спасибо за ответ. Но, к сожалению, то, что я получаю в поле ввода, даже после реализации вашего предложения, это {:type=›text, :placeholder=›cick_here, :class=›form-control date_picker} - person Tiamon; 16.10.2014
comment
Можете ли вы показать, как выглядит фактически отображаемый HTML внутри модального окна? - person mccannf; 16.10.2014
comment
Как я сказал ниже в другом комментарии, когда я переключился с Chrome на Firefox, я вижу, что всплывающее окно скрыто за модальным окном. Я читаю об увеличении z-индекса из других тем. Спасибо - person Tiamon; 16.10.2014