Ruby on Rails ajaxのポップアップメッセージ

Question

Ruby on Railsアプリケーションでブートストラップを使用しています。ポップアップを使用してユーザーにメッセージを表示することがあります。私は、次のCSSとhtmlライン作成：私が表示したい

.modal-dialog { 
    display: none; 
    position: fixed; 
    z-index: 988888; 
    padding-top: 20px; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.7); 
    margin: 0px!important; 
} 

.modal-content { 
    background-color: #fefefe; 
    margin: auto; 
    padding: 20px; 
    border: 1px solid #888; 
    width: 600px; 
    height: 550px; 
    border-radius: 2px!important; 
} 

をポップアップ-2

<div class="modal-dialog"> 
    <div class="modal-content"> 
     <span class="model_box_close">&times;</span> 
     Popup 1 
    </div> 
</div> 

私はポップアップ-2

<div class="modal-dialog"> 
    <div id="message-content" class="modal-content"> 
     <span class="model_box_close">&times;</span> 
     Popup 2 
    </div> 
</div> 

は私がやりたいことは作成され表示したいですメッセージコンテンツをajaxでポップアップに追加します。どうすればそれを達成できますか？我々はそのようなレールAJAXイベントにルビーを実行できるのRuby on Railsで

：

$("<%= escape_javascript(render "popupcontent") %>").appendTo("#message-content"); 

私はAjaxでハイパーリンクをクリックすることにより、私のメッセージボックスを使用します。

提案、

ありがとう。

Answer 1

私が正しく理解していれば、ブートストラップサイト

$('#exampleModal').on('show.bs.modal', function (event) { 
    var button = $(event.relatedTarget) // Button that triggered the modal 
    var recipient = button.data('whatever') // Extract info from data-* attributes 
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). 
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. 
    var modal = $(this) 
    modal.find('.modal-title').text('New message to ' + recipient) 
    modal.find('.modal-body input').val(recipient) 
}) 

から this例に見られるように、あなたは、あなたが取ることができる2つのルートを持っているあなたが開いモーダルを持って、その後、Ajaxリクエストをオフに解雇し、コンテンツを更新することができます

またはリンクをクリックしてAjaxリクエストを送信し、リクエストの完了時にモーダルを表示する場合は、Ajaxコールバックの内容を更新した後に.modal('show')を使用できます。

$("a[data-remote]").on("ajax:success", function() { 
    $('#myModal').modal('show') 
})