Wordpress 中的 Qtip 和 ajax - 操作不起作用
Qtip and ajax in Wordpress - action not working
我正在尝试将 QTip jquery 工具提示集成到我的 Wordpress 站点中,使用 Ajax 触发工具提示,其中包含从自定义数据库 table 中提取的一些信息。
我已经在 function.php:
中添加了 enque 和 action 内容
function enqueue_scripts_styles_init() {
wp_enqueue_style('qtip', 'http://www.my-site.com/wp-content/themes/my-theme/qtip/jquery.qtip.min.css', null, false, false);
wp_enqueue_script('qtip', 'http://www.my-site.com/wp-content/themes/my-theme/qtip/jquery.qtip.min.js', array('jquery'), false, true);
wp_enqueue_script('qtipCall', 'http://www.my-site.com/wp-content/themes/my-theme/qtip/qtipcall.js', array('jquery', 'qtip'), false, true);
wp_localize_script( 'qtipCall', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('init', 'enqueue_scripts_styles_init');
function ajax_action_stuff() {
global $wpdb;
$hero = $_POST['who'];
$results = $wpdb->get_row( $wpdb->prepare ('SELECT * FROM wp_herotable WHERE Name = %s', $hero) );
$hero_bio = $results->Bio;
echo $hero_bio;
wp_die();
}
add_action( 'wp_ajax_ajax_action', 'ajax_action_stuff' );
add_action( 'wp_ajax_nopriv_ajax_action', 'ajax_action_stuff' );
这是我的 qtipcall.js:
jQuery(document).ready(function( $ ) {
$('[tip-hero').each(function() {
$(this).qtip({
content: {
text: function(event, api) {
$.ajax({
url: ajax_object.ajaxurl,
type: 'POST',
action: 'ajax_action',
data: {who: $(this).attr("tip-hero")},
})
.then(function(content) {
// Set the tooltip content upon successful retrieval
api.set('content.text', content);
}, function(xhr, status, error) {
// Upon failure... set the tooltip content to error
api.set('content.text', status + ': ' + error);
});
return 'Loading...'; // Set some initial text
}
},
style: {
classes: 'qtip-dark qtip-rounded qtip-shadow'
}
});
});
});
最后,我的页面:
<a hfer="#" tip-hero="Joan of Arc">Joan of Arc</a>
结果是一个很酷的工具提示,里面有一个 0!我检查了 admin-ajax.php,零来自:
// Require an action parameter
if ( empty( $_REQUEST['action'] ) )
die( '0' );
所以我认为我的操作调用有问题,但我真的不明白它是什么。
如有任何帮助,我们将不胜感激。
谢谢。
更改您的 ajax 以发送操作值:
data: {who: $(this).attr("tip-hero"),action: 'ajax_action'},
我正在尝试将 QTip jquery 工具提示集成到我的 Wordpress 站点中,使用 Ajax 触发工具提示,其中包含从自定义数据库 table 中提取的一些信息。
我已经在 function.php:
中添加了 enque 和 action 内容function enqueue_scripts_styles_init() {
wp_enqueue_style('qtip', 'http://www.my-site.com/wp-content/themes/my-theme/qtip/jquery.qtip.min.css', null, false, false);
wp_enqueue_script('qtip', 'http://www.my-site.com/wp-content/themes/my-theme/qtip/jquery.qtip.min.js', array('jquery'), false, true);
wp_enqueue_script('qtipCall', 'http://www.my-site.com/wp-content/themes/my-theme/qtip/qtipcall.js', array('jquery', 'qtip'), false, true);
wp_localize_script( 'qtipCall', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('init', 'enqueue_scripts_styles_init');
function ajax_action_stuff() {
global $wpdb;
$hero = $_POST['who'];
$results = $wpdb->get_row( $wpdb->prepare ('SELECT * FROM wp_herotable WHERE Name = %s', $hero) );
$hero_bio = $results->Bio;
echo $hero_bio;
wp_die();
}
add_action( 'wp_ajax_ajax_action', 'ajax_action_stuff' );
add_action( 'wp_ajax_nopriv_ajax_action', 'ajax_action_stuff' );
这是我的 qtipcall.js:
jQuery(document).ready(function( $ ) {
$('[tip-hero').each(function() {
$(this).qtip({
content: {
text: function(event, api) {
$.ajax({
url: ajax_object.ajaxurl,
type: 'POST',
action: 'ajax_action',
data: {who: $(this).attr("tip-hero")},
})
.then(function(content) {
// Set the tooltip content upon successful retrieval
api.set('content.text', content);
}, function(xhr, status, error) {
// Upon failure... set the tooltip content to error
api.set('content.text', status + ': ' + error);
});
return 'Loading...'; // Set some initial text
}
},
style: {
classes: 'qtip-dark qtip-rounded qtip-shadow'
}
});
});
});
最后,我的页面:
<a hfer="#" tip-hero="Joan of Arc">Joan of Arc</a>
结果是一个很酷的工具提示,里面有一个 0!我检查了 admin-ajax.php,零来自:
// Require an action parameter
if ( empty( $_REQUEST['action'] ) )
die( '0' );
所以我认为我的操作调用有问题,但我真的不明白它是什么。
如有任何帮助,我们将不胜感激。
谢谢。
更改您的 ajax 以发送操作值:
data: {who: $(this).attr("tip-hero"),action: 'ajax_action'},