MVC 5, Ajax, Jquery - script works only once

Question

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

Shyju · Accepted Answer · 2017-01-11 17:49:55Z

1

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

answered Jan 11, 2017 at 17:49

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Piosek Over a year ago

Shyju - thank you so much. it works pefect now. Ive spent so much time to figure it out, but without result.

HazemTafour · Accepted Answer · 2017-01-30 12:16:20Z

0

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

OR

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

answered Jan 30, 2017 at 12:16

HazemTafour

708 bronze badges

Collectives™ on Stack Overflow

MVC 5, Ajax, Jquery - script works only once

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related