jQuery / AJAX Добавление результатов поиска - как очистить только один результат?

Question

Я столкнулся с проблемой, которую не могу решить. Код работает отлично, но мне нужна еще одна функция.

Я использую jQuery для возврата результатов поиска по одному (несколько поисков без перезагрузки страницы). Но мне нужно, чтобы пользователь мог закрыть результаты поиска, которые ему не нужны, не покидая страницу и не теряя другие результаты.

Код состоит из

1. isbn.tpl : введите номер isbn для поиск
2. ajax.php : получает результаты, возвращает Результаты:
3. ajax.tpl : отображает результаты внутри isbn.tpl

Я почти уверен, что этот код должен быть внутри ajax.tpl. Мне нужно, чтобы в каждой строке была буква «X», которая будет закрывать этот отдельный результат поиска. Остальные результаты остаются. Итак, ajax.php генерирует случайную строку, которая начинается с «isbn_», я использую эту строку в ajax.tpl в ситуации. Затем код может закрыть что угодно с этим уникальным идентификатором.

Но я не знаю, является ли это лучшим способом сделать это, и я не знаю, как это сделать.

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 (и / или идентификаторов) - хороший способ легко идентифицировать данные.

Затем вы можете использовать jQuery, чтобы скрыть ненужные элементы в результатах.

Если у вас есть класс «isbn_xxxxxx» для элемента, например TR, вы можете удалить его: $("isbn_xxxxxx").remove() или скрыть: $("isbn_xxxxxx").hide().

Существует несколько способов подключения события, но вы можете легко разместить его как событие onclick.

Прелесть в том, что использование имен классов также позволяет группировать вещи. Вы можете иметь несколько классов для разных целей, и jQuery позволяет легко манипулировать всем этим с небольшим кодом.

EDIT:

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

Answer 2

Попробуйте добавить в ajax.tpl:

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

Тогда для jQuery:

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