CODEWITHSUNDEEP
phpjqueryajaxapi
Charlie
Charlie

Reputation: 476

jQuery / AJAX Appending search results - how do I clear only one?

I've coded some jquery & AJAX to call a PHP function I made that goes and gets some API data and brings it without refreshing the page. It appends, so you can have multiple searches without losing results.

What I need to do now is, I want to give the user the ability to change his mind on any one of the results. Maybe a little "X" at the end of each row. They click the "X" and that particular result is gone.

I've googled this, but I don't know what I'm looking for. Send me in the right direction, please?

Here's what I've got, so you know what I'm looking for:

<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>

EDIT: Yes, it just returns data in this format:

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

Upvotes: 0

Views: 897

Answers (1)

fehays
fehays

Reputation: 3167

This really depends on what type of html is returned by the ajax call. But you could wire up a .live() event that removes whatever you need to get rid of.

$('.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);

or you could just add the anchor into the results that are generated by your ajax.php file.

EDIT:

You could just use the live event and modify your html like this:

<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>

Upvotes: 1

Related Questions