jQuery/AJAX 검색 결과 추가 - 하나의 결과 만 지우려면 어떻게합니까?

Question

저는 해결할 수없는 문제가 있습니다. 코드는 훌륭하게 작동하지만 더 많은 기능이 필요합니다.

저는 한 번에 하나씩 검색 결과를 반환하기 위해 jQuery를 사용합니다 (페이지를 다시로드하지 않고 여러 번 검색). 그러나 사용자가 페이지를 떠나지 않고 다른 결과를 잃지 않고 검색 결과를 닫을 수 있어야합니다. 결과를 얻을 수에 결과를 반환 : 검색

ajax.php에 대한 입력 ISBN 번호 :

이 코드는

1. isbn.tpl 구성
2. ajax.tpl : 의 결과를 표시합니다. isbn.tpl

나는이 코드가 ajax.tpl 안에 있어야한다고 확신한다. 개별 검색 결과를 닫을 모든 행에 "X"가 있어야합니다. 나머지 결과는 유지됩니다. 따라서 ajax.php는 "isbn_"로 시작하는 임의의 문자열을 생성합니다. 상황에서 ajax.tpl을 사용합니다. 그런 다음 코드는 해당 고유 ID로 모든 것을 닫을 수 있습니다.

그러나이 방법이 이것이 최선의 방법인지 여부는 알 수 없으며이를 수행하는 방법을 모르겠습니다.

isbn.tpl : (절단)

<script src="http://code.jquery.com/jquery-1.5.js"></script> 
<form method="post" action="ajax.php" name="searchISBN" id="searchForm"> 
    <input type="text" name="isbn" placeholder="Search..." /> 
    <input class="myaccount" id="doSearch" name="doSearch" type="submit" value="Search" /> 
</form> 

<form name="buyback" method="post" action="buy.php"> 
     <table id="result" class="search"> 
      <tr><td> 
       <strong>Title</strong> 
      </td><td> 
       <strong>Author</strong> 
      </td><td> 
       <strong>ISBN</strong> 
      </td><td> 
       <strong>Price</strong> 
      </td><td> 
       <strong>Wholesale</strong> 
      </td> 
      </tr> 
     </table> 

     <br><br> 

     <input name="doCalc" type="submit" value="Calculate"> 
     &nbsp; 
     <input name="doCancel" type="submit" value="Cancel"> 

</form> 

{literal} 
<script> 
// attach a submit handler to the form 
$("#searchForm").submit(function(event) { 
// stop form from submitting normally 
event.preventDefault(); 

// get some values from elements on the page: 
var $form = $(this), 
$term_input = $form.find('input[name="isbn"]'), 
term = $term_input.val(), 
//term = "isbn", 
url = $form.attr('action'); 
    $.post(url, { doSearch: "Search", isbn: term } , 
     function(data) { 
      var content = $(data); 

      $("#result").append(content); 
     } 
    ); 
    $term_input.val(''); 
}); 

</script> 
{/literal} 

ajax.php :

/** 
* Create random string for id="$string" in ajax 
* This way, ajax can remove individual search results 
* without reloading the page. 
**/ 
$n = rand(10e16, 10e20); 
$string = base_convert($n, 10, 36); 
$string = "isbn_" . $string; 


$smarty->assign('doSearch', $doSearch); 
$smarty->assign('details', $details); 
$smarty->assign('price', $price); 
$smarty->assign('wholesale', $wholesale); 
$smarty->assign('userWhole', $userWhole); 
$smarty->assign('userPrice', $userPrice); 
$smarty->assign('isbn', $isbn); 
$smarty->assign('page', $page); 
$smarty->assign('rate', $rate); 
$smarty->assign('wrate', $wrate); 
$smarty->assign('title', $title); 
$smarty->assign('author', $author); 
$smarty->assign('msg', $msg); 
$smarty->assign('string', $string); 
$smarty->display('ajax.tpl'); 

ajax.tpl :

{if $doSearch == "Search"} 
     {if $price != NULL} 
      <tr class="{$string}"><td> 
       {$title} 
      </td><td> 
       {$author} 
      </td><td> 
       {$isbn} 
      </td><td> 
       <input type="text" name="{$isbn}" size="3" value="{$userPrice}"><br> 
      </td><td> 
       {$userWhole} 
      </td></tr> 
     {/if} 
{/if} 

가 어떠한 도움을 주셔서 감사합니다!

Answer 1

CSS 클래스 이름 (및/또는 ID)을 사용하면 데이터를 쉽게 식별 할 수 있습니다.

그런 다음 jQuery를 사용하여 원하지 않는 항목을 숨길 수 있습니다.

요소에 "isbn_xxxxxx"클래스가있는 경우 (예 : TR)이를 제거하거나 $("isbn_xxxxxx").hide()으로 숨길 수 있습니다.

이벤트를 연결하는 데는 여러 가지 방법이 있지만 onclick 이벤트로 쉽게 배치 할 수 있습니다.

클래스 이름을 사용하면 항목을 그룹화 할 수 있다는 장점이 있습니다. 다른 목적을 위해 여러 클래스를 가질 수 있으며 jQuery는 작은 코드로 모든 것을 쉽게 조작 할 수 있습니다.

편집 :

<a href="javascript://" onclick="$('.{$string}').remove()">X</a> 

Answer 2

시도는 아약스에 추가.TPL :

JQuery와에 대한 다음

<td><a href="javascript:" class="close_search">Close Search</a></td> 

:

$('#result').delegate('.close_search', 'click', function() { 
    $(this).closest('tr').hide(); 
});