WordPress 페이지의 특정 AJAX 데이터에 연결

Question

내 WordPress 웹 사이트에서 AJAX를 사용하여 클릭 한 영역에 따라 특정 게시물을로드하는 세계지도가있는 플러그인을 작성하고 있습니다. 나는 이미 표시된 지역의 게시물이있는지도 페이지를 가리키는 링크를 메인 네비게이션에 포함시키고 싶다. (예 : "Middle East"라는 링크는 중동 포스트가 이미 표시된지도 페이지로 안내 할 것이다.) location.hash를 사용하려고하는데 어떻게 작동하는지 완전히 이해하지 못합니다.

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'); 

는 그리고 내 링크는 다음과 같습니다 :

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

내가 링크를 클릭하면 , 그것은지도 페이지에 나를 데려 간다. 그러나 어떤 표시도없이 그것의 디폴트 상태에있다. 지도를 클릭하면 URL에 해시 값이 표시되지만 실제로 페이지 상태에 영향을주지 않는 것 같습니다. 이 문제는 내가 링크를 사용하여 문제가되는 location.hash를 사용하고있는 것과 어떻게 다른가?

Answer 1

각 페이지로드시 해시 값을 확인하지 않는 것 같습니다. 지도가 클릭되었는지 확인하는 중입니다.

해시에서 지역을 표시하도록지도를 얻으려면지도 플러그인의 기본 제공 'selectedRegion'매개 변수를 사용해야합니다.

예 :

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; 
        } 
       }); 
      } 
     }); 
    });