web-dev-qa-db-fra.com

Soumission de formulaire Ajax depuis le panneau d'administration

J'ai créé une page dans le panneau d'administration et j'ai créé un formulaire pour l'exportation/importation au format CSV. L'action de ma fiche est " /wp-admin/admin-post.php ". Je veux soumettre ce formulaire via ajax. Je veux rester sur la même page, que j'ai créée dans le panneau d'administration.

Voici mon code pour créer une page d'administration avec un formulaire.

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
}

Voici ma fonction pour traiter le formulaire

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

Tout le code que j'ai écrit dans functions.php fichier. Comment pouvez-vous envoyer ce formulaire via ajax et rester sur la même page?.

ajaxwp-adminforms
3
Mithun Sarker Shuvro

Le téléchargement de fichiers via Ajax est un peu délicat, mais gérable.

Ajoutez quelques champs de formulaire supplémentaires (nonce et ajax_action) à votre formulaire dans suite_export_import_menu():

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
}

Ajouter AJAX appel à functions.php ou à votre fichier de plugin:

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');

Créez custom_ajax_call.js dans votre répertoire thème ou plugin:

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

Mettez le script en file d'attente dans votre fichier functions.php ou plugin (attention au 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