Ajax loaded submit form not working

Question

I am using Ajax to replace a part of my page with a partial view containing multiple submit forms. This normally works when I use a normal Html.BeginForm and reload the entire page (the submit forms loaded work). However, when using Ajax to load the submit form, they display normally on the page but are not working.

I have looked around for information, but the information I have found mainly concerns submitting form through Ajax call, not loading submit forms.

This is the main View containing the javascript.

@model List<SrrManager.Models.User>

@{
    ViewBag.Title = "Create";
}
<script>
    $(function () {
        $('Body').keypress(function (e) {
            if (e.which == 13) {
                $('#nomButton').trigger('click');
            }
        });
        $('#nomButton').keyup(function (e) {
            if (e.which == 13) {
                $('#nomButton').trigger('click');
            }
        });/*
        $('#prenomButton').keypress(function (e) {
            if (e.which == 13) {
                $('#nomButton').trigger('click');
            }
        });*/
        $("#nomButton").on('click', function () {

            var givenName = $("#prenomBox").val();
            var nom = $("#nomBox").val();
            $.ajax({
                url: '@Url.Action("Create", "ManageUser")', //+ "?firstname=" + givenName + "&lastname=" + lastname,
                type: 'GET',
                data: { prenom: givenName, nomFamille: nom },
                success: function (result) {
                    $('#liste-user').replaceWith(result);
                }
            });
        });
    });
</script>
<body>

    <h2>Add an user</h2>

    <p>
        <label class="label-form">Prenom :</label>@Html.TextBox("prenomBox")
        <br />
        <label class="label-form">Nom :</label> @Html.TextBox("nomBox")
        <br />
        <input type="button" value="Filter" id="nomButton" />
    </p>

    @Html.Partial("_Create", Model)

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

</body>

The _Create PartialView is as follow :

@model List<SrrManager.Models.User>

<div id="liste-user">
    <table>
        <tr>
            <th>
                First Name
            </th>
            <th>
                Last Name
            </th>
            <th>
                Email
            </th>
            <th>
                Admin
            </th>
            <th></th>
        </tr>
        @foreach(var item in Model)
        {
            <tr>
                <td>
                    @item.Name
                </td>
                <td>
                    @item.LastName
                </td>
                <td>
                    @item.email
                </td>
                 @Html.Partial("__create", item)
             </tr>
        }
    </table>
</div>

The last PartialView is used to create the submit form. The model is not a List but only User, and it is included once in each loop :

@model SrrManager.Models.User


@using(Html.BeginForm()){

    <fieldset>
        <legend>User</legend>
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)

        @Html.HiddenFor(x => x.Name)
        @Html.HiddenFor(x => x.LastName)
        @Html.HiddenFor(x => x.email)
        @Html.HiddenFor(x => x.account)
        <td>
            @Html.EditorFor(x => x.IsAdmin)
        </td>
        <td>
            <input type="submit" value="save" />
        </td>
    </fieldset>
}

The list of user and the submit form is displayed normally using Ajax call or synchronous JQuery call when clicking on the Filter button, and the controller method is called as intended. However, the buttons work when loaded with synchronous JQuery calls, but not when loaded through Ajax.

The controller method is :

public ActionResult Create(string prenom ="", string nomFamille ="")
        {
            List<User> listeUser = new List<User>();
            if (prenom.Equals("") && nomFamille.Equals(""))
            {
            }
            else if (prenom.Equals(""))
            {
                string search = "*" + nomFamille + "*";

                listeUser = SearchDirectory(search, 1);

            }
            else if (nomFamille.Equals(""))
            {
                string search = "*" + prenom + "*";

                listeUser = SearchDirectory(search, 2);
            }
            else
            {
                string search = "*" + prenom + "*" + nomFamille + "*";

                listeUser = SearchDirectory(search, 3);
            }

            if (Request.IsAjaxRequest())
            {
                return PartialView("_Create", listeUser);
            }
            return View(listeUser);
        }

I am a beginner using Ajax, and I am at lost as to why it does not work. If any one has any lead, it would be very appreciated.

try switching the type: from GET to POST in your $.ajax call — Ballbin

JB06 JB06 · Accepted Answer · 2014-06-07T04:03:34

Try adding a jQuery handler for form submits.

$('form').submit(function () {
    var givenName = $("#prenomBox").val();
    var nom = $("#nomBox").val();

    $.ajax({
        url: '@Url.Action("Create", "ManageUser")', //+ "?firstname=" + givenName + "&lastname=" + lastname,
        type: 'GET',
        data: { prenom: givenName, nomFamille: nom },
        success: function (result) {
            $('#liste-user').html(result);
        }
    });
});

Ajax loaded submit form not working

1 Answers