jQuery / AJAX追加搜索结果 - 如何只清除一个?

时间:2011-03-11 22:40:25

标签: php jquery ajax api

我编写了一些jquery& AJAX调用我所做的PHP函数,获取一些API数据并带来它而不刷新页面。它会附加,因此您可以进行多次搜索而不会丢失结果。

我现在需要做的是,我想让用户能够改变他对任何一个结果的看法。也许每排末尾有一点“X”。他们点击“X”,那个特定的结果就消失了。

我用谷歌搜索了这个,但我不知道我在找什么。请告诉我正确的方向吗?

这就是我所拥有的,所以你知道我在寻找什么:

<script src="http://code.jquery.com/jquery-1.5.js"></script>
<form method="post" action="ajax.php" 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="isbn.php">
        <table id="result" class="myaccount" border=0 cellspacing=5 cellpadding=4>
                <tr><td>
                <strong>ISBN:</strong>
            </td><td>
                <strong>Price:</strong>
            </td>{if $userlevel == 5}<td>
                <strong>Full FCB Price</strong>
            </td>{/if}          
            </tr>
        </table>
<input name="doBuy" type="submit" value="Buy"><br>
</form>

<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 = $form.find( 'input[name="isbn"]' ).val(),
//term = "isbn",
url = $form.attr( 'action' );
    $.post( url, { doSearch: "Search", isbn: term } ,
        function( data ) {
            var content = $( data );
          $( "#result" ).append( content );
      }
    );
});
</script>

修改 是的,它只是以这种格式返回数据:

<tr><td>
    {$isbn}
    <INPUT TYPE=hidden NAME="buy_isbn" VALUE="{$isbn}">
</td><td>
    {$userPrice}
    <INPUT TYPE=hidden NAME="buy_price" VALUE="{$userPrice}">
</td></tr>

1 个答案:

答案 0 :(得分:1)

这实际上取决于ajax调用返回的html类型。但你可以连接一个.live()事件,删除你需要删除的东西。

$('.removeItem').live('click', function(e) {
    // remove whatever you want. maybe the previous element?
    $(this).closest('tr').remove();
});

// clicking that link will remove everything returned by the ajax.php call
var content = $(data);
content.append("<a class='removeItem'>X</a>");
$("#result").append(content);

或者您可以将锚点添加到由ajax.php文件生成的结果中。

编辑:

您可以使用直播活动并修改您的html:

<tr><td>
    {$isbn}
    <INPUT TYPE=hidden NAME="buy_isbn" VALUE="{$isbn}">
</td><td>
    {$userPrice}
    <INPUT TYPE=hidden NAME="buy_price" VALUE="{$userPrice}">            
</td><td>
    <a href="#" class="removeItem">X</a>
</td></tr>
相关问题