Question posted in
You can find the official documentation here.

Ajax search doesn't work the second time (ASP.NET MVC) – Jquery ajax

I have a problem changing items after searching.

I looked at similar threads but found no solution there 🙁

It looks like the first time the page loads well – the first time the entire Index.cshtml page is loaded which contains a collection of books in the selected category.

There is a search engine on the page – after searching for “manual” – ajax correctly replaces elements with those containing “manual” in the name.

Then when I enter something into the search engine a second time (for example “exercises”) – the content of the page does not change any more.

I tried to debug and I see that new items are correctly downloaded from the database – the condition “if (Request.IsAjaxRequest ())” is true and the items are passed to partial view – there the “foreach” loop goes through them. Unfortunately, after _Partial, nothing happens.

I can’t find a mistake – the strangest thing is that the first ajax call works fine – only the second (and subsequent) bad.

CatalogController.cs

public ActionResult Index(string categoryName = null, string searchQuery = null)
        {
            if (categoryName == null)
                categoryName = (db.Categories.Find(1)).Name;

            var category = db.Categories.Include("Books").Where(x => x.Name.ToLower() == categoryName).Single();

            var books = category.Books.Where(x => (searchQuery == null || x.Title.ToLower().Contains(searchQuery.ToLower()) || x.SubTitle.ToLower().Contains(searchQuery.ToLower()) || x.Level.ToLower().Contains(searchQuery.ToLower())) && !x.Inaccessible);

            if (Request.IsAjaxRequest())
                return PartialView("_PartialBooksList", books);
            else
                return View(books);
        }

Index.cshtml

<form class="o-search-form" id="search-form" method="get" data-ajax="true" data-ajax-target="#booksList">
   <input class="o-search-input" id="search-filter" type="search" name="searchQuery" data-autocomplete-source="@Url.Action("SearchTips")" placeholder="Search" />
   <input class="o-search-submit" type="submit" value="" />
</form> 

<div class="row" id="booksList">
   @Html.Partial("_PartialBooksList")
</div>

@section Scripts
{
    <script src="~/Scripts/jquery-3.5.0.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.js"></script>
    <script>
        $(function () {
            var setupAutoComplete = function () {
                var $input = $(this);
                var options =
                {
                    source: $input.attr("data-autocomplete-source"), 
                    select: function (event, ui) { 
                        $input = $(this);
                        $input.val(ui.item.label);
                        var $form = $input.parents("form:first");
                        $form.submit();
                    }
                };
                $input.autocomplete(options);  
            };
            var ajaxSubmit = function () { 
                var $form = $(this);
                var settings = {                                            
                    data: $(this).serialize(), 
                    url: $(this).attr("action"),  
                    type: $(this).attr("method")                       
                };
                $.ajax(settings).done(function (result) {    
                    var $targetElement = $($form.data("ajax-target"));
                    var $newContent = $(result);
                    $($targetElement).replaceWith($newContent);  
                    $newContent.effect("slide");
                });
                return false;
            };
            $("#search-filter").each(setupAutoComplete);
            $("#search-form").submit(ajaxSubmit); 
        });
    </script>
}

_PartialBooksList

@model IEnumerable<ImpressDev.Models.Book>
@using ImpressDev.Infrastructure
<div class="row">
    @foreach (var book in Model)
    {
        <div class="col-12 col-xl-4">
            <a class="o-shop-link" href="@Url.Action("Details", "Catalog", new { bookId = book.BookId })">
                <div class="o-shop-item">
                    <img class="o-shop-img" src="@Url.BookPhotoSourcePath(book.PhotoSource)" />
                    <div class="o-shop-text">
                        <h2>@book.Title</h2>
                        <h6>@book.SubTitle - @book.Level - <b>@book.Price zł.</b></h6>
                        <a href="@Url.Action("AddToCart", "Cart", new { bookId = book.BookId })" class="o-shop-button">+ Add to cart</a>
                    </div>
                </div>
            </a>
        </div>
    }
</div>

Please help

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I looked through the code step by step and found a solution to my problem.

    In the first search, replace id="booksList"

                        <div class="row" id="booksList">
                            @Html.Partial("_PartialBooksList")
                    </div>

    partial view in which there was only without id = booksLists.

    In the next search there was no ID in this place and there was nothing to replace.


  2. 0

    I am not sure if this is the case, but try to change this code:

    $($targetElement).replaceWith($newContent);

    To this:

    $($targetElement).html($newContent);

    I think the problem is the div element with id=”booksList” is replaced after first search. So you don’t have this element in the second search.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search