1

我在 Codeigniter 应用程序中使用 Bootstrap 模态作为弹出式所见即所得文本编辑器。关于加载内容和模式的一切工作正常。当通过 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

你可以尝试这样的事情：

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());
});
于 2013-08-01T23:10:58.297 回答
2

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

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 回答
0

你写if(url.indexOf('#') == 0)的时候是什么意思if(url.indexOf('#') == -1)？如果字符串中没有出现则indexOf('#')返回。-1#

于 2013-08-01T23:08:06.670 回答