Как показать твиттер загрузочный модал через JS запрос в рельсах? - PullRequest
Новая
       3

Как показать твиттер загрузочный модал через JS запрос в рельсах?

31 голосов
/ 16 декабря 2011

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

$(document).ready(function() {

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

});

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

<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?

Спасибо!

Ответы [ 7 ]

38 голосов
/ 23 декабря 2011

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

Мой модальный 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>

Я использую эту ссылку, чтобы положиться на рельсы и ненавязчивый Твиттер 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

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

1 голос
/ 06 февраля 2018

У меня была эта проблема, и я исправил ее, изменив рендеринг javascript на: 

    $("#modal-window").find(".modal-content").html("<%= j (render 'new') %>");
    $("#modal-window").modal();

И модальное окно: 

    <div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content"></div>
      </div>
    </div>

Более подробное объяснение вы можете посмотреть здесь https://kolosek.com/rails-creating-modals

0 голосов
/ 20 августа 2016

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

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

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

Решение:

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

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: простите за new.js.erb У меня нет абсолютной причины вложить код до тех пор, пока страница не будет готова. Я думаю, это будет работать даже без функции готовности; если вы знаете, нужно это или нет, пожалуйста, скажите мне.

0 голосов
/ 02 августа 2013

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

<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>

С уважением.

0 голосов
/ 26 декабря 2011

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

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

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

0 голосов
/ 23 декабря 2011

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

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

0 голосов
/ 16 декабря 2011

Мне не известна jquery "модальная" функция. Похоже, вы пытаетесь заставить диалоговое окно element # отображаться. Вы можете просто сделать: 

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

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

...