I Have Two Page One IS Main page and Second is PartialView Page and Display in popup using jquery get method
My Main Page
@model CT.SmartQueue.Entity.QueueModel
@{
ViewBag.Title = "AdminPanel";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Queue Lists</h2>
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>For Service Centre Only: </h5>
<div class="ibox-tools">
</div>
</div>
<div class="ibox-content">
<table class="table table-striped">
<tr>
<th>
Code
</th>
<th>
Name
</th>
<th>
Description
</th>
<th>
IsActive
</th>
<th>
Edit
</th>
</tr>
@foreach (var item in Model.ClientQueueModel)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Code)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
<div class="switch">
<div class="onoffswitch">
@Html.CheckBoxFor(modelItem => item.IsActive, new { @class = "onoffswitch-checkbox", @id = item.Id, onclick = "changeQueueStatus(this.checked, this.id)" })
<label class="onoffswitch-label" for="@item.Id">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</td>
<td> <a href="javascript:void(0)" onclick="return fn_Load_Add('@Url.Action("AddQueue", "QueueSetup", new { id = @item.Id })')" class="btn btn-primary btn-xs ">Edit</a></td>
<td> <a href="javascript:void(0)" onclick="return fn_Load_AddDetail('@Url.Action("ClientQueueDetail", "QueueSetup", new { id = @item.Id })')" class="btn btn-primary btn-xs ">Edit QueueDetail</a></td>
</tr>
}
</table>
</div>
</div>
</div>
Popup for Partialview
<div class="modal fade in" id="id_Modal_Add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-content-custom ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<center> <h2 class="modal-title"><b>Client Queue </b> </h2></center>
</div>
<div class="modal-body" id="id_Modal_Add_Body" style="overflow: auto;">
...
</div>
</div>
</div>
Main page script
@section Scripts {
@Scripts.Render("~/plugins/validate")
<script type="text/javascript">
function fn_Load_AddDetail(var_URL) {
debugger;
$("#id_Modal_Add_BodyDetail").html('');
$('#id_Modal_AddDetail').modal('show');
$.get(var_URL, function (response) {
debugger;
$("#id_Modal_Add_BodyDetail").html(response);
//$("#zz").removeData("validator");
//$("#zz").removeData("unobtrusiveValidation");
//$.validator.unobtrusive.parse("form");
//$.validator.unobtrusive.parse($("#zz"));
})
}
</script>
}
My PrtialViewPage
@model CT.SmartQueue.Entity.QueueModel
@{
ViewBag.Title = "ClientQueueDetail";
//Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row">
@using (Html.BeginForm("ClientQueueDetail", "QueueSetup", FormMethod.Post, new { @class = "form-horizontal" ,@id="zz"}))
{
@Html.ValidationSummary()
<div class="col-lg-8">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Queue Details:</h5>
<div class="ibox-tools">
@Html.HiddenFor(x => x.ClientQueueDetailModel.Id)
@Html.HiddenFor(x => x.ClientQueueDetailModel.ClientQueueId)
@Html.HiddenFor(x => x.QueueFieldSettingTemplateModel.Id)
@Html.HiddenFor(x => x.ClientQueueDetailModel.ClientId)
@Html.HiddenFor(x => x.QueueFieldSettingTemplateModel)
</div>
</div>
<script type="text/javascript">
function ValidateNumber(event) {
var theEvent = event || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
var regex = /[0-9]|\./;
if (!regex.test(key)) {
theEvent.returnValue = false;
if (theEvent.preventDefault) theEvent.preventDefault();
}
}
</script>
<div class="ibox-content">
<div class="form-group">
<label class="col-lg-6 control-label">Total number of queue for day</label>
<div class="col-lg-3">
@Html.TextBoxFor(model => model.ClientQueueDetailModel.MaxQueueCountForTheDay, new { @class = "form-control input-sm", @onkeypress = "ValidateNumber(event);" })
</div>
</div>
<div class="form-group">
<label class="col-lg-6 control-label">Average time take/queue</label>
<div class="col-lg-3">
@Html.TextBoxFor(model => model.ClientQueueDetailModel.AverageTimeTakenPerQueue, new { @class = "form-control input-sm", @onkeypress = "ValidateNumber(event);" })
</div>
</div>
<div class="form-group">
<label class="col-lg-6 control-label">Notification Type</label>
<div class="col-lg-3">
@Html.DropDownListFor(model => model.ClientQueueDetailModel.NotificationType, new List<SelectListItem>() { new SelectListItem { Text = "Minutes Before", Value = "5" }, new SelectListItem { Text = "In Queue", Value = "6" } }, new { @class = "form-control", @placeholder = "Select Status Type", @required = "" })
</div>
</div>
<div class="form-group">
<label class="col-lg-6 control-label">Notification to user in advance</label>
<div class="col-lg-3">
@Html.TextBoxFor(model => model.ClientQueueDetailModel.NotificationToUserinAdvance, new { @class = "form-control input-sm", @onkeypress = "ValidateNumber(event);" })
</div>
</div>
@*@if (Model.QueueFieldSettingTemplateModel.IsEmergencyQueueVisible == true)
{*@
<div class="form-group">
<label class="col-lg-6 control-label">Emergency queue</label>
<div class="col-lg-3">
<div class="switch">
<div class="onoffswitch">
@Html.CheckBoxFor(model => model.ClientQueueDetailModel.IsEmergencyQueueOn, new { @class = "onoffswitch-checkbox", @checked = Model.ClientQueueDetailModel.IsEmergencyQueueOn, @id = "editIsEmergencyQueueOn" })
<label class="onoffswitch-label" for="editIsEmergencyQueueOn">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
@*}*@
</div>
</div>
</div>
<div class="col-lg-4">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Queue Preferences: </h5>
<div class="ibox-tools">
</div>
</div>
<div class="ibox-content">
@*@if (Model.QueueFieldSettingTemplateModel.IsNameVisible == true)
{*@
<div class="setings-item">
<span>
Name
</span>
<div class="switch">
<div class="onoffswitch">
@Html.CheckBoxFor(model => model.ClientQueueDetailModel.IsNameRequired, new { @checked = Model.ClientQueueDetailModel.IsNameRequired, @class = "onoffswitch-checkbox", @id = "editIsNameRequired" })
<label class="onoffswitch-label" for="editIsNameRequired">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
@*}
@if (Model.QueueFieldSettingTemplateModel.IsNRICVisible == true)
{*@
<div class="setings-item">
<span>
NRIC
</span>
<div class="switch">
<div class="onoffswitch">
@Html.CheckBoxFor(model => model.ClientQueueDetailModel.IsNRICRequired, new { @checked = Model.ClientQueueDetailModel.IsNRICRequired, @class = "onoffswitch-checkbox", @id = "editIsNRICRequired" })
<label class="onoffswitch-label" for="editIsNRICRequired">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
@*}
@if (Model.QueueFieldSettingTemplateModel.IsPhoneNumberVisible == true)
{*@
<div class="setings-item">
<span>
Phone Number
</span>
<div class="switch">
<div class="onoffswitch">
@Html.CheckBoxFor(model => model.ClientQueueDetailModel.IsPhoneNumberRequired, new { @class = "onoffswitch-checkbox", @id = "editIsPhoneNumberRequired" })
<label class="onoffswitch-label" for="editIsPhoneNumberRequired">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>
Date of Birth
</span>
<div class="switch">
<div class="onoffswitch">
@Html.CheckBoxFor(model => model.ClientQueueDetailModel.IsDOBRequired, new { @class = "onoffswitch-checkbox", @id = "editIsDOBRequired" })
<label class="onoffswitch-label" for="editIsDOBRequired">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
@*}
@if (Model.QueueFieldSettingTemplateModel.IsAddressVisible == true)
{*@
<div class="setings-item">
<span>
Address
</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example4">
@Html.CheckBoxFor(model => model.ClientQueueDetailModel.IsAddressRequired, new { @class = "onoffswitch-checkbox", @id = "editIsAddressRequired" })
<label class="onoffswitch-label" for="editIsAddressRequired">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
@*}
@if (Model.QueueFieldSettingTemplateModel.IsNoOfPaxVisible == true)
{*@
<div class="setings-item">
<span>
No. of Pax
</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example5">
@Html.CheckBoxFor(model => model.ClientQueueDetailModel.IsNoOfPaxRequired, new { @class = "onoffswitch-checkbox", @id = "editIsNoOfPaxRequired" })
<label class="onoffswitch-label" for="editIsNoOfPaxRequired">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>
Gender
</span>
<div class="switch">
<div class="onoffswitch">
@Html.CheckBoxFor(model => model.ClientQueueDetailModel.IsGenderRequired, new { @class = "onoffswitch-checkbox", @id = "editIsGenderRequired" })
<label class="onoffswitch-label" for="editIsGenderRequired">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
@*}*@
<div class="form-group">
<label class="col-md-6"></label>
@*<div class="col-lg-3">
<button type="submit" class="btn btn-primary pull-right">Cancle</button>
</div>*@
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="pull-right">
@*<a class="btn btn-danger" href="#">Cancel</a>*@
<button type="submit" class="btn btn-primary" onclick="return Validation();">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal" id="normalClose">Close</button>
</div>
</div>
}
</div>
@section Scripts {
@Scripts.Render("~/plugins/validate")
<script type="text/javascript">
$.validator.unobtrusive.parse($("#zz"));
$("#zz").validate({
rules: {
'ClientQueueDetailModel.MaxQueueCountForTheDay': {
required: true,
},
'ClientQueueDetailModel.AverageTimeTakenPerQueue': {
required: true
},
'ClientQueueDetailModel.NotificationToUserinAdvance': {
required: true,
//number: true
}
}
});
</script>
}
I am show partialview page in poup in main page using jquery $get Call but jquery validation not fire and same thing not work and may other partialview page I konw many article in this issue but not working for me Any idea then plz help me thank you
When you load your partial View with Ajax you changing DOM.
Unobtrusive validation parsing DOM on page load and add some event listners.
The thing is when you changing DOM unobtrusive validation just don't know about newly added elements. that's why you should uncomment (and modidy selectors) lines after your ajax call.
Or what I recommend you to place there:
$("#id_Modal_Add_BodyDetail").html(response);
$('#id_Modal_Add_BodyDetail form').data('validator', null);
$.validator.unobtrusive.parse('#id_Modal_Add_BodyDetail form');