JQVMaps in WordPress

Question

I'm using JQVMaps to render a map in a WordPress site. Testing the code outside of WordPress, everything runs perfectly. When I added it to WordPress I got this console error:

[Error] TypeError: 'undefined' is not a function (evaluating 'jQuery('#vmap').vectorMap')

Here is the code:

header.php:

    if (is_page(2)){ ?>
        <link href="jqvmap.css" media="screen" rel="stylesheet" type="text/css" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/jquery.vmap.js" type="text/javascript"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/jquery.vmap.world.js" type="text/javascript"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/jquery.vmap.un_regions.js" type="text/javascript"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/Chart.js" type="text/javascript"></script>


    <?php }?>

    <?php wp_head(); ?>

footer.php:

if (is_page(2)){ ?>
        <script type="text/javascript">
            // pie chart options
            var pieOptions = {
                segmentShowStroke : true,
                animateScale : false
            }

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

            jQuery(document).ready(function() { //this is where the error is
                jQuery('#vmap').vectorMap({
                    map: 'world_en',
                    backgroundColor: '#fff',
                    borderColor: '#bbb',
                    borderOpacity: 1,
                    borderWidth: .2,
                    color: '#bbb',
                    colors: colored_regions,
                    hoverOpacity: 0.8,
                    selectedColor: '#666666',
                    enableZoom: false,
                    showTooltip: false,
                    onRegionOver : function (element, code, region)
                    {
                        highlightRegionOfCountry(code);
                    },
                    onRegionOut : function (element, code, region)
                    {
                        unhighlightRegionOfCountry(code);
                    },
                    onRegionClick: function(element, code, region)
                    {
                        highlightRegionOfCountry(code);
                        $.ajax('/get_chart_data.php', {
                            data: {region: region},
                            dataType: 'json',
                            success: function(response) {
                                new Chart(pie).Doughnut(response.pieData, pieOptions);
                            }
                        });
                    }   
                });
            });
        </script>

    <?php }?>

And I have #vmap and #pie in the content-page.php file. I've already tried several jQuery.noConflict(); solutions, including adding $ into the ready(function($) and adding the noConflict function right after my script tag. Could it still be an issue with how WordPress loads jQuery or is there another problem? You can find the site here. Thanks.

score 1 · Accepted Answer · answered Sep 08 '14 at 22:34

1

Search your code the wp_head(); and place your code after:

<?php wp_head(); ?>
<link href="<?php bloginfo('stylesheet_directory'); ?>/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.world.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.un_regions.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/Chart.js"></script>

answered Sep 08 '14 at 22:34

Hendrix

179
10

The jQuery Map works great with this solution, unfortunately all of the other widgets are now broken. At least that tells me that the problem is indeed with WP's jQuery. Any idea how to fix the issue without overriding my other plugins? – jadle Sep 09 '14 at 13:12
I moved all of the HTML resource references to footer.php and wrapped it all within the if(is_page()). It is no longer interfering with the other plugins. That doesn't seem like best practice though. Is there a better solution? – jadle Sep 09 '14 at 15:55

score 1 · Answer 2 · edited May 23 '17 at 12:21

It's better to add this as a plugin, so when changing themes, the needed changes are minimal or even zero.

And the correct way is to enqueue the styles/scripts, so as to avoid conflicts with other plugins. Also, jQuery should not be loaded from external sources, always use the bundled version that ships with WordPress, this avoids conflicts as well (a whole lot of them).

This is a simplified version of your code. I've removed files not available, and vars/functions referenced but not included in your sample code.

<?php
/**
 * Plugin Name: (SO) JQVMap
 * Plugin URI:  https://stackoverflow.com/a/25780694/1287812
 * Author:      brasofilo
 */
add_action( 'wp_enqueue_scripts', 'so_25725356_enqueue' );

function so_25725356_enqueue()
{
    # Run only on given page
    if( !is_page(2) )
        return;

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

    # Register dependencies files
    wp_register_script( 'jmap-js', plugins_url( '/js/jquery.vmap.js', __FILE__ ) );
    wp_register_script( 'world-js', plugins_url( '/js/maps/jquery.vmap.world.js', __FILE__ ) );

    # Enqueue custom JS file along with dependencies
    wp_enqueue_script( 
        'start-js', 
        plugins_url( '/js/start.js', __FILE__ ), 
        array( 'jquery', 'jmap-js', 'world-js' ), // dependencies
        false, // version
        true   // will load start-js on footer, the rest goes on header
    );
}

And the file start.js:

jQuery(document).ready(function($) {
    $('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#fff',
        borderColor: '#bbb',
        borderOpacity: 1,
        borderWidth: .2,
        color: '#bbb',
        //colors: colored_regions,
        hoverOpacity: 0.8,
        selectedColor: '#666666',
        enableZoom: false,
        showTooltip: true,
        onRegionOver : function (element, code, region){},
        onRegionOut : function (element, code, region) {},
        onRegionClick: function(element, code, region)
        {
            console.log(region);
        }   
    }); 
});

And the page with ID #2 contains:

<div id="vmap" style="width: 600px; height: 400px;"></div>

JQVMap region Click Error (fix a bug on jQvMap)
wp_localize_script() (pass PHP vars to enqueued JS file)

Thanks for your help. Unfortunately, writing this as a plugin is beyond my skill level. At the moment, I'm trying to get the AJAX request running with admin-ajax.php and moving the requested php (get_chart_data.php) into the functions.php file. I've read that this is a somewhat more acceptable way to run AJAX in WordPress. Do you mind looking at what I have along these lines? I can post it as a new question or send it to you. — jadle, Sep 12 '14 at 16:11
I guess I'm not sure how console.log(region) should work then. Is that where I should run my AJAX request? — jadle, Sep 12 '14 at 18:14
Positive. For example, using `code` to do an Ajax request for the country code. — brasofilo, Sep 12 '14 at 18:16
So I won't need the console.log() at all? And I will still be able to make the AJAX request using admin-ajax.php? — jadle, Sep 12 '14 at 18:22
That's for debugging purposes, nothing is the same after one starts to using it: http://stackoverflow.com/questions/4539253/what-is-console-log ;) — brasofilo, Sep 12 '14 at 18:26
Sorry for spamming you with questions, but how would I run this plugin in the template file? — jadle, Sep 12 '14 at 18:37

score 0 · Answer 3 · answered Sep 08 '14 at 17:31

I think the problem lies in the path of your javascripts

    <link href="<?php bloginfo('stylesheet_directory'); ?>/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.js" type="text/javascript"></script>
    <script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.world.js" type="text/javascript"></script>
    <script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.un_regions.js" type="text/javascript"></script>
    <script src="<?php bloginfo('stylesheet_directory'); ?>/Chart.js"></script>

Remember to upload those files to your current theme ..

    wp-content/theme/TU_THEME

This was partially copied from the browser, but I am using bloginfo pathing. I've updated the question to better reflect the actual code. Thanks for helping improve the question. — jadle, Sep 08 '14 at 17:51

JQVMaps in WordPress

3 Answers3