0

I want to build a meta box that contains multiple textfields which get filled if a submit button is pressed. The data is set by a function which should get called if the button is pressed. How can I do this with AJAX, without reloading the page?

My attempt for the meta box content was the following (everything is written in a plugin .php file /plugins/myplugin.php):

<?php

// register metabox
add_action( 'admin_init', 'my_admin' );

// add metabox
function my_admin() {
    add_meta_box( 'movie_info_div',
        'Fetched information:',
        'display_info_mbox',
        'my_custom_post_type',
        'normal',
        'high' );
}


add_action('wp_ajax_fetch_action', 'fetch_action_callback');

// function that should be called if button is pressed
function fetch_action_callback() {
    $input = esc_html( $_POST['input'] );
    $input .= ' + fetched data';
    echo $input;
    die();
}

The function to display the metabox content:

// Display metabox content
function display_info_mbox( $movie_review ) {
    ?>
        <a href="#" id="start_fetch">Start fetching</a>
        <input id="source" type="text" value="" />
        <input id="content" type="text" value="" />
        <div id="error"></div>

    <script>
    jQuery(document).ready(function(){  
        jQuery("input#start_fetch").click(
        function() {
                text_input = $('input[id=source]').val();
                if(text_input){
                var data = {action: 'fetch_action',input: text_input};

                       $.post(ajaxurl, data,function(response) {
                       $('input[id=content]').val('response');
                });

                }else{
                jQuery("div#error").html(<?php _e("No input!"); ?>)
                    }
        };
        );  
    });     
    </script>

       <?php } ?>

Actually I just want to build a button that triggers a php script which returns some fetched data to a form, depending on a text-input but with a submit-button it reloads the whole page.

As I am completely new to AJAX and jQuery I'm kind of lost.

I would appreciate your help.

  • Have you already searched the site? There're plenty of comprehensive answers in the ajax tag archive. Please update your question and show us what you tried. – kaiser Jun 10 '13 at 6:28
  • Thank you for the comment. I've gone through a lot of posts but I'm just stuck. Maybe the solution to my problem is simple - I've just found nothing concrete on this topic. – epoxy Jun 10 '13 at 11:49
  • Could you please reformat your questions code so it's easier readable and as well explain in which file and what context you're doing the AJAX call? – kaiser Jun 10 '13 at 12:08
  • I've added the part of my plugin.php which calls the metabox. My goal is the get the text-input fields filled with fetched data (which is provided by the function fetch_action_callback()), if a submit button (in my case <a id="start_fetch">) is pressed, so one does not have to fill out all the forms by hand (just edit them in case no data can be fetched). – epoxy Jun 10 '13 at 12:40
  • 1
    Thank you for your time! It is an actual plugin (I thought I'd separate it from the functions.php). Till now it has nothing else in it than the code above, the plugin header and the custom-post-type. I'm just trying to figure out how to get the fetched data displayed on click. – epoxy Jun 10 '13 at 12:50

Your Answer

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

Browse other questions tagged or ask your own question.