CODEWITHSUNDEEP
javascriptjqueryajaxasp.net-mvchtml
Piosek
Piosek

Reputation: 260

MVC 5, Ajax, Jquery - script works only once

<script>
$(function () {

    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-form").submit(ajaxSubmit);
});
</script>

Ok, This script is for searching some content from databse. it works great, but only once. When im trying to hit submit again in my from, its not working again. Only when I refresh page. Could someone help me?

My from in same index.cshtml file:

<div>
<form id="search-form" method="get" data-ajax="true" data-ajax-target="#zawartosc" data-ajax-update="#zawartosc">
    <input id="search-filter" type="search" name="searchQuery"
           data-autocomplete-source="@Url.Action("MiejscaPodpowiedzi", "Miejsce")"
           placeholder="Wprowadź tekst, aby filtrować..." />
    <input type="submit" id="send" value="Send" />
</form>



<div id="zawartosc">
    @Html.Partial("_ListaMiejsc")
</div>

My controller:

  public class HomeController : Controller
{
    private DaneKontekst db = new DaneKontekst();

    public ActionResult Index(string searchQuery = null)
    {
        var miejscaNaSwiecie = db.MiejscaNaSwiecie.Where(o => (searchQuery == null ||
        o.NazwaMiejscaNaSwiecie.ToLower().Contains(searchQuery.ToLower()) ||
        o.KrajMiejscaNaSwiecie.ToLower().Contains(searchQuery.ToLower()) ||
        o.OpisMiejscaNaSwiecie.ToLower().Contains(searchQuery.ToLower()))).ToList();

        var ViewModel = new HomeIndexViewModel()
        {
            MiejscaNaSwiecie = miejscaNaSwiecie
        };

        if (Request.IsAjaxRequest())
        {
            return PartialView("_ListaMiejsc", ViewModel);
        }

        return View(ViewModel);
    }

Edited.

Upvotes: 0

Views: 466

Answers (2)

HazemTafour
HazemTafour

Reputation: 70

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

OR

$($targetElement).Load($newContent);

Upvotes: 0

Shyju
Shyju

Reputation: 218702

Because you are replacing the container. You should update only the content of that.

When you click for the first time, the response of the ajax call (the markup for the form) will replace the div (with id ="zawartosc"). So after this you do not have that div exist in your DOM any more. So your $targetElement is not going be the the container div (because it is gone !)

So instead of replacing the container div, simply update the content of that.

Replace

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

with

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

Upvotes: 1

Related Questions