Question

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

提前致谢。

Answer 1

我想我得到了你要求的......有几种方法你可以做到这一点。如果你想创建一个更加分离的方法，你可以使用像Amplify这样的pub / sub框架。最简单的方法是在创建click事件之前创建对要填充的元素的引用。像这样：

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());
       });
    });
}

}）;

Answer 2

您可以尝试这样的事情：

var modal = $('#ajax-modal');

// Filter clicks within the modal to those on the save button (#submit-modal)
modal.on('click', '#submit-modal', function(e) {

    // Find the wysiwyg within the modal        
    var wysiwyg = $('#wysiwyg', modal);

    // Now do what you want with wysiwyg.val();
    if (wysiwyg.length) $('#my_info_div').html(wysiwyg.val());
});

Answer 3

当您撰写if(url.indexOf('#') == 0)时，您的意思是if(url.indexOf('#') == -1)吗？如果indexOf('#')未出现在字符串中，则-1会返回#。

从动态（AJAX）加载的Bootstrap Modal返回数据

3 个答案: