it-swarm.com.de

Übermittlung des Ajax-Formulars vom Admin-Panel

Ich habe eine Seite im Admin-Bereich erstellt und dort ein Formular für den CSV-ExportImport erstellt. Die Aktion meines Formulars ist "/ wp-admin/admin-post.php - /". Ich möchte dieses Formular über Ajax senden. Ich möchte auf derselben Seite bleiben, die ich im Admin-Panel erstellt habe.

Hier ist mein Code zum Erstellen einer Admin-Seite mit Formular.

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
}

Hier ist meine Funktion, um das Formular zu verarbeiten

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

Den ganzen Code habe ich in functions.php file geschrieben. Wie kann ich dieses Formular über Ajax abschicken und auf derselben Seite bleiben?.

Das Hochladen von Dateien über Ajax ist etwas knifflig, aber überschaubar.

Fügen Sie Ihrem Formular in suite_export_import_menu() einige zusätzliche Formularfelder (nonce und ajax_action) hinzu:

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
}

Hinzufügen von AJAX zum Aufruf von functions.php oder Ihrer Plugin-Datei:

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

Erstelle custom_ajax_call.js in deinem Theme oder Plugin Verzeichnis:

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

Stellen Sie das Skript in Ihrer functions.php- oder Plugin-Datei in eine Warteschlange (beachten Sie das 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