jQuery 機能を含む MVC 4 プロジェクトを使用しています。私が直面している問題は、ビューの 1 つにTimeSheetテーブルがあり、その後に jQuery ダイアログ ボックスをトリガーする「新規追加」というボタンが続くことです。TimeSheetボックスに、オートコンプリート、日付ピッカー、スピナーなどの他の jQuery ウィジェットを備えた、新しいエントリに関する情報をユーザーが入力できるようにする別のビューを読み込みます。
ダイアログ ビューは正常に読み込まれ、希望どおりに機能します。ここでの問題は、ビューがダイアログ ボックス内に読み込まれると、すべてのダイアログ機能がウィンドウの外に出てしまうことです。元のビューでダイアログ ボックスをどのように定義しても、その機能は機能しません。
たとえば、ダイアログをドラッグ可能に設定すると、ダイアログをドラッグできなくなり、closeOnEscapetrue に設定しても機能しません。また、最も気になるのは、右上隅の閉じるボタン (x) が機能せず、左にあることです。ダイアログを閉じる方法がありません...誰か助けてください:(
関連するコードは次のとおりです。
タイムシート ビューのボタンとスクリプト:
<button id="AddNew_1">Add New</button>
@section scripts{
<link rel="Stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
$(function () {
$("#AddNew_1").click(function () {
$("#dialog").dialog("open");
});
$("#dialog").dialog({
autoOpen: false,
height: 570,
width: 930,
modal: true,
draggable: true,
closeOnEscape: true,
open: function(event, ui) {
$(this).load("@Url.Action("New", "Task")", function()
{
$("#dialog").find("script").each(function(i) {
eval($(this).text());
});
});
}
});
});
</script>
}
<div id="dialog" title="Add New" style="overflow: hidden"></div>
ダイアログ ビュー:
@model timeSheetSystems.Models.OperationModels
@{
ViewBag.Title = "AddNew";
Layout = "~/Views/Shared/View1.cshtml";
Model.Date = DateTime.Today;
}
@section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>Add New TimeSheet Entry</h1>
<h2></h2>
</hgroup>
</div>
</section>
}
@section scripts{
<link rel="Stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" />
<script type="text/javascript" src="~/Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="~/Scripts/code_jquery_com-ui-1_10_3-jquery--ui.js"> </script>
<script type="text/javascript" src="/resources/demos/external/jquery.mousewheel.js"> </script>
<script type="text/javascript" src="/resources/demos/external/globalize.js"></script>
<script type="text/javascript" src="/resources/demos/external/globalize.culture.de-DE.js"></script>
<script type="text/javascript" src="/resources/demos/external/globalize.culture.ja-JP.js"></script>
<style>
.ui-widget {
font-size: 1em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}
.ui-widget .ui-widget {
font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
font-size: 1em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
* html .ui-autocomplete {
height: 100px;
}
</style>
<script type="text/javascript"> //autocomplete
$(document).ready(function () {
$("#AC").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Task/AutoComplete", type: "POST", datatype: "json",
data: { q: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.SPTaskId + ", " + item.TaskName + ", " + item.Application, value: item.TaskId };
}));
}
});
},
select: function (event, ui) {
$("#TaskId").val(ui.item.value);
$(this).val(ui.item.label);
return false;
}
});
});
</script>
<script type="text/javascript"> //spinner
$(function () {
$("#WorkedHours").spinner({
step: 0.50,
numberFormat: "n",
min: 0
});
$("#culture").change(function () {
var current = $("#spinner").spinner("value");
Globalize.culture($(this).val());
$("#spinner").spinner("value", current);
});
});
</script>
<script type="text/javascript"> //calendar
$(document).ready(function () {
$("#Date").datepicker();
});
</script>
<script type="text/javascript">
$(".ui-icon ui-icon-closethick").click(function () {
$('#dialog').dialog("close");
});
</script>
}
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset>
<input type="hidden" id="culture" value="en-EN" />
<div class="editor-label">
@Html.LabelFor(model => model.TaskId, "Task")
</div>
<div class="editor-field">
<input type="text" id="AC"/>
@Html.HiddenFor(model => model.TaskId, new { id = "TaskId" })
@Html.ValidationMessageFor(model => model.TaskId)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Description, "Operation Description")
</div>
<div class="editor-field">
@Html.TextAreaFor(model => model.Description, new { rows = 5, cols = 200 })
@Html.ValidationMessageFor(model => model.Description)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Date)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.Date, "{0:MM/dd/yyyy}")
@Html.ValidationMessageFor(model => model.Date)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.WorkedHours, "Hours Worked")
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.WorkedHours)
@Html.ValidationMessageFor(model => model.WorkedHours)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}