web-dev-qa-db-ja.com

管理者パネルからのAjaxフォーム送信

管理パネルでページを作成し、そこにCSVエクスポート/インポート用のフォームを作成しました。私のフォームのアクションは " /wp-admin/admin-post.php "です。そのフォームをajax経由で送信したいです。私は管理者パネルで作成したのと同じページに留まりたいです。

これがフォームを使って管理ページを作成するための私のコードです。

add_action( 'admin_menu', 'suiteImportExport' );
function suiteImportExport(){

add_submenu_page('edit.php?post_type=suites','Suite Export Import', 'Suite Export Import', 'manage_options', 'suite_export_import', 'suite_export_import_menu','',3);

}


function suite_export_import_menu(){
?>
<h2>Suite Report Export/Import </h2>

<div id="export_import_form">
               <form action="<?php echo site_url(); ?>/wp-admin/admin-post.php" method="post" enctype="multipart/form-data">
                            <input type="hidden" name="action" value="export_vacancy">
                            <input type="hidden" name="subaction" value="imp_vacancy">
                            <input type="file" name="file_source" id="file_source" value="" />
                            <input type="hidden" name="cmd" value="import" />
                            <input type="submit" value="Import" /><br />
                            <!--input type="checkbox" name="trancate" value="1" /> replace suites-->
               </form>
</div>
<?php
}

これがフォームを処理するための私の機能です。

function import_export_action($cmd){
    if ($cmd == "import")
    {
        /*Form processing action*/
    }
}

私が functions.php fileに書いたすべてのコード。このフォームをAjaxで送信して同じページに留めるにはどうすればよいですか。

ajaxwp-adminforms
3
Mithun Sarker Shuvro

Ajaxを介したファイルのアップロードは少しトリッキーですが管理が容易です。

suite_export_import_menu()のフォームに追加のフォームフィールド（nonceとajax_action）を追加します。

function suite_export_import_menu(){
    ?>
    <h2>Suite Report Export/Import </h2>

    <div id="export_import_form">
        <p id="custom_ajax_call_process">Uploading...</p>
        <p id="custom_ajax_call_result"></p>
        <form action="<?php echo admin_url('admin-ajax.php'); ?>" method="post" enctype="multipart/form-data" target="upload_target">
            <input type="hidden" name="action" value="export_vacancy">
            <input type="hidden" name="subaction" value="imp_vacancy">
            <input type="file" name="file_source" id="file_source" value="" />
            <input type="hidden" name="cmd" value="import" />
            <input type="hidden" name="ajax_action" value="custom_ajax_call" />
            <input type="hidden" name="_ajax_nonce" value="<?= wp_create_nonce('custom_ajax_call')?>" />
            <input type="submit" value="Import" /><br />
            <!--input type="checkbox" name="trancate" value="1" /> replace suites-->
            <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:none;"></iframe>
        </form>
    </div>
    <?php
}

functions.phpまたはあなたのプラグインファイルへのAJAX呼び出しの追加

function custom_ajax_call() {
    if(!wp_verify_nonce( $_POST['_ajax_nonce'], 'custom_ajax_call' )) {
        die(-1);
    }
    $success = 0;
    // Put your Code here

    if ( true ) { //TODO: Change to condition if upload is success...
        $success = 1;
    }
    ?>
    <script language="javascript" type="text/javascript">
        window.top.window.stopUpload(<?= $success ?>);
    </script>
    <?php
    exit;
}

function custom_ajax_call_init() {
    if($_REQUEST['ajax_action'] === 'custom_ajax_call') {
        do_action( 'wp_ajax_custom_ajax_call' );
    }
}

if (is_admin()){
    add_action('wp_ajax_custom_ajax_call', 'custom_ajax_call');
}

add_action( 'init', 'custom_ajax_call_init');

テーマまたはプラグインディレクトリにcustom_ajax_call.jsを作成します。

var stopUpload,
    startUpload;

jQuery('document').ready(function($) {
    stopUpload = function (success) {
        if (success)
            $('#custom_ajax_call_result').empty().text('Success!');
        else
            $('#custom_ajax_call_result').empty().text('Fail!');
        $('#custom_ajax_call_process').hide();
        return true;
    };

    startUpload = function() {
        $('#custom_ajax_call_process').show();
        $('#custom_ajax_call_result').empty();
    };

    $('body').on('submit', '#export_import_form', function () {
        startUpload();
    });
});

functions.phpまたはプラグインファイルにスクリプトをエンキューします（TODOに注意してください）。

function admin_enqueue_custom_ajax_call(){
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'custom-ajax-call', get_template_directory_uri().'/path/to/custom_ajax_call.js', array('jquery')); //TODO: Change to plugin URI if needed
}
1
iantsch