Wordpress에서 Ajax를 사용하여 특정 텍스트를 DIV로 출력

Ajax를 처음 사용합니다. 많은 시련을 통해 오류가 발생했습니다. 기본적인 예가 있으며 확장하려고합니다.Wordpress에서 Ajax를 사용하여 특정 텍스트를 DIV로 출력

저는 미국의 이미지지도가있는 사용자 설정 Wordpress 페이지에서 작업하고 있으며 각 상태에 대한 정보가 포함 된 div를 작성하려면 Ajax를 사용해야합니다. 내가 정보를 얻기 위해 찾고 있어요

function getStateInfo(name) 
    { 
     var name = this.name; 
     jQuery.ajax({ 
     type: 'POST', 
     url: '/wp-admin/admin-ajax.php', 
    data: { 
     action: name, // the PHP function to run 
    }, 
    success: function(data, textStatus, XMLHttpRequest) { 
     jQuery('#infoDiv').html(''); // empty an element 
     jQuery('#infoDiv').append(data); // put our list of links into it 
    }, 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
     if(typeof console === "undefined") { 
      console = { 
       log: function() { }, 
       debug: function() { }, 
      }; 
     } 
     if (XMLHttpRequest.status == 404) { 
      console.log('Element not found.'); 
     } else { 
      console.log('Error: ' + errorThrown); 
     } 
    } 
});}

: 여기 href="javascript:getStateInfo('newyork')"

내 JS 기능입니다 : 사용자가 뉴욕으로 정의지도 영역을 클릭하면

반드시 href처럼 트리거 아약스 내 functions.php 파일에 내가 그래서

function newyork() 
{ 
    echo 'this is info on new york state'; 
    die(); 
} 
add_action('wp_ajax_nopriv_newyork', 'newyork'); 
add_action('wp_ajax_newyork', 'newyork');

물론이 코드는 작동하지 않습니다, 나는 영장해야하는지 난 잘 모르겠어요 각 상태에 대해 add_action의 50 가지 기능을 제공합니다. 누구든지 이것을 구현할 수있는 더 좋은 방법을 알고 있다면,이 방법을 가장 효율적으로 구현하는 방법을 배우고 자합니다.

출처

2014-11-06 adriandegar

이것은 실제로 매우 간단하며이 경우 전혀 aJax를 사용할 필요조차 없습니다.

그러나 당신은 당신의 JS 당신은 또한 새로운 데이터를 추가하기 전에 #display 요소의 내부의 현재 데이터를 삭제하는 $('#display').empty();에 추가 할 수 있습니다이

$('.state').on('click', function(){ 
    var state = $(this).val(); 
    $('#display').append(state); 
});

처럼 보일 수있는지도의 영역을 정의합니다. 여기

은 어떤 상태에 따라 정보를 표시하기 위해 작성할 수 편집 할 수있는 코드가 당신이 그것을

$('.state').on('click', function(){ 
    var state = $(this).val(); 
    $.ajax({ 
     type: "POST", 
     url: 'goes here', 
     data: {state : state}, 
     success: function(displayState){ 
      $('#display').html(displayState); 
     } 
    )}; 
});

당신이로드 페이지에 원하는 텍스트와 페이지를로드하는 것입니다 당신이 클릭했습니다.

출처

2014-11-06 17:53:15

답장을 보내 주셔서 감사합니다. 이것은 훨씬 간단합니다. 스타일 시트 uri 디렉토리의 파일에서 자바 스크립트 추가 텍스트를 사용하려면 어떻게 작성해야합니까? – adriandegar

아약스를 추가하고 URL을 #display 요소로로드 할 파일의 위치로 설정하면됩니다. 아약스가 위의 코드로 어떻게 보이는지에 대한 간단한 예제를 작성하십시오. –

답변이 업데이트되었습니다. 여기에서 당신이 선택한 상태를 보내는 파일과 가장 좋은 방법은 PHP로 빌드하고 상태에 대한 switch 문을 사용하는 것입니다 (if/else 문을 사용하면 코드의 쓰레기가 될 수 있습니다). –

Wordpress에서 Ajax를 사용하여 특정 텍스트를 DIV로 출력

답변

관련 문제