CODEWITHSUNDEEP
jquerywordpressjqvmap
jadle
jadle

Reputation: 147

JQVMaps in WordPress

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.

Upvotes: 1

Views: 1271

Answers (3)

brasofilo
brasofilo

Reputation: 26055

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>

Related:

Upvotes: 1

Hendrix
Hendrix

Reputation: 179

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>

Upvotes: 1

Hendrix
Hendrix

Reputation: 179

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

Upvotes: 0

Related Questions