0

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">&times;</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

Improve this question
4
  • Why you commented 4 lines after $("#id_Modal_Add_BodyDetail").html(response);? Commented Mar 16, 2016 at 12:00
  • What have you tried? Have you stepped thru the javascript in a debugger?What lines do you have errors on? As explained in the guides, don't just copy in your entire program and create a Minimal, Complete, and Verifiable example. Commented Mar 16, 2016 at 12:01
  • @teovankot $("#id_Modal_Add_BodyDetail").html(response); comment becouse it give error form id #zz not found so i was comment this line Commented Mar 16, 2016 at 12:03
  • @tmthydvnprt i was put debbuder but after $("#id_Modal_Add_BodyDetail").html(response); this line give error so i was comment some code Commented Mar 16, 2016 at 12:05

1 Answer 1

Reset to default
8

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');
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

thank u working but validation message not show and message display as summary not after input element ! why? any Idea?
@jayeshdhameliya if you using standard MVC validation you should add @Html.ValidationMessageFor() for each validaded field where you want to show your message
no i am use jquery validate plugin and inside form write @Html.ValidationSummary() but not give any validation in model am use ony jquey validate plugin and and it show red message after element in my other page
@jayeshdhameliya i suppose it will be better if you ask another question where mention new problem and workaroud this problem

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.