Partial view not getting validated after button click when dynamically loaded using jQuery get

Question

I am using MVC4 to create a project and in that project I am using jQuery dialog to show pop up to user to edit the data.

When user click on Edit action link it shows a pop up which contains form to edit values of the user.

 <a href="#" class="edit" data-url="@Url.Action("EditResource", "Resources", new { id=item.EmployeeId})">Edit</a>

This is my code for showing pop up to user.

 $('.edit').click(function () {
    $.get($(this).data('url'), function (data) {
        $('#dialogEdit').dialog({
            modal: true,
            autoResize: true,
            resizable: true,
            position: {
                my: "center top",
                at: "center top",
                of: window
            },

            autoOpen: true,
            bgiframe: true,
            open: function () {

                document.getElementById('dialogEdit').innerHTML = data;
            },
            close: function () {
                document.getElementById('dialogEdit').innerHTML = "";
                document.getElementById('dialogEdit').innerText = "";
                $("#dialogEdit").empty().hide();
            }
        });
    });
});

This is partial view

@model PITCRoster.ViewModel.LookupTblUserViewModel

@using (Html.BeginForm("SaveChangesResources", "Resources"))
{ 
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
         Html.RenderPartial("_CreateNewResource", Model.tblUser);
         Html.RenderPartial("_LookUpDropDowns", Model.LookUpViewModel);
        <br />
            <input type="submit" value="Save"/>
        }

_CreateNewResource.cshtml

@model PITCRoster.tblUser

    <fieldset>
        <legend>tblUser</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.UserId)
        </div>
               <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

       <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

    </fieldset>

_lookupDropDowns.cshtml

@model PITCRoster.ViewModel.LookUpViewModel

@Html.LabelFor(model => model.SelectedLocation)
@Html.DropDownListFor(m => m.SelectedLocation, Model.LocationList, "-Please select-")
@Html.ValidationMessageFor(m => m.SelectedLocation)


@Html.LabelFor(m => m.SelectedStream)
@Html.DropDownListFor(m => m.SelectedStream, Model.StreamList, "-Please select-")
@Html.ValidationMessageFor(m => m.SelectedStream)

@Html.LabelFor(m => m.SelectedDepartment)
@Html.DropDownListFor(m => m.SelectedDepartment, Model.DepartmentList, "-Please select-")
@Html.ValidationMessageFor(m => m.SelectedDepartment)

@Html.LabelFor(m => m.SelectedGlobalLocation)
@Html.DropDownListFor(m => m.SelectedGlobalLocation, Model.GlobalLocationList, "-Please select-")
@Html.ValidationMessageFor(m => m.SelectedGlobalLocation)

I tried using

$('form').removeData('validator');
$('form').removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse('form');

and some more options which were on SO but it didn't help me solve problem.

Can you please help me with this?

Thank you ^_^

Where in your script have you used $.validator.unobtrusive.parse('form');? — user3559349
– user3559349, Commented Aug 11, 2015 at 9:43
I tried it in open parameter of dialog constructor it didn't work.. I also tried it before calling $.get() still didn't work.. where should I use it? — Dhananjay Sakhare
– Dhananjay Sakhare, Commented Aug 11, 2015 at 9:48
It has to be after the element has been added to the DOM. - ie. after document.getElementById('dialogEdit').innerHTML = data; — user3559349
– user3559349, Commented Aug 11, 2015 at 9:50

user3559349 · Accepted Answer · 2015-08-12 00:16:39Z

2

You need to ensure that you re-parse the validator after the new content is added to the DOM

$('.edit').click(function () {
  $.get($(this).data('url'), function (data) {
    $('#dialogEdit').dialog({
      ....
      open: function () {
        document.getElementById('dialogEdit').innerHTML = data;
        // reparse the validator here
        var form = $('form');
        form.data('validator', null);
        $.validator.unobtrusive.parse(form);
      },
      ....
    });
  });
});

answered Aug 12, 2015 at 0:16

user3559349

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

Collectives™ on Stack Overflow

Partial view not getting validated after button click when dynamically loaded using jQuery get

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related