0

ajax 経由でデータを保存するカスタム ckeditor 4.0 プラグインがあります。データを保存した後に、サーバーの応答を含む ckeditor ダイアログを表示したいと考えています。私のプラグイン コードは: CKEDITOR.plugins.add('ajaxsave', { init: function(editor) {

    var pluginName = 'ajaxsave';

    editor.addCommand(pluginName, {
        exec: function(editor) {
            $.post("page_edit_ajax.asp", {
                data: editor.getSnapshot(),
                menusn: editor.name
            },
            function(data) {

                alert(data);
            })
        },
        canUndo: true
    });

    editor.ui.addButton('Ajaxsave', {
        label: 'Save Ajax',
        command: pluginName,
        icon: this.path + "images/ajaxsave.png",
        className: 'cke_button_save'
    });

}

});

4

2 に答える 2

0

重要なのは、jQuery.ajaxsuccessハンドラーまたはdone返された遅延オブジェクトのメソッドのいずれかで、非表示の要素 (おそらく div) を表示していることです。

次のマークアップを含む div があると仮定します ( position:absolutediv を他のすべての要素の上に配置できることに注意してください)。

<div id="message-sent" class="panel" style="display:none;width: 300px; height: 100px;z-index:9999;position:absolute;top:300px;left:500px;"><section><h5>Page Updated!</h5></section></div>

その後

$.ajax({
    type: "POST",
    url: myURL,
    data: myDataObj,
    success: function(data, textStatus,jqXHR){
        var msg =  $('#message-sent');
        msg.show();
        setTimeout(function () {
             msg.fadeOut(2000).remove();
        }, 1000);
    });

同様に deferred.done メソッドを使用する

    $.ajax({
        type: "POST",
        url: myURL,
        data: myDataObj
    })
    .done(function (data, textStatus,jqXHR) {
            var msg =  $('#message-sent');
            msg.show();
            setTimeout(function () {
                 msg.fadeOut(2000).remove();
            }, 1000);
    });

実際、私は通常、更新を投稿するたびに「メッセージ送信済み」div を作成して再作成することになります。div の位置を再計算してページの中央に配置し、応答テキストを挿入します。このようなもの：

    var w = $('body').width();
    var h = $('body').height();
    var left = parseInt(Math.round((w - 300) / 2), 10);
    var top = parseInt(Math.round((h - 100) / 2), 10);
    var html = '<div id="message-sent" class="panel" style="display:none;width: 300px; height: 100px;z-index:9999;position:absolute;top:'+top+'px;left:'+left+'px;">' +
               '<section><h5>'+jqXHR.responseText+' updated</h5></section></div>';
    $('body').append(html);
    var msg =  $('#message-sent');
    msg.show();
    setTimeout(function () {
        msg.fadeOut(2000).remove();
    }, 1000);
于 2014-05-28T08:51:00.027 に答える