Question

我正在开发一个amcharts wordpress插件，该插件将用于加载数据并显示商店的价格图表。我想使用弹出窗口显示图表。对于单个产品，一切都很好，但是在至少有10个产品的类别页面中，我想使用Ajax加载产品价格图表。我怎样才能做到这一点这是我的文件

1-chart_front.js

function sc_load_ajax_price_chart(product_id){
	//ajax section			
jQuery.ajax({
	type: "POST",   // Adding Post method
	// url: MyAjax.ajaxurl, // Including ajax file
	url: sc_woo_price_chart_front_Ajax.ajaxurl, // Including ajax file
	data: {
	"action": "load_price_data", 
	"product_id":product_id,
	}, // Sending data 
	
	success: function(data){ // Show returned data using the function.

		chart.dataProvider = data;
        chart.validateNow();
		// write("#chartdiv");
	}
});
//end ajax section
}

2-functions.php

function load_price_data($product_id){
    if(isset($_POST["product_id"])){
        $product_id = $_POST["product_id"];
    }
    global $wpdb;
    $table_name = $wpdb->prefix . "sc_price_chart_table";
    $results = $wpdb->get_results("SELECT * from $table_name WHERE product_id=$product_id ORDER BY date asc");
foreach($results as $result){
 // echo '{"year":"'.$result->date.'", "value":' .$result->price.' },';
 $value_code = $result->value_code;
 if($value_code == 'simple'){
     $title = get_the_title( $product_id );
 }else{ 

 $product = get_product($product_id);
     $available_variations = $product->get_available_variations();
    foreach($available_variations as $var){
        foreach( $var['attributes'] as $key => $value ){
            $taxonomy = str_replace('attribute_', '', $key );
            $taxonomy_label = get_taxonomy( $taxonomy )->labels->singular_name;
            $pro_title = get_the_title( $product_id);;
            $term_name = get_term_by( 'slug', $value, $taxonomy )->name;
            $term_id = get_term_by( 'slug', $value, $taxonomy )->term_id;
            if ($term_id == $value_code ){$myterm_name = $term_name;}
        }
    }
 $title = get_the_title( $product_id ).' - '.$myterm_name;
 }
 $date=date_create($result->date);
 $year= date_format($date,"Y");
 $month= date_format($date,"m");
 $day= date_format($date,"d");
 $persianDate = sc_gregorian_to_jalali($year,$month,$day); 
 $mydate =   $persianDate[0].'-'. $persianDate[1].'-'. $persianDate[2];
 echo '{ "date": "'.$mydate.'", "customer": "'.$title.'", "value": ' .$result->price.'},';
}
}
/* adding ajax handler to frontpage */
function sc_woo_price_chart_front_ajax_int(){
    wp_enqueue_script('sc_woo_price_chart_front', plugins_url( 'site/js/sc_woo_price_chart_front.js' , __FILE__ ) , array( 'jquery' ));
    // including ajax script in the plugin Myajax.ajaxurl
    wp_localize_script( 'sc_woo_price_chart_front', 'sc_woo_price_chart_front_Ajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php')));        
}
add_action( 'wp_enqueue_scripts', 'sc_woo_price_chart_front_ajax_int' );
/* end adding ajax handler  to frontpage*/

3-shortcode

    /* start ajax part to display in category mode */
function ajax_price_chart_btn_generator(){
    $options = get_option( 'sc_woo_settings' );
     // define variables
 $angle          =  isset($options['sc_woo_chart_date_angle']    ) ? $options['sc_woo_chart_date_angle']    : 30;
 $scroll_height  =  isset($options['sc_woo_text_scroll_height']  ) ? $options['sc_woo_text_scroll_height']  : 40;
 $marker_type    =  isset($options['sc_woo_chart_marker_type']   ) ? $options['sc_woo_chart_marker_type']   : 'square';
 $lineThickness  =  isset($options['sc_woo_lineThickness']       ) ? $options['sc_woo_lineThickness']       : 2;
 $axis_position  =  isset($options['sc_woo_chart_axis_position'] ) ? $options['sc_woo_chart_axis_position'] : 'right';
 $chart_template =  isset($options['sc_woo_chart_template']      ) ? $options['sc_woo_chart_template']      : 'default';
 $chart_height   =  isset($options['sc_woo_chart_height']        ) ? $options['sc_woo_chart_height']        : 300;

 // end define variables

    $chart_icon = $options['sc_woo_chart_icon'] ?: 1;
    $html ='
    <a class="sc_chart_btn" onclick="myFunction();sc_load_ajax_price_chart('.get_the_ID().')" title="نمودار قیمت">
    <img src="'.plugin_dir_url( __FILE__ ).'images/icons/'.$chart_icon.'.png" style="background:'.$options['sc_woo_chart_icon_background_color'].'"></a>';
    echo $html;
    require_once 'chart_assets_loader.php';
    require_once 'mychart.php';
    ?>








    <div class="sc_chart_popup" id="sc_chart_popup">
        <div class="popuptext" id="chart_popup">
            <div class="sc_popup_close" onclick="hide('chart_popup')">X</div>
<button onclick="">load chart</button>          
            <div id="chartdiv" class=" <?php echo $options['sc_woo_chart_template']; ?> <?php if($options['sc_woo_chart_mobile_hide']==1){echo 'sc_mobile_hide';}else{echo '';} ?> " ></div>
        </div>
    </div> 

<script>
// When the user clicks on div, open the sc_chart_popup
function myFunction() {
    var j = jQuery.noConflict();
    document.getElementById("sc_chart_popup").style.display='block';
    var sc_chart_popup = document.getElementById("chart_popup");
    //sc_chart_popup.classList.toggle("show");
    j('#chart_popup').addClass("show");

}

function hide(obj) {
   var j = jQuery.noConflict();
    var el = document.getElementById(obj);


        //el.parentNode.style.display='none';
        document.getElementById("sc_chart_popup").style.display='none';
       j('#chart_popup').removeClass("show");
}

</script> 
    <?php


}
/* end ajax part to display in category mode */

这是问题所在：当我使用这些代码时，仅显示第一个图表，当我调用ajax时，返回数据，但图表没有变化

Amcharts不适用于Ajax回调

0 个答案: