CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcasp.net-mvc-4
Dhananjay Sakhare
Dhananjay Sakhare

Reputation: 494

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

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 ^_^

Upvotes: 2

Views: 180

Answers (1)

user3559349
user3559349

Reputation:

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);
      },
      ....
    });
  });
});

Upvotes: 2

Related Questions