Ajax와 앵커 태그를 사용하여 요소를 삭제하는 방법은 무엇입니까?

Question

스택 오버플로와 같은 태깅 시스템을 만들려고합니다. 그래서 모든 태그는 그 옆에 작은 x를 가지므로 사용자가 태그를 삭제하면 너무 동적으로 데이터베이스에서 삭제됩니다. 태그를 입력 한 사용자 만 삭제할 수 있습니다. 나는 X 용 앵커 태그를 사용하여 다음과 같이 요소를 삭제 할 PHP 스크립트에 Ajax를 사용하여 요청 보낸다 :

이

<?php 
    require_once("database_connection_handler.php"); 
    $x=$post->ID; 
    $i=0; 
    $select_query = "Select * from wp_tags inner join wp_posts_tags on wp_posts_tags.tag_id=wp_tags.id where wp_posts_tags.post_id='". $x . "'"; 
    $result = mysql_query($select_query); 
    $num=mysql_num_rows($result); 
    echo "</ul>"; 
    echoTagHTML(); 
    while ($i < $num) { 
     $tag=mysql_result($result,$i,"tag"); 
     $id=mysql_result($result,$i,"id"); 
     echo "<li>"; 
     tagLinks($tag,$id); 
      if(is_current_user()) 
      { 
      echo "<a href='javascript:void(0)' onclick='deleteTag($id);'>&nbsp x</a>"; 
      } 
      echo "</li>"; 
      $i++; 
}echo "</ul></div>"; 

?> 

이 문제를 처리하는 Ajax 코드는 다음과 같습니다

function deleteTag(str){ 
    if (str.length != 0){ 
      if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari 
       xmlhttp=new XMLHttpRequest();} 
      else{// code for IE6, IE5 
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} 
       xmlhttp.open("GET","links/livesearch.php?del="+str,true); 
       xmlhttp.send(); 
          } 
    else{return;} 
} 

을 PHP 스크립트는 다음과 같습니다 :

<?php 
$del=$_GET["del"]; 
ConnectToDB(); 
$delete_query="delete from wp_tags where id='".$del."'"; 
    if(!mysql_query($delete_query)) 
    { 
     echo "error while deleting"; 
    } 
mysql_close($con); 
?> 

저는 Ajax를 처음 사용했습니다. 사용자를 삭제할 링크를 클릭하면 아무 것도 삭제하지 않습니다. 데이터베이스에서 태그를 제거하거나 페이지에서 링크를 제거하지 않습니다. 내가 뭘 놓치고 있니? 어떤 도움을 주시면 감사하겠습니다. 감사.

Answer 1

당신은 질문 "jQuery를"태그 있음을 주목하고 HTML이 같은 것으로 가정 :

$(function() { 
    $("#tagsContainer").on('click', ".tagDelete", function() { 
     var $deleteButton = $(this).attr('disabled', true), 
      $wrapper = $deleteButton.closest(".tagWrapper"), 
      $tag = $wrapper.find('.tag'); 
     $.ajax({ 
      url: "links/livesearch.php" 
      data: { 
       action: 'tagdelete', 
       tag: $tag.text(), 
       //other params here, eg. to identify the user and the context of the deletion 
      }, 
      success: function(data, textStatus, jqXHR) { 
       $wrapper.remove(); 
      }, 
      error: function(jqXHR, textStatus, errorThrown) { 
       $deleteButton.attr('disabled', false), 
       //display error message? 
      } 
     }); 
    }); 
}); 

기본적으로이 자리에두고 :

이

<div id="tagsContainer"> 
    <div class="tagWrapper"> 
     <a href="..." class="tag">php</a> 
     <button class="tagDelete">X</button> 
    </div> 
    <div class="tagWrapper"> 
     <a href="..." class="tag">javascript</a> 
     <button class="tagDelete">X</button> 
    </div> 
</div> 

자바 스크립트는이 같은 것 모든 .deleteTag 버튼을 #tagsContainer 안에 응답하는 처리기는 ajax 호출을 실행하고 서버로부터 성공적인 응답을 받으면 DOM에서 태그 (및 해당 .deleteTag 버튼)를 제거합니다.

여기에 많은 추측이 있으므로 아직 수행해야 할 작업이 남아 있으며 서버 측 스크립트를 디버깅해야합니다.