0

I am trying to pass my php array to jQuery array but I am having this error on chrome console Uncaught SyntaxError: Unexpected token <

functions.php

/*Call Jquery for dropdowns*/
function mytheme_custom_scripts(){
    if ( is_page('Support')) {
            $scriptSrc = get_stylesheet_directory_uri() . '/js/freshdeskdata.js';
            wp_enqueue_script( 'myhandle', $scriptSrc , array(), '1.0',  false );
    }
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_scripts' );
/*End - Jquery*/    

add_filter('wpcf7_form_tag_data_option', function($n, $options, $args){

        ...

        // Category
        if (in_array('category.provider', $options)){

            ...      

            // Getting results
            $result = curl_exec($ch); // Getting jSON result string

            curl_close($ch);

            $data = json_decode($result, true);
            global $choice; // This is my array
            $choice = $data[0]['choices'];
            ksort($choice);

        return array_keys($choice);
        }

        // default - do not apply any changes within the options
        return null;
    }, 10, 3);

/js/freshdeskdata.js

jQuery(function ($) { 
  $(document).ready(function() {  
    $("#main-category").on('change', function() {
     var arrayFromPHP = <?php echo json_encode($choice); ?>;
     var $el = $("#sub-category");
     $el.empty();
     alert("arrayFromPHP");
    });
  });
});
2
  • You'd need to wrap your <?php echo json_encode($choice); ?> bit in quote marks, but even that, I suspect, won't work the way you want it to. WordPress allows you to pass data from PHP to Javascript, but you need to use wp_localize_script() to do it properly.
    – Pat J
    Oct 26, 2017 at 21:21
  • 2
    The "echo" is in a JavaScript file where PHP doesn't apply. Use wp_localize_script as said Pat J.
    – mmm
    Oct 26, 2017 at 21:36

1 Answer 1

0

To change choices depending on what an user selected in another input/select, you need to use the WP AJAX API.

In your functions.php, use wp_localize_script() to get AJAX url available on front-end and define an AJAX action callback

function mytheme_custom_scripts() {
    if ( is_page('Support') ) {
        $scriptSrc = get_stylesheet_directory_uri() . '/js/freshdeskdata.js';
        wp_enqueue_script( 'myhandle', $scriptSrc , array(), '1.0',  false );
        wp_localize_script( 'myhandle', 'mydata', array( 'ajaxurl' => admin_url('admin-ajax.php') ) );
    }
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_scripts' );

function get_choices() {
    $main_category = $_POST['main_category'];
    $choices = []; // todo: get choices here
    wp_send_json_success($choices); // send data with success code and die
}
add_action('wp_ajax_get_choices', 'get_choices'); //back-end
add_action('wp_ajax_nopriv_get_choices', 'get_choices'); //front-end

Then in your script make an AJAX call to get the choices

jQuery(function ($) {
    $(document).ready(function() {  
        $("#main-category").on('change', function() {
            $.post(mydata.ajaxurl, { // mydata has been created by the wp_localize_script function
                action: 'get_choices',
                main_category: $("#main-category").val()
            }, function (response) {
                console.log(response)
                // todo: display new choices
            })
        });
    });
});
3
  • Thank you for the solution, but how do you pass the array? I would like to alert array content on #main-category change for testing?
    – C.Yasa
    Oct 27, 2017 at 14:43
  • The function wp_send_json_success($choices) send your array as json to the success callback of $.post. The response object should be something like { success: true, data: [your_array] }. You can then use response.data to do whatever you like with it.
    – 86Dev
    Oct 28, 2017 at 0:30
  • Another point to mention : in wp_enqueue_script the third argument is used to declare dependencies for the registered script. Your script use jQuery so this third argument should be array( 'jquery' ) to be sure your script is loaded after jQuery. To get a full list of registered scripts have a look at global $wp_scripts;.
    – 86Dev
    Oct 28, 2017 at 0:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.