部分视图中的jQuery没有在同一视图中选择元素

时间:2015-11-13 11:44:57

标签: jquery ajax asp.net-mvc razor partial

人们严重低估了这一点,因为他们没有答案?哇。

所以我有一个部分视图,里面有一个脚本通过AJAX加载到父页面,这个脚本需要在这里,因为我通过razor将Modal变量传递给脚本。

这是一个缩短版本的脚本,它没有提升。

$(document).ready(function () {

    //add rule if there is a subtype to select
    if (Calendar.CalEventSubTypeListCount > 0)
    {
        console.log($('#CalEventBO_CalEventSubType_ID').data("name"));
        $('#CalEventBO_CalEventSubType_ID').rules('add', { required: true, messages: { required: Calendar.RawMessage } });
    }

    if ($('#CalEventBO_AllDay').prop('checked')) {
        $(".timeOptions").hide();
    }
    else 
    {
        $(".timeOptions").show();
    }

    if (Calendar.BookForUser == 'True') {
        $('.mngUsers').show();
        //Check if the selected user has a colour day
        checkColDay();
    }
    else {
        $('.mngUsers').hide();
        //Check if the logged in user has a colour day
        checkColDay();
    }

    //On page load hide school options and mng user list for hols
    $('.SchAdd').hide();
    $('.AddCon').hide();

    var eventTypeID = $('#CalEventBO_TypeID').val();
    showHideTitleInput();

    if (eventTypeID == Calendar.CalEventType) {
        checkColDay();
    }

问题是,它说的是#CaleventBO_CalEventSubType_ID'未定义。该元素与脚本位于同一视图中,但似乎脚本在加载视图之前运行,即使在IE中,视图在暂停时暂停。

我已尝试将bind(" load")用于元素,(窗口).load,将脚本放在父视图中,从另一个视图调用整个脚本并调用来自AJAX加载的OnSuccess的脚本。

完全失败并开始认为这是不可能的,我需要重写整个页面。

TL; DR:有没有办法告诉jQuery在它加载的部分视图之后运行?

部分观点:

<div class="modal" id="CalAddEventModal">
  <div class="window">

  @using (Ajax.BeginForm("AddEvent", "Calendar", null, new AjaxOptions { UpdateTargetId = "addpanel" }, new { id = "fm_addev" }))
  {

    <fieldset>
        <legend>Add New Event</legend>
        <br />

        @Html.HiddenFor(model => model.CalEventBO.SelectedMonth)
        @Html.HiddenFor(model => model.CalEventBO.SelectedYear)
        @Html.HiddenFor(model => model.CalEventBO.SchRequired)
        @Html.HiddenFor(model => model.CalEventBO.TypeID)


        <span class="blk_w">Category:</span>@Html.DropDownListFor(model => model.CalEventBO.TypeID, Model.TypeList, new { @class = "CatDDL" })

        @* If there is at least 1 sub event type then show the choice *@
        @if (Model.CalEventSubTypeList.Count() > 0)
        {
            <div class="subtype">
            <span class="blk_w">@((CalEventType)Model.CalEventBO.TypeID == CalEventType.Meeting ? "Room:" : "Event Type:")</span> @Html.DropDownListFor(model => model.CalEventBO.CalEventSubType_ID, new SelectList(Model.CalEventSubTypeList, "ID", "Text"))
            </div>
        }

        @if (Model.CalEventBO.TypeID == (int)CalEventType.Roadshow || Model.CalEventBO.TypeID == (int)CalEventType.OnSiteTraining)
        {
            <br />
            <span class="blk_w">Venue:</span>   @Html.DropDownListFor(model => model.CalEventBO.LAID, Model.LAList, "Please Select an LA") <br />
            <div class="SchAdd" style="display:none;">
            <span class="blk_w"></span>         <div class="line">@Html.DropDownListFor(model => model.CalEventBO.SchID, Model.SchList)</div>
            <div class="AddCon" style="display:none;">
            <span class="blk_w">Venue Address:</span> <div class="address line"></div>
            <br />
            <span class="blk_w"></span> @Html.CheckBoxFor(model => model.AddressConfirmed) <strong class="num">I confirm the address above is correct</strong> 
            </div>
            </div>
        }



        @switch (Model.CalEventBO.TypeID)
        {
            case (int)CalEventType.Meeting:
            case (int)CalEventType.Other:
            case (int)CalEventType.Exhibition:
            case (int)CalEventType.OnlineTraining:
            case (int)CalEventType.OutOfOffice:
            case (int)CalEventType.OnlineDemo:
                <div class="titleInput" style="display: none;">
                    <span class="blk_w">Title:</span> @Html.EditorFor(model => model.CalEventBO.Title)
                </div>
                break;
            default:
                break;
        }

        @if (Model.CalEventBO.TypeID == (int)CalEventType.OnlineDemo || Model.CalEventBO.TypeID == (int)CalEventType.Roadshow || Model.CalEventBO.TypeID == (int)CalEventType.OnlineTraining)
        {
            <br />
            <span class="blk_w">Max Attendees:</span> @Html.DropDownListFor(model => model.CalEventBO.MaxAttendees, Model.MaxAttend)
        }

        <br />
        <span class="blk_w">Start Date:</span> <div class="dateselect line">@Html.EditorFor(model => model.CalEventBO.StartDate)</div>

        @if (Model.CalEventBO.TypeID != (int)CalEventType.Holiday && Model.CalEventBO.TypeID != (int)CalEventType.BankHoliday && Model.CalEventBO.TypeID != (int)CalEventType.ColourDay)
        {
            <div class="timeOptions line">
            <span class="blk_w">Start Time:</span> @Html.DropDownListFor(model => model.CalEventBO.StartHour, Model.HourList) : @Html.DropDownListFor(model => model.CalEventBO.StartMin, Model.MinList)
            </div>
        }

        <br />
        <span class="blk_w">End Date:</span> <div class="dateselect line">@Html.EditorFor(model => model.CalEventBO.EndDate)</div>

        @if (Model.CalEventBO.TypeID != (int)CalEventType.Holiday && Model.CalEventBO.TypeID != (int)CalEventType.BankHoliday && Model.CalEventBO.TypeID != (int)CalEventType.ColourDay)
        {
            <div class="timeOptions line">
            <span class="blk_w">End Time:</span> @Html.DropDownListFor(model => model.CalEventBO.EndHour, Model.HourList) : @Html.DropDownListFor(model => model.CalEventBO.EndMin, Model.MinList)
            </div>
        }

        @switch (Model.CalEventBO.TypeID)
        {
            case (int)CalEventType.OnlineDemo:
            case (int)CalEventType.BankHoliday:
            case (int)CalEventType.ColourDay:
            case (int)CalEventType.Roadshow:
                //Do not show the day range options or All Day CheckBox
                break;
            case (int)CalEventType.Holiday:
                <br />
                <span class="blk_w">Day Range:</span> @Html.DropDownListFor(model => model.CalEventBO.DayRange, Model.DayRangeList)  

                //Alert will appear here if colour day for user within selected dates
                <span class="blk_w"></span><span class="colAlert"></span>


                if (Model.MngUserList != null)
                {
                    <br />
                    <span class="blk_w">Book for Managed User:</span> @Html.CheckBoxFor(model => model.BookForUser)
                    <div class="mngUsers">
                    <span class="blk_w">Select User:</span> @Html.DropDownListFor(model => model.MngUserID, Model.MngUserList)
                    </div>
                }
                break;
            default:
                    <br />
                    <span class="blk_w">All Day:</span> @Html.CheckBoxFor(model => model.CalEventBO.AllDay)
                break;

        }

        @if (Model.CalEventBO.TypeID == (int)CalEventType.ColourDay)
        {
            <br />
            <span class="blk_w">Colour:</span>
            for (int i = 0; i < Model.Colours.Count; i++)
            { 
                <div class="blk_wn line">
                @{string radioID = "colID+" + i;} 
                @Html.RadioButton("Colour", Model.Colours[i].Colour, Model.Colours[i].Include, new { @id = radioID })
                <label for="colID+@i" class="@Model.Colours[i].Colour CalDaySelect" title="">@Model.Colours[i].Colour</label>
                </div>
            }

            <div class="line"><br /><br />
                  <img src="/Content/Images/help.png" class ="popup" alt="info" />
                    <div class="popupinfo">

                        Red - No holidays are allowed to be taken<br />
                        Amber - The holiday allowance has been reached<br />
                        Green - Holidays can be booked
                    </div>
                 </div>

            <br />
            <br />

            <fieldset>
                <legend>Included Access Groups</legend>
                <br />
            <div>
                <div class="scrollCalModal">
                    @Html.CheckBox("All") <label for="All">All</label>
                    <br />
                        <div id="groupSelect">
                            @for (int i = 0; i < Model.AuthGroupList.Count; i++)
                            {
                                <div class="blk_vw line">
                                @Html.CheckBoxFor(modelItem => Model.AuthGroupList[i].Include, new { id = Model.AuthGroupList[i].ID, @class = "grpcbx" })
                                <label for="@Model.AuthGroupList[i].ID">@Model.AuthGroupList[i].Name</label>
                                @Html.HiddenFor(modelItem => Model.AuthGroupList[i].ID)
                                @Html.HiddenFor(modelItem => Model.AuthGroupList[i].Name)
                                @Html.HiddenFor(modelItem => Model.AuthGroupList[i].Desc)
                                </div>
                            }
                        </div>
                </div>
                <br />
                <div class="userChanges"></div>
            </div>
            </fieldset>
        }

        @Html.HiddenFor(model => model.CalEventBO.ModeratorID)

        @if (Model.CalEventBO.TypeID == (int)CalEventType.BankHoliday || Model.CalEventBO.TypeID == (int)CalEventType.ColourDay || Model.CalEventBO.TypeID == (int)CalEventType.Holiday)
        {
            //Do not show any users

        }
        else
        {
            //Allow multiple selections for users 
            <br />
            <br />
            <fieldset class="modalFieldset">
                <legend>Moderator(s)</legend>
                <br />
            <div class="scrollCalModal">
            @{  int currentTeamID = -1;
                for (int i = 0; i < Model.MultiModList.Count; i++)
                {

                    // If the current team ID is not the same then make it the same
                    if (currentTeamID != Model.MultiModList[i].Team_ID)
                    {

                        currentTeamID = Model.MultiModList[i].Team_ID;

                        // if the item isn't the first close the div
                        if (i != 0)
                        {
                            @:</div>
                        }
                        @:<div style="margin-bottom:10px;">
                        // display the team name
                        <span class="floatR">
                            <a href="javascript:void(0)" class="teamcbx line" data-teamid="@Model.MultiModList[i].Team_ID" data-selecttype="all">All</a>
                            <a href="javascript:void(0)" class="teamcbx line" data-teamid="@Model.MultiModList[i].Team_ID" data-selecttype="none">None</a>
                        </span>
                        <strong style="display:block; margin-left:3px; margin-bottom:3px; background-color: #eee;">@(Model.MultiModList[i].Team_Name == null ? "Other" : Model.MultiModList[i].Team_Name)</strong>
                    }

                    <div class="blk_wn line">
                    @Html.CheckBoxFor(modelItem => Model.MultiModList[i].Include, new { id = "modID+" + i, @class = "addmodcbx team" + Model.MultiModList[i].Team_ID })
                    <label for="modID+@i">@Model.MultiModList[i].ModName</label>
                    @Html.HiddenFor(modelItem => Model.MultiModList[i].ModID)
                    <br />
                    </div>

                    // If this is the last entry close off the div
                    if (i == Model.MultiModList.Count - 1)
                    {
                        @:</div>
                    }
                }
            }
            </div>
            </fieldset>
        }

    </fieldset>
    @Html.ValidationSummary()
    <div class="searchcol_page"> 
    <span class="legendAction">[ <a href="javascript:void(0);" class="cancelBtn">Cancel</a> ]</span>
            <input type="submit" class="btn sav" value="Add Event" />
    </div>
  }
  </div>
   </div>

脚本从此处开始,在HTML之后。

2 个答案:

答案 0 :(得分:0)

虽然在部分视图中放置脚本不被认为是一种好习惯,但如果您绝对需要它,则可以将脚本放在部分的底部,而不用{包裹它{1}}。您可以使用Immediately-Invoked Function Expression(IIFE),以便在客户端上呈现脚本时立即执行。将脚本放在视图底部将确保所有视图内容都已在页面上:

部分视图应该是这样的:

$(document).ready

答案 1 :(得分:0)

我认为你叫错了控制。 也许类似这样:

@using (Ajax.BeginForm("Index", "CALL WRONG HERE",<-----