2014-09-15 7 views
0

Я пытаюсь написать запрос AJAX в качестве плагина WordPress. Я изначально сделал запрос на внешний сервер без WP (где он работал нормально) просто для тестирования, потому что я совершенно новичок в разработке для WP. Затем я попытался использовать wp_localize_script и .ajaxurl в соответствии с WP-кодом, но единственный ответ, который я получаю, - это «0» от admin-ajax. Вот код плагина:Использование front-end AJAX в плагине WordPress

imap.php:

<?php 
/** 
* Plugin Name: JQVMap & ChartJS World Map 
* Author:  Jesse Dillman 
*/ 
add_action('wp_enqueue_scripts', 'enqueue_dependencies'); 

function enqueue_dependencies() 
{ 
    # Run only on given page 
    if(!is_page(229)) 
     return; 

    # Enqueue styles 
    wp_enqueue_style('jmap-css', plugins_url('/css/jqvmap.css', __FILE__)); 

    # Register dependencies files 
    wp_register_script('js', plugins_url('/js/jquery-1.7.2.min.js', __FILE__)); 
    wp_register_script('jmap-js', plugins_url('/js/jquery.vmap.js', __FILE__)); 
    wp_register_script('world-js', plugins_url('/js/jquery.vmap.world.js', __FILE__)); 
    wp_register_script('unregions-js', plugins_url('/js/jquery.vmap.un_regions.js', __FILE__)); 
    wp_register_script('regioncolors-js', plugins_url('/js/region_colors.js', __FILE__)); 
    wp_register_script('chart-js', plugins_url('/js/Chart.js', __FILE__)); 

    # Enqueue custom JS file along with dependencies 
    wp_enqueue_script( 
     'start-js', 
     plugins_url('/js/start.js', __FILE__), 
     array('js', 'jmap-js', 'world-js', 'unregions-js', 'regioncolors-js', 'chart-js'), // dependencies 
     false, 
     true 
    ); 

    wp_localize_script('start-js', 'get_data', array('ajaxurl' => admin_url('admin-ajax.php'))); 
} 


function get_chart_data(){ 
$region1Pie = array(50, '#ddd', 50, '#dc7d50'); 
$region2Pie = array(25, '#ddd', 75, '#7a9e89'); 
$region3Pie = array(75, '#ddd', 25, '#867e40'); 

$chartData = new stdClass(); 
$pieData = array(); 

// Swtich based on region 
switch($_REQUEST['region']) { 
    case 'China': 
    $pieArray = $region1Pie; 
    break; 
    case 'Canada': 
    $pieArray = $region2Pie; 
    break; 
    case 'Brazil': 
    $pieArray = $region3Pie; 
    break; 
} 

for($i=0; $i<count($pieArray); $i+=2) { 
    $pie= new stdClass(); 
    $pie->value = $pieArray[$i]; 
    $pie->color = $pieArray[$i+1]; 
    $pieData[] = $pie; 
} 

$chartData->pieData = $pieData; 
echo json_encode($chartData); 

die(); 
} 

add_action('wp_ajax_get_chart_data', 'get_chart_data'); 
add_action('wp_ajax_nopriv_get_chart_data', 'get_chart_data'); 
?> 

start.js:

// get pie chart canvas 
var pie= document.getElementById("pie").getContext("2d"); 


jQuery(document).ready(function() { 

    jQuery('#vmap').vectorMap({ 
     map: 'world_en', 
     backgroundColor: '#fff', 
     // more config options.... 
     onRegionClick: function(element, code, region) 
     { 
      $.ajax(get_data.ajaxurl, { 
       data: {region: region}, 
       action: 'get_chart_data', 
       dataType: 'json', 
       success: function(response) { 
        new Chart(pie).Doughnut(response.pieData, pieOptions); 
       } 
      }); 
     } 
    }); 
}); 

При правильной работе вне WP, это делает карту мира, которая отображает круговую диаграмму с использованием различные таблицы данных в зависимости от того, где пользователь нажал. Он использует ChartJS и JQVMaps. Опять же, я новичок в использовании AJAX в WordPress. Я использую localize_script неправильно, или есть еще одна проблема с тем, как я реализовал WP admin-ajax?

+0

Когда вы смотрите в '', вы видите более одной версии загрузки библиотеки jQuery? Довольно редко, что некоторые плагины или темы не загружают его. Вы можете просто создать конфликт, загрузив две версии. –

+0

Вышеупомянутый скрипт работает нормально, поскольку я запускал его, используя вызов AJAX для внешнего сервера без WP для тестирования. Я столкнулся с проблемой, когда я изменил URL-адрес AJAX на get_data.ajaxurl, добавил localize_script и добавил код add_action ('wp_ajax') в попытке запустить запрос через admin-ajax. –

+0

Проследили ли вы вызов через консоль браузера? Правильно ли указан URL? Правильны ли переменные GET? и т.д? Что возвращается в ответ? –

ответ

1

Избавиться от

action: 'get_chart_data', 

в вызове AJAX и добавить его к данным атрибутов, как так ...

data: {'region': region, 'action': 'get_chart_data'}, 

Это должно получить действие передается в WP, чтобы он мог подберитесь к действию wp_ajax_get_chart_data.

Смежные вопросы