Linking to specific AJAX data on WordPress page

Question

On my WordPress website, I'm writing a plugin with a world map that loads a particular post depending on what region is clicked using AJAX. I'd like to include links within the main navigation that point to the map page with a region's post already displayed (ex: the link titled "Middle East" would direct the user to the map page with the Middle East post already displayed). I'm trying to use location.hash but I don't totally understand how it works. Here is my code:

start.js:

jQuery(document).ready(function() {

    // Added code based on jetlej's answer
    jQuery('#vmap').ready( function(event, code, region) {
        $.ajax(get_data.ajaxurl, {
            data: {region: region, 'action': 'get_post_data'},
            dataType: 'json',
                success: function(response) {
                    $("#post").html(response);
                    location.hash = region;
                }
        });
    });

    jQuery('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#fff',
        // more map config options...
        onRegionClick: function(element, code, region)
        {
            if (location.hash) {
                location.hash.replace("#","")+".html"
            }

            $.ajax(get_data.ajaxurl, {
                data: {region: region, 'action': 'get_post_data'},
                dataType: 'json',
                    success: function(response) {
                        $("#post").html(response);
                        location.hash = region;
                }
            });

        }  
    });
});

index.php:

class Post{
    function get_post( $ID ){
        $html = '';
        $post = get_post( $ID );
        if( $post ) {
            $html = $post->post_title;
            $html .= wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
            $html .= $post->post_content;
        }
        return $html;
    }
}

function get_post_data(){

    $post = new Post();
    $result = '';

      // Swtich based on region
      switch($_REQUEST['region']) {
        //Europe
        case 'Russia':
        case 'Albania':
            $result = $post->get_post( 405 );
          break;

        //Africa
        case 'Congo':
        case 'Nigeria':
            $result = $post->get_post( 388 );
          break;

      echo json_encode($result);
      die();
}

add_action('wp_ajax_get_post_data', 'get_post_data');
add_action('wp_ajax_nopriv_get_post_data', 'get_post_data');

And my links look like this:

<a href="http://example.com/where-we-serve/#Russia">Europe</a>

When I click the link, it takes me to the map page but it's in its default state with no posts displayed. I'm getting the hash values in the URL when I click the map, but they don't seem to actually have any effect on the state of the page. Is this an issue with how I'm using location.hash, an issue with the link, or is this just the wrong approach?

jetlej · Accepted Answer · 2014-10-01 22:10:54Z

1

You don't seem to be checking for the hash value on each page load. You're only checking if the map is clicked.

For getting the map to show the region from the hash, you just need to use your map plugin's built-in 'selectedRegion' parameter.

Eg.

    jQuery(document).ready(function() {

        region = null;
        // If there is a hash, then grab it and update the page to reflect that region
        if(location.hash){

            // Remove the '#' from the hash
            region = location.hash.split('#')[1];

            // Update #post with the region post info
            $.ajax(get_data.ajaxurl, {
                data: {region: region, 'action': 'get_post_data'},
                dataType: 'json',
                success: function(response) {
                    $("#post").html(response);
                }
            });    

        }

        jQuery('#vmap').vectorMap({
            map: 'world_en',
            backgroundColor: '#fff',
            // Set the pre-selected to region to that hash, or null if there is no hash
            selectedRegion: region,
            onRegionClick: function(element, code, region){
                if (location.hash) {
                    location.hash.replace("#","")+".html"
                }

                $.ajax(get_data.ajaxurl, {
                    data: {region: region, 'action': 'get_post_data'},
                    dataType: 'json',
                    success: function(response) {
                        $("#post").html(response);
                        location.hash = region;
                    }
                });
            }  
        });
    });

edited Oct 1, 2014 at 22:10

answered Sep 28, 2014 at 6:39

jetlej

3,3926 gold badges33 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

jadle Over a year ago

Would you mind providing an example of what the function might look like?

jetlej Over a year ago

Does it currently work correctly if you click on a location on the map?

jetlej Over a year ago

Just edited the answer :) All you need to do is replace that first code block you included with what I pasted in. You just need to figure out how to grab the region variable from the map. Should be in the documentation of the plugin that you're using!

jetlej Over a year ago

Ah okay now I understand. I just updated the code, so you should be able to just copy/paste that in and have it work.

jetlej Over a year ago

So glad it worked! Have fun with your continual exploration of jQuery. It only gets more enjoyable as you understand it more.

|

Collectives™ on Stack Overflow

Linking to specific AJAX data on WordPress page

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related