2

この関数は、外部ページをロードします。DIV ID からページ URL を取得します。

$(".contentArea").load($('.contentArea').attr('id'), function(){

ページが読み込まれ、データテーブルが取得されたので、それをコールバックに追加しました。

$('.datatable').dataTable( {

データテーブル内にエディター ボタンがあるので、データテーブル コールバック関数を使用して、ページを更新せずにエディターを呼び出しました。

"fnDrawCallback": function(){

    $(".contentEditor").click(function() {

        $(".contentArea").load($('.contentEditor').attr('id'), function(){

この段階では、データテーブルを含むページをロードするために使用したのと同じ方法を使用して、コンテンツ エディターをロードしました。(ボタン ID で渡されるページ URL)。

私は今行き詰まった。このエディターでは、フォームを送信する必要があります。ページが更新されないように jquery ロードを使用して送信したいのですが、フォームが送信された後、サーファーをデータテーブル ページ (最初に読み込まれたページ) に送り返したいと考えています。ページが読み込まれました)。そして、編集したコンテンツを更新するために必要なアクションを実行します。何か助けはありますか？ありがとう。

  • 私はデータテーブルサーバー側のajaxロードを使用しています。そのため、コールバックを使用しました。

        $(".contentArea").load($('.contentArea').attr('id'), function(){
        $('.datatable').dataTable( {
            "bJQueryUI": true,
            "sScrollX": "",
            "bSortClasses": false,
            "aaSorting": [[0,'asc']],
            "bAutoWidth": true,
            "bInfo": true,
            "sScrollY": "100%", 
            "sScrollX": "100%",
            "bScrollCollapse": true,
            "sPaginationType": "full_numbers",
            "bRetrieve": true,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": $('.datatable').attr('id'),
            "fnDrawCallback": function(){
                $(".contentEditor").click(function() {
                    $(".contentArea").load($('.contentEditor').attr('id'), function(){
                        $( "select, input:checkbox, input:radio, input:file").uniform(),
                        $( ".datepicker" ).datepicker({dateFormat: 'yy-mm-dd' }),
                        $("#validation").validationEngine(),
                        $('input[title]').tipsy(),
                        $('textarea.tinymce').tinymce({
                             // Location of TinyMCE script
                            script_url : '../scripts/tinyeditor/tiny_mce.js',

                            // General options
                            theme : "advanced",
                            plugins : "table,advhr,advimage,advlink,inlinepopups,preview,media,paste,fullscreen,visualchars,xhtmlxtras",

                            // Theme options
                            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,cut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,forecolor,backcolor",
                            theme_advanced_buttons2 : "formatselect,fontselect,fontsizeselect,|,removeformat,|,hr,|,undo,redo,|,sub,sup,|,charmap,|,cite",
                            theme_advanced_buttons3 : "tablecontrols,|,link,unlink,anchor,|,image,preview,media,|,cleanup,code,fullscreen",
                            theme_advanced_toolbar_location : "top",
                            theme_advanced_toolbar_align : "left",
                            theme_advanced_statusbar_location : "bottom",
                            theme_advanced_resizing : true
                        });
                    });
                });
            }});
        });
4

1 に答える 1

1

フォームを送信するには、$.post()とともに使用し$(form).serialize()ます。次に、 の成功ハンドラで$.post()、再度使用.load()します。

$.post(url, $("#myForm").serialize(), function(data) {
    $(".contentArea").load(...);
});

または、フォームの送信から返されたコンテンツが で表示したい html である場合、返された html を で使用するだけで、.contentAreaへの余分な呼び出しを省くことができます。.load().contentArea

$.post(url, $("#myForm").serialize(), function(data) {
    $(".contentArea").html(data);
});

編集: さまざまなタスクを処理する関数を作成します。ちなみに、idURLの保存には使用しないでください。カスタム属性を作成します...多分contentUrl.

var contentArea = $(".contentArea");
function loadContent(url, success) {
    contentArea.load(url, success);
}
function loadDataTable() {
    loadContent(contentArea.attr("contentUrl"), initDataTable);
}
function initDataTable() {
    $(".datatable").dataTable({
        ...,
        fnDrawCallback: bindContentEditor
    });
}
function bindContentEditor() {
    $(".contentEditor").click(contentEditorClick);
}
function contentEditorClick(e) {
    loadContent($(".contentEditor").attr("contentUrl"), initContentEditor);
}
function initContentEditor() {
    ...
    $(".submitBtn").click(postContentEditor);
}
function postContentEditor() {
    $.post("/postUrl", $(".contentArea form").serialize(), loadDataTable);
}
loadDataTable();

おそらくあまりにも多くの個々の関数に分割しましたが、ポイントは、特に機能を再利用したい場合に、無名関数を使いすぎないことです。

于 2011-09-23T23:40:47.107 に答える