在Wordpress插件中将AJAX发布到回调函数

时间：2012-06-03 17:02:41

标签： php ajax jquery wordpress-plugin

再次用AJAX拉出我的头发。这是一个我正在处理的简单列表插件。我正在尝试使用AJAX回调将JQUERY添加到短代码中。

最有趣的部分是Javascript / JQuery没有进入页面。例如，当在页面上调用短代码时，应该会出现一个警告框（这样我知道它正在工作），并且应该说“至少这是有用的”。它应该在文档准备好后立即发生。但由于某种原因，没有警告框，让我相信我永远不会接受AJAX回调，因为指定AJAX回调的原始JQuery代码以某种方式被破坏。

你可以在下面第34行看到这个。如果我能弄清楚为什么javascript无法正常工作，我敢打赌其余部分会排成一行。我已经尝试将JQuery放在一个变量中并返回它，回应它，等等。还尝试在代码中的表单之前和之后放置JQuery代码。仍然无效。

以下是代码： 

/*
*
*
SHORTCODE
*
*
*/

add_shortcode('list-up-down', 'cb_lud_scfunc');

function cb_lud_scfunc() {
global $wpdb;
$cb_lud_prefix = $wpdb->prefix;
$cb_lud_table = $cb_lud_prefix . 'cb_list_up_down';
$cb_lud_homeurl = home_url();
$cb_lud_upimg = plugins_url('list-up-down/images/up-arrow.png', _FILE_);
$cb_lud_downimg = plugins_url('list-up-down/images/down-arrow.png', _FILE_);
$cb_lud_sample_query = $wpdb->query('SELECT * FROM '.$cb_lud_table);
$cb_lud_field1_name = $wpdb->get_col_info('name',1);
$cb_lud_field2_name = $wpdb->get_col_info('name',2);

/*
CREATE THE JAVASCRIPT/JQUERY
*/
//Create the Javascript and AJAX
add_action('init', 'cb_lud_action_javascript');

function cb_lud_action_javascript() {
?>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript' >

$(document).ready(function(){
alert('at least this is working');
//JQuery for the submission of a new list item.
$('#list-up-down-form').submit(function(e){
    e.preventDefault(); //Works to prevent normal submission of the form.

    var field1_input = $('#field1_input').val();
    var field2_input = $('#field2_input').val();

    var data = {
        action: 'cb_lud_ajax_action',
        field1: field1_input,
        field2: field2_input,
        };

    $.ajax ({
        type: 'POST',
        url: ajaxurl,
        data: data,
        success: function() {
            alert('It worked!');
            }
        });
});
});
</script>
<?php
//End Javascript function.  
}

/*
CREATE THE FORM
*/
//Create the form to allow users to add records
    $cb_lud_sc_form = '
        <form id="list-up-down-form" name="list-up-down-form" action="" method="post">
        <table border="0">
            <tr>
                <td><h2>'.$cb_lud_field1_name.':</h2><input id="field1_input" name="field1_input" type="text"></input></td>
                <td><h2>'.$cb_lud_field2_name.':</h2><input id="field2_input" name="field2_input" type="text"></input></td>
                <td valign="bottom"><input name="add_record" type="submit" value="Add Record" /></td>
            </tr>
        </table>
        </form>
        ';

/*
DISPLAY THE LIST
*/          
//Get the list from the database, and set the variables for display in the output.
$get_list = $wpdb->get_results('SELECT entry_ID, '.$cb_lud_field1_name.' AS "field1", '.$cb_lud_field2_name.' AS "field2", up_votes, down_votes, up_votes - down_votes AS "total_votes"
    FROM '.$cb_lud_table.'
    GROUP BY entry_ID
    ORDER BY total_votes DESC
    ',OBJECT);

//Check if list is null, and if so, set a variable to display a warning. Otherwise, display the list.
if (empty($get_list)) {
    $cb_lud_sc_output .= "<em>Warning: You don't seem to have any records for this list. Why don't you add some now?</em>";
    $cb_lud_sc_output .= $cb_lud_sc_form;
    return $cb_lud_sc_output;
}
else {
    $cb_lud_sc_output .= $cb_lud_sc_form;
    $cb_lud_sc_output .= '</br>';
    $cb_lud_sc_output .= '<table border="1" cellpadding="10">';
    $cb_lud_sc_output .= '<tr><td align="center"><strong>'.$cb_lud_field1_name.'</strong></td><td align="center"><strong>'.$cb_lud_field2_name.'</strong></td><td align="center"><strong>Score</strong></td></tr>';
        foreach ($get_list as $list_items) {
            $cb_lud_sc_output .= '<tr><td>'.$list_items->field1.'</td><td>'.$list_items->field2.'</td><td>'.$list_items->total_votes.'</td></tr>';
        }
    $cb_lud_sc_output .= '</table>';
    return $cb_lud_sc_output;
}
return $cb_lud_sc_output;   

/*
CREATE THE AJAX
*/

//Use the Wordpress AJAX functions
add_action('wp_ajax_cb_lud_ajax_action', 'cb_lud_ajax_callback');
add_action('wp_ajax_nopriv_cb_lud_ajax_action', 'cb_lud_ajax_callback');

//Create the function that executes the AJAX Callback
function cb_lud_ajax_callback() {
global $wpdb;
$prefix = $wpdb->prefix;
$cb_lud_table = $prefix . 'cb_list_up_down';


        $field1_data = $_POST['field1'];
        $field2_data = $_POST['field2'];
        $up_votes = 0;
        $down_votes = 0;
        $new_data = array(
            $cb_lud_field1_name => $field1_data,
            $cb_lud_field2_name => $field2_data,
            'up_votes' => $up_votes,
            'down_votes' => $down_votes,
            );
        $format = array('%s', '%s', '%f', '%f');

        /*$wpdb->insert(
            $cb_lud_table, $new_data, $format
        );*/

        $wpdb->query('INSERT INTO
            '.$cb_lud_table.' ('.$cb_lud_field1_name.', '.$cb_lud_field2_name.', up_votes, down_votes)
            VALUES ('.$field1_data.', '.$field2_data.', '.$up_votes.', '.$down_votes.')
        ');
die(); // this is required to return a proper result
}
};
/*
END SHORTCODE
*/

1 个答案:

答案 0 :(得分：0)

在重新考虑短代码之后，没有理由为这部分代码包含AJAX调用。只需让表单在提交时将数据插入数据库，并使用“if”语句来控制表单是否实际填写正确。

下面的代码，注释掉了所有的AJAX和回调，并且运行良好。

另外，我想出了一种调试javascript / jquery的方法。我没有让它被另一个函数调用，而是定义了函数，并直接调用它，它起作用了。

工作守则（万岁！）： 

/*
*
*
SHORTCODE
*
*
*/

add_shortcode('list-up-down', 'cb_lud_scfunc');

function cb_lud_scfunc() {
global $wpdb;
$cb_lud_prefix = $wpdb->prefix;
$cb_lud_table = $cb_lud_prefix . 'cb_list_up_down';
$cb_lud_homeurl = home_url();
$cb_lud_upimg = plugins_url('list-up-down/images/up-arrow.png', _FILE_);
$cb_lud_downimg = plugins_url('list-up-down/images/down-arrow.png', _FILE_);
$cb_lud_sample_query = $wpdb->query('SELECT * FROM '.$cb_lud_table);
$cb_lud_field1_name = $wpdb->get_col_info('name',1);
$cb_lud_field2_name = $wpdb->get_col_info('name',2);

/*
CREATE THE JAVASCRIPT/JQUERY
*/
//Create the Javascript and AJAX
//add_action('init', 'cb_lud_action_javascript');
/*  
function cb_lud_action_javascript() {
?>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> 
<script type='text/javascript' >

$(document).ready(function(){
alert('at least this is working');
//JQuery for the submission of a new list item.
$('#list-up-down-form').submit(function(e){
    e.preventDefault(); //Works to prevent normal submission of the form.

    var field1_input = $('#field1_input').val();
    var field2_input = $('#field2_input').val();

    var data = {
        action: 'cb_lud_ajax_action',
        field1: field1_input,
        field2: field2_input,
        };

    $.ajax ({
        type: 'POST',
        url: ajaxurl,
        data: data,
        success: function() {
            alert('It worked!');
            }
        });
});
 });
</script>
<?php
//End Javascript function.  
}

//Call the javascript function
cb_lud_action_javascript();
*/

/*
CREATE THE FORM
*/
//Create the form to allow users to add records
    $cb_lud_sc_form = '
        <form id="list-up-down-form" name="list-up-down-form" action="" method="post">
        <table border="0">
            <tr>
                <td><h2>'.$cb_lud_field1_name.':</h2><input id="field1_input" name="field1_input" type="text"></input></td>
                <td><h2>'.$cb_lud_field2_name.':</h2><input id="field2_input" name="field2_input" type="text"></input></td>
                <td valign="bottom"><input name="add_record" type="submit" value="Add Record" /></td>
            </tr>
        </table>
        </form>
        ';

/*
DEFINE HOW THE FORM HANDLES THE INPUT(S)
*/
$field1_data = htmlspecialchars($_POST['field1_input'], ENT_QUOTES);
$field2_data = htmlspecialchars($_POST['field2_input'], ENT_QUOTES);
$up_votes = 0;
$down_votes = 0;
$new_data = array(
    $cb_lud_field1_name => $field1_data,
    $cb_lud_field2_name => $field2_data,
    'up_votes' => $up_votes,
    'down_votes' => $down_votes,
    );
$format = array('%s', '%s', '%f', '%f');

if (isset($field1_data) && !empty($field1_data) && isset($field2_data) &&!empty($field2_data)) {
    $wpdb->insert(
        $cb_lud_table, $new_data, $format
    );
}
else {
}
/*$wpdb->query('INSERT INTO
    '.$cb_lud_table.' ('.$cb_lud_field1_name.', '.$cb_lud_field2_name.', up_votes, down_votes)
    VALUES ('.$field1_data.', '.$field2_data.', '.$up_votes.', '.$down_votes.')
');*/

/*
DISPLAY THE LIST
*/          
//Get the list from the database, and set the variables for display in the output.
$get_list = $wpdb->get_results('SELECT entry_ID, '.$cb_lud_field1_name.' AS "field1", '.$cb_lud_field2_name.' AS "field2", up_votes, down_votes, up_votes - down_votes AS "total_votes"
    FROM '.$cb_lud_table.'
    GROUP BY entry_ID
    ORDER BY total_votes DESC
    ',OBJECT);

//Check if list is null, and if so, set a variable to display a warning. Otherwise, display the list.
if (empty($get_list)) {
    $cb_lud_sc_output .= "<em>Warning: You don't seem to have any records for this list. Why don't you add some now?</em>";
    $cb_lud_sc_output .= $cb_lud_sc_form;
    return $cb_lud_sc_output;
}
else {
    $cb_lud_sc_output .= $cb_lud_sc_form;
    $cb_lud_sc_output .= '</br>';
    $cb_lud_sc_output .= '<table border="1" cellpadding="10">';
    $cb_lud_sc_output .= '<tr><td align="center"><strong>'.$cb_lud_field1_name.'</strong></td><td align="center"><strong>'.$cb_lud_field2_name.'</strong></td><td align="center"><strong>Score</strong></td></tr>';
        foreach ($get_list as $list_items) {
            $cb_lud_sc_output .= '<tr><td>'.stripslashes($list_items->field1).'</td><td>'.stripslashes($list_items->field2).'</td><td>'.$list_items->total_votes.'</td></tr>';
        }
    $cb_lud_sc_output .= '</table>';
    return $cb_lud_sc_output;
}
return $cb_lud_sc_output;   

/*
CREATE THE AJAX
*/

/*
//Use the Wordpress AJAX functions
add_action('wp_ajax_cb_lud_ajax_action', 'cb_lud_ajax_callback');
add_action('wp_ajax_nopriv_cb_lud_ajax_action', 'cb_lud_ajax_callback');
*/

//Create the function that executes the AJAX Callback
/*
function cb_lud_ajax_callback() {
global $wpdb;
$prefix = $wpdb->prefix;
$cb_lud_table = $prefix . 'cb_list_up_down';

        $field1_data = $_POST['field1'];
        $field2_data = $_POST['field2'];
        $up_votes = 0;
        $down_votes = 0;
        $new_data = array(
            $cb_lud_field1_name => $field1_data,
            $cb_lud_field2_name => $field2_data,
            'up_votes' => $up_votes,
            'down_votes' => $down_votes,
            );
        $format = array('%s', '%s', '%f', '%f');

        $wpdb->insert(
            $cb_lud_table, $new_data, $format
        );

        $wpdb->query('INSERT INTO
            '.$cb_lud_table.' ('.$cb_lud_field1_name.', '.$cb_lud_field2_name.', up_votes, down_votes)
            VALUES ('.$field1_data.', '.$field2_data.', '.$up_votes.', '.$down_votes.')
        ');
die(); // this is required to return a proper result
}
*/
};

/*
END SHORTCODE
*/
相关问题
最新问题