1

Codeigniter アプリケーションで Bootstrap モーダルをポップアップ WYSIWYG テキスト エディターとして使用しています。コンテンツの読み込みとモーダルに関するすべてが正常に機能します。モーダルが AJAX 経由で開かれている場合でも、コンテンツを保存できます。

しかし、私が達成しようとしているのは、モーダルで「保存」ボタンを押したときです...モーダル$('#wysiwyg').val()を開いたページに値を返したいです。

モーダルをトリガーするリンク

<a href="/ajax/modals/wysiwyg" class="btn ajax-modal">Write Text</a>

JavaScript 読み込みモーダル- https://gist.github.com/drewjoh/1688900からソースを変更

$('.ajax-modal').click(function(e) {

    e.preventDefault();

    var modal = $('#ajax-modal');
    var url = $(this).attr('href');

    if(url.indexOf('#') == 0) {
        $(url).modal('open');
    } else {
        $.get(url, function(data) {
            modal.html(data);
            modal.modal();
        }).success(function() { 
            /* boom. loaded. */ 
        });
    }
});

HTML モーダル ラッパー

<div id="ajax-modal" class="modal hide fade" data-backdrop="static" data-keyboard="false" tabindex="-1"></div>

HTMLモーダルボディ/コンテンツ

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Text Editor</h3>
</div>
<div class="modal-body">

    <textarea class="input-block-level" id="wysiwyg" rows="9">Write something...</textarea>

</div>
<div class="modal-footer">
    <button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button id="submit-modal" class="btn btn-success">Save</button>
</div>

前もって感謝します。

4

3 に答える 3

2

私はあなたが求めているものを手に入れたと思います...これを行うにはいくつかの方法があります。より分離されたアプローチを作成したい場合は、Amplify のような pub/sub フレームワークを使用できます。最も簡単な方法は、クリック イベントを作成する前に、入力する要素への参照を作成することです。そのようです：

var controlToPopulate = $("#controlToPopulateId");
$('.ajax-modal').click(function(e) {

e.preventDefault();

var modal = $('#ajax-modal');
var url = $(this).attr('href');

if(url.indexOf('#') == 0) {
    $(url).modal('open');
} else {
    $.get(url, function(data) {
        modal.html(data);
        modal.modal();
    }).success(function() { 
        /* boom. loaded. */
        modal.find('#submit-modal').click(function() {
           controlToPopulate.val(modal.find('#wysiwyg').val());
       });
    });
}

});

于 2013-08-01T23:01:54.587 に答える