Problem with running javascript in a shortcode

Question

I am trying to create this plugin for my site that will allow create short codes to pull data from the iTunes Search SDK. I already have the iTunes Search SDK javascript plugin working that pulls the data from the search SDK but I am running into an issue with placing the required javascript into the shortcode.

The code I have looks like this:

<?php
add_action('init', 'peb_init');

function peb_init() {
    add_action('admin_head', 'peb_admin_head');
}

function peb_admin_head() {
    echo '<script type="text/javascript">';
    require_once('https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js');
    require_once('js.php');
    echo '</script>';
}


add_filter('widget_text', 'do_shortcode');

add_shortcode('appPrice', 'appPrice');
function appPrice($atts) 
{
    $atts = shortcode_atts(
        array(
            'id' => '',
            'class' => '',
            'container' => ''
    ), $atts);
    return '

    <script type="text/javascript">
    $(document).ready(function() {
        var url = 'iLookup.php';

            query = $id;

            $.getJSON(url, {id:query}, function(json) {
            $('#results').html('Price: '+json.results[0].price+'<br/>');
            });

    });
</script>

    ';


}

If anyone has any ideas as to why this doesn't work I would be very appreciative. If there is not enough info given I will be glad to provide more.

NOTE: There is no error message it just doesn't work. I have tried using the console log and it still doesn't work. The rest of the plugin works fine with the exception of the script.

Answer 1

jQuery is running in compatibility mode in WP. Instead of …

$(document).ready(function() {}

… use …

jQuery(document).ready(function($) {}

Answer 2

I'm guessing it's because you didn't escape the single quotes. Try using output buffering, the code is more readable:

function appPrice($atts) 
{
    extract(shortcode_atts(
        array(
            'id' => '',
            'class' => '',
            'container' => ''
    ), $atts));
    ob_start();
    ?>

    <script type="text/javascript">
    $(document).ready(function() {
        var url = 'iLookup.php';

            query = <?php echo $id; ?>;

            $.getJSON(url, {id:query}, function(json) {
            $('#results').html('Price: '+json.results[0].price+'<br/>');
            });

    });
</script>

    <?php
    return ob_get_clean();
}

also the way you're loading jquery is weird. why not:

 wp_deregister_script('jquery');
 wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"), false, '1.5.0');
 wp_enqueue_script('jquery');

?

Answer 3

There's several major things wrong here.

1 - jquery 1.5.0 is incompatible with previous versions. Therefore it's not making it into WordPress 3.1 at present. You should stick with 1.4.2, which is what comes with WordPress.

2 - Loading scripts into the page that way is simply incorrect and weird. Try this instead:

add_action('admin_enqueue_scripts', 'peb_enqueue'); 
function peb_enqueue() {
    wp_enqueue_script('jquery'); 
}

add_action('admin_head', 'peb_admin_head'); 
function peb_admin_head() {
    echo '<script type="text/javascript">';
    require_once('js.php');
    echo '</script>'; 
}

3 - All your jquery code needs to use "jQuery" instead of "$". Or, you need to use this bit of code:

jQuery(document).ready(function($) {
    // $() will work as an alias for jQuery() inside of this function
});

4 - Including PHP variables inside strings in PHP need to use double-quotes. Single-quoted strings do not get evaluated.

5 - Your basic JSON call is flawed, because you're calling just "iLookup.php". You have no idea what the URL is, so you can't use a simple relative URL. The URL could be example.com or example.com/blog/2010/single-post-name. Where is this iLookup.php file actually located?

6 - If you're using AJAX type requests like this, you should use the built in WordPress mechanisms to do this. WP allows you to handle AJAX requests without having a separate file to call upon. Just put your PHP into the main code, in a function, and then hook that function to your own type of wp_ajax_* handler. More info here: http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Administration_Side

Answer 4

Try this and see if you get any further..

add_action('admin_init', 'peb_init');
function peb_init() {
    add_action('admin_head', 'peb_admin_head');
}
function peb_admin_head() {
    echo '<script type="text/javascript">';
    require_once('js.php');
    echo '</script>';
}
add_filter('widget_text', 'do_shortcode');

add_shortcode('appPrice', 'appPrice');
function appPrice($atts) 
{
    $atts = shortcode_atts( 
        array(
            'id' => '',
            'class' => '',
            'container' => ''
        ), 
        $atts 
    );
    return "
    <script type='text/javascript'>
    jQuery(document).ready(function($) {
        var url = 'iLookup.php';
        query = $id;

        $.getJSON(url, {id:query}, function(json) {
            $('#results').html('Price: '+json.results[0].price+'<br/>');
        });
    });
    </script>
    ";
}

What's inside the js.php file? Echo statements outputting more JS?

NOTE: Your existing code didn't concatenate when assigning $id to query(so it was treated literally).