人们严重低估了这一点,因为他们没有答案?哇。
所以我有一个部分视图,里面有一个脚本通过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之后。
答案 0 :(得分:0)
虽然在部分视图中放置脚本不被认为是一种好习惯,但如果您绝对需要它,则可以将脚本放在部分的底部,而不用{包裹它{1}}。您可以使用Immediately-Invoked Function Expression(IIFE),以便在客户端上呈现脚本时立即执行。将脚本放在视图底部将确保所有视图内容都已在页面上:
部分视图应该是这样的:
$(document).ready
答案 1 :(得分:0)
我认为你叫错了控制。 也许类似这样:
@using (Ajax.BeginForm("Index", "CALL WRONG HERE",<-----