it-swarm-pt.tech

Como mostrar o modal bootstrap do Twitter via solicitação JS em rails?

Eu quero mostrar um modal bootstrap Twitter como uma resposta a um pedido de JS. Minha função show.js.erb é algo como isto:

$(document).ready(function() {

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

});

Aqui "diálogo" é o id do modal. O código modal em si parece algo como isto:

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

Uma coisa de que tenho certeza é que o javascript está sendo chamado. Eu posso alterar itens na página. Outra coisa é que o modal está funcionando bem. Ele aparece bem quando eu uso um botão HTML para acionar a solicitação assim:

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

Alguma idéia de por que o modal não aparece na solicitação do JS? 

Obrigado!

31
Yusuf Saber

Eu tive um problema semelhante, que resolvi com uma ligeira torção

Meu div modal é renderizado na página chamadora (de uma parcial) e não pela resposta da solicitação 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>

Eu uso este link para confiar no JS discreto do Rails e do Twitter:

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

e meu show.js.erb se parece com isso (encurtado)

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

Isso funciona bem e tem a vantagem de mostrar uma animação de "carregamento" para o usuário enquanto o modal está sendo preenchido.

38
Pierre

Eu tive esse problema e corrigi-lo, alterando a renderização de javascript para:

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

And the modal window to: 
<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>

Você pode verificar uma explicação mais detalhada aqui https://kolosek.com/Rails-creating-modals

1
Nesha Zoric

Eu enfrento o mesmo problema e foi resolvido como 

  1. carregar os arquivos jquery (por exemplo jquery_171_min.js)
  2. e depois carregar o menos js e css e 
  3. carregar o bootstrap-modal.js

tente com esta sequência .. Espero que funcione.

0
Anuja Patil

Este exemplo funciona muito bem.

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

Cumprimentos.

0
Tabares

Esse código parece que deve funcionar (estou fazendo algo semelhante, onde mostro o modal no documento pronto).

Verifique se você está carregando o bootstrap-modal.js e certifique-se de que ele esteja carregando antes do carregamento personalizado do JS. Se o seu JS personalizado estiver sendo carregado primeiro, você verá esse comportamento.

0
Catherine Powell

Eu tive esse problema

a causa para mim foi definir o modal totalmente em arquivo parcial e colocar o gatilho (botão/link) chamando o modal de outro arquivo de visão.

Então, vamos dizer que o botão disparador está na minha página de visualização do índice e eu construo o modal no arquivo _form.html.erb; E eu quero criar um novo registro da página de índice usando esse modal.

Solução:

  • criar a div externa que tem o "id" no mesmo arquivo que o gatilho

index.html.erb - botão de disparo

<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 - mais externo do modal  

<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: perdoe o new.js.erb Eu não tenho nenhuma razão absoluta colocando o código até que a página esteja pronta. Eu acho que vai funcionar mesmo sem a função pronta; Se você sabe que é necessário ou não por favor me diga.

0
Rajan