3

I have created a page in admin panel and there I have created a form for CSV export/import . Action of my form is "/wp-admin/admin-post.php" . I want to submit that form via ajax . I want to remain on the same page , that I have created in admin panel .

Here is my code to create admin page with form .

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
}

Here is my function to process the form

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

All the code I have written in functions.php file . How can submit this form via ajax and stay on same page .

1

File Upload via Ajax is a bit tricky, but manageable.

Add some additional form fields (nonce and ajax_action) to your form in 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
}

Adding AJAX call to functions.php or your plugin file:

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

Create custom_ajax_call.js in your theme or plugin directory:

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

Enqueue the Script in your functions.php or plugin file (mind the 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
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.