Как показать twitter bootstrap modal через запрос JS в рельсах?

Я хочу показать твитер bootstrap modal как ответ на запрос JS. Моя функция show.js.erb выглядит примерно так:

$(document).ready(function() {

    $('#dialog').modal('show')

});

Здесь "диалог" - это модальный идентификатор. Сам модальный код выглядит примерно так:

<div id="dialog" class="modal hide fade">
    <div class="modal-header">
          <a href="#" class="close">&times;</a>
          <h3> Showing Modal </h3>
    </div>
    <div class="modal-body">
        I need to show up!
    </div>
    <div class="modal-footer">
        <a href="#" class="btn primary">Done</a>
    </div>
</div>

Одна вещь, о которой я уверен, заключается в том, что вызывается javascript. Я могу изменить его на странице. Другое дело, что модально работает нормально. Это очень хорошо, когда я использую кнопку HTML, чтобы вызвать запрос следующим образом:

<button data-controls-modal="dialog" data-backdrop="true" data-keyboard="true" class="btn danger"> Show </button>

Любая идея, почему модальность не появляется в запросе JS?

Спасибо!

Ответы

Ответ 1

У меня была аналогичная проблема, которую я решил с небольшим завихрением

Мой модальный div отображается на вызывающей странице (из частичного), а не ответом запроса JS:

<div class="modal hide fade" id="modal-window">
  <div class="modal-header">
    <a href="#" class="close">×</a>
    <h3>Loading...</h3>
  </div>
  <div class="modal-body center">
      <%= image_tag "loading.gif" %>
  </div>
  <div class="modal-footer">&nbsp;</div>
</div>

Я использую эту ссылку, чтобы полагаться на рельсы и Twitter ненавязчивый JS:

<%= link_to negotiation.name, negotiation_path(negotiation), {:remote => true, 'data-controls-modal' =>  "modal-window", 'data-backdrop' => true, 'data-keyboard' => true} %>

и мой show.js.erb выглядит так (сокращенно)

$('.modal-body').html('<%= escape_javascript(render :partial => 'negotiationdetail', :object => @negotiation) %>');
$('.modal-header').remove(); // don't need a header here

Это прекрасно работает и имеет преимущество показывать пользователю анимацию "загрузки" во время заполнения модала.

Ответ 2

Этот код выглядит так, как будто он должен работать (я делаю что-то подобное, когда я показываю модальный документ наготове).

Убедитесь, что загрузите bootstrap-modal.js и убедитесь, что он загружается до загрузки пользовательских JS. Если ваш пользовательский JS загружается первым, вы увидите это поведение.

Ответ 3

У меня одна и та же проблема, и она была решена как

  • загрузите файлы jquery (например jquery_171_min.js)
  • а затем загрузите меньше js и css и
  • загрузите bootstrap-modal.js

попробуйте с этой последовательностью. Надеюсь, что это сработает.

Ответ 4

Этот пример работает очень хорошо.

<body>
    <div id="top"> 
       <a tabindex="-1" href="metadata.html" id="metadata-link" data-target="#modal" data-toggle="modal">Metadata</a>
    </div>

    <div id="modal" class="modal hide fade in" style="display:none;">
      <div class="modal-header">header<a class="close" data-dismiss="modal">x</a></div>
      <div class="modal-body"></div>
      <div class="model-footer">footer</div>
    </div>

 <script>

  $(document).ready(function() {
     $('#top').find('a').trigger('click');

    });
 </script>
</body>

С уважением.

Ответ 5

У меня была эта проблема,

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

Итак, скажем, что кнопка триггера находится на моей странице просмотра индекса, и я создаю модальный файл _form.html.erb; И я хочу создать новую запись с индексной страницы, используя этот модальный.

Решение:

  • создать внешний div, который имеет "id" в том же файле, что и триггер

index.html.erb - кнопка триггера

<h3>
  <%= link_to 'Add Category',
    new_todo_path,
    remote: true,
    class: "btn btn-lg btn-success",
    data: {toggle: "modal", target: "#modal_form_category"} 
  %>
</h3>

index.html.erb - внешний вид модального

<div id="modal_form_category" class="modal fade" role="dialog">
</div>

new.js.erb

$(document).ready(function() {
  $("#modal_form_category").html("<%= j render "form" %>");
});

P.S: pardon the new.js.erb У меня нет абсолютной причины, охватывающей код, пока страница не будет готова. Думаю, он будет работать даже без готовой функции; если вы знаете, это необходимо или нет, пожалуйста, скажите мне.

Ответ 6

Я не знаю о jQuery "модальной" функции. Похоже, вы пытаетесь открыть диалоговое окно элемента #. Вы можете просто сделать:

$("#dialog").show();

Или я полностью упускаю вопрос?