Avatar billede steen-h Mester
22. december 2015 - 16:42 Der er 4 kommentarer og
1 løsning

ajax kald i wordpress

Jeg har lavet en side med google charts som jeg er ved at flytte over på wordpress.
Jeg vil lave det om så data til google charts kommer med et ajax kald

Har fundet denne side som beskriver det med en side under admin
http://www.codetab.org/wordpress-plugin-development-tutorial/wordpress-chart-page/

Her er functionen som laver søjlerne
function drawStatsChart() {
    var jsonData = jQuery.ajax({
        type : 'POST',
        url : sos_chart.ajax_url,
        dataType : "json",
        data : {
            action : 'get-stats',
            _ajax_nonce : sos_chart.stats_nonce,
        },
        async : false
    }).responseText;
    console.log(jsonData);
    var data = new google.visualization.DataTable(jsonData);
    data.sort([ {
        column : 0
    } ]);

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.LineChart(document.getElementById('stats_chart'));
    var options = {       
        title : sos_chart.stats_title,
        width : 600,
        height : 400
    };
    chart.draw(data, options);
}


Her er kaldet som henter data
  function get_stats_summary_json () {
        // add cols to data

global $wpdb;
        $data = array();
        $data[ 'cols' ][] = array(
                'label' => __( 'Share On', 'sos-domain' ),
                'type' => 'date'
        );
        $data[ 'cols' ][] = array(
                'label' => __( 'Total', 'sos-domain' ),
                'type' => 'number',

        );
        $data[ 'cols' ][] = array(
                'label' => __( 'Kg', 'sos-domain' ),
                'type' => 'number',

        );

       
        // Find valgt vægt
        $bescale_returdata = $wpdb->get_results("SELECT * FROM veight_admin WHERE id=1;");
        // vælg hvilke data som hentes
        $bescale_where = $bescale_returdata[0]->tabel." WHERE dato > ".mktime(0, 0, 0, date("m",time()), 1, date("Y",time())-1);
        // hent vejedata and if no found then return just cols
        $bescale_veightlistsql = $wpdb->get_results("SELECT forandring, dato, id, kg FROM ".$bescale_where." ORDER BY dato ASC");
        if ( false == $bescale_veightlistsql ) {
            return json_encode( $data );
        }
       

        // from $bescale_veightlistsql create and add rows to data
      foreach($bescale_veightlistsql as $bescale_veightlist){
            $row = array();
              $year = date( 'Y', $bescale_veightlist->dato );
              // JSON months zero indexed, so -1
              $month = date( 'm', $bescale_veightlist->dato ) - 1;
              $day = date( 'd', $bescale_veightlist->dato );
            $row[][ 'v' ] = "Date($year,$month,$day)";
            $row[][ 'v' ] =$bescale_veightlist->forandring;
            $row[][ 'v' ] =$bescale_veightlist->kg;
          $data[ 'rows' ][][ 'c' ] = $row;
        }
       
        return json_encode( $data );
    }

Jeg kan ikke overskue hvad de har lavet,
hvordan kobler jeg det sammen i wordpress ?
Avatar billede steen-h Mester
22. december 2015 - 16:47 #1
Her er fra den gamle side, men der er kaldet lavet ved at læse en extern fil som læser data fra databasen.

Men så skal jeg lave databasekald uden om wordpress

function makeAjaxCall(x,y,id) {
      $.ajax({
              type: 'GET',
              url:'./php/data.php',
              data: 'id='+x+'&tabelid='+id,
              success: function(responseData) {
                        //  var arrayForGviz = eval("(" + responseData + ")");
                        var arrayForGviz = JSON.parse(responseData);
                        drawChart(arrayForGviz,y,'',1);
                      }, cache: false
        });

    }
Avatar billede steen-h Mester
22. december 2015 - 17:48 #2
Nu er det som jeg bruger ikke helt som det jeg fandt da jeg også bruger ChartWrapper, men her er hvor data leveres fra en javascript array

        var chart = new google.visualization.ChartWrapper({
          'chartType': 'ColumnChart',
          'containerId': 'chart',
          'dataTable': bescale_data,
          'options': {

Så det må være dette som skal tilføjes

  var jsonData = jQuery.ajax({
        type : 'POST',
        url : sos_chart.ajax_url,
        dataType : "json",
        data : {
            action : 'get-stats',
            _ajax_nonce : sos_chart.stats_nonce,
        },
        async : false
    }).responseText;
    console.log(jsonData);
    var data = new google.visualization.DataTable(jsonData);
Avatar billede steen-h Mester
29. december 2015 - 11:45 #3
Så har jeg fået det til at virke, det er lagt i et plugin


<?php


add_action( 'wp_enqueue_scripts', 'ajax_beescale_enqueue_scripts' );
function ajax_beescale_enqueue_scripts() {

    wp_enqueue_script( 'bee_enqueue', plugins_url( '/script.js', __FILE__ ), array('jquery'), '1.0', true );

    wp_localize_script( 'bee_enqueue', 'postbeescale', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
                'beescale_nonce' => wp_create_nonce( 'get-beescale-nonce' )
    ));

}


add_action( 'wp_ajax_nopriv_post_add_bee', 'post_add_bee' );
add_action( 'wp_ajax_post_add_bee', 'post_add_bee' );


function post_add_bee() {
  get_scale_data();
        die();
}


function get_scale_data() {
      // add cols to data
//if (! wp_verify_nonce($_POST['beescale_nonce'], 'get-beescale-nonce') ) //die("Security check");


global $wpdb;
        $data = array();
        $data[ 'cols' ][] = array(
                'label' => 'Dato',
                'type' => 'date'
        );
        $data[ 'cols' ][] = array(
                'label' => 'Total',
                'type' => 'number',

        );
        $data[ 'cols' ][] = array(
                'label' => 'Samled vægt',
                'type' => 'number',

        );

       
        // Find valgt vægt
        $bescale_returdata = $wpdb->get_results("SELECT * FROM veight_admin WHERE id=1;");
        // vælg hvilke data som hentes
        $bescale_where = $bescale_returdata[0]->tabel." WHERE dato > ".mktime(0, 0, 0, date("m",time()), 1, date("Y",time())-1);
        // hent vejedata and if no found then return just cols
        $bescale_veightlistsql = $wpdb->get_results("SELECT forandring, dato, id, kg FROM ".$bescale_where." ORDER BY dato ASC");
        if ( false == $bescale_veightlistsql ) {
            return json_encode( $data );
        }
       

        // from $bescale_veightlistsql create and add rows to data
      foreach($bescale_veightlistsql as $bescale_veightlist){
//echo $bescale_veightlist->dato."<br>";;
            $row = array();
              $year = date( 'Y', $bescale_veightlist->dato );
              // JSON months zero indexed, so -1
              $month = date( 'n', $bescale_veightlist->dato ) - 1;
              $day = date( 'j', $bescale_veightlist->dato );
            $row[][ 'v' ] = "Date($year,$month,$day)";
            $row[][ 'v' ] =$bescale_veightlist->forandring;
            $row[][ 'v' ] =$bescale_veightlist->kg;
          $data[ 'rows' ][][ 'c' ] = $row;
        }
       
        echo json_encode( $data );



}
Avatar billede steen-h Mester
29. december 2015 - 11:47 #4
Her er script.js

function beescale_func() {
//alert("Hej");

    var post_id = jQuery(this).data('id');
    jQuery.ajax({
        url : postbeescale.ajax_url,
        type : 'post',
        data : {
            action : 'post_add_bee',
            post_id : 'test_steen',
            beescale_nonce : postbeescale.beescale_nonce
        },
        success : function( response ) {
drawVisualization(response);
var img2 = document.getElementById('test_jason');
img2.innerHTML =response;

        }
    });

}
Avatar billede steen-h Mester
29. december 2015 - 11:55 #5
Her er hvor jeg udskriver diagrammet

google.setOnLoadCallback(drawVisualization(<?php get_scale_data()?>));


Og noget af functionen
function drawVisualization(data1) {


var data = new google.visualization.DataTable(data1);
  dashboard = new dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

Jeg bruger get_scale_data() til at levere data både når diagrammet tegnes fra start og når det opdateres med ajax

Ved ajax kald skal functionen afsluttes med et die derfor

function post_add_bee() {
  get_scale_data();
        die();
}

Det som jeg ikke har fået til at virke er
wp_verify_nonce
som sikre at ajax kaldet kommer fra min egen side
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester