Question

我正在使用ASP.NET MVC 4.0。我以正确的顺序包含了所有文件。我的jQuery Dialog插件在使用选项时不起作用，但是当我不使用选项时，它可以正常工作。不知道是什么原因。而且，如果我将对话框函数放在js文件中的数据表下方，则不会显示弹出窗口。

这是我的观点：

<html>        
<head>        
    <title>TimeSlot</title>

    <link href="~/Scripts/DataTables/datatables.min.css" rel="stylesheet" />
    <link href="@Url.Content("~/Content/Common.css")"
          rel="stylesheet" type="text/css" />
     <link href="~/Scripts/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet" />
    <link href="~/Scripts/DataTables/Select-1.2.6/css/select.dataTables.css" rel="stylesheet" />
    <link href="~/Scripts/DataTables/Buttons-1.5.2/css/buttons.dataTables.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.7.2.min.js"></script>
     <script src="~/Scripts/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
    <script src="~/Scripts/DataTables/Select-1.2.6/js/dataTables.select.min.js"></script>
    <script src="~/Scripts/DataTables/Buttons-1.5.2/js/dataTables.buttons.min.js"></script>

    <script src="~/Scripts/jquery.unobstrusive-ajax.min.js"></script>
    <script src="~/Scripts/DataTables/datatables.min.js"></script>
    <script src="~/Scripts/TimeSlotDetails.js"></script>
</head>

<body>
   <form>

<div class="title">Automatic Timetable Generator
    </div>
<div class="title-down"></div>


<table class="option_list">
    <tr>
        <td class="title-down" rowspan="16" colspan="3"></td>
        <td rowspan="16" colspan="5">
             <div></div>
            <div></div>
            <div>@Html.ActionLink("Home", "Home")</div>
            <div>@Html.ActionLink("Preferred Time Slot", "PreferredTimeslot")</div>
            <div>Time Slot Details</div>
            <div>Department Details</div>
            <div>Subject Details</div>
            <div>ClassRoom Details</div>
            <div>Lab Details</div>
            <div>Allot the Slots for each classRoom as per your need</div>
            <div>Teacher Details</div>
            <div>Allot Subjects to Teachers</div>
            <div>Allot Subjects to Labs</div>
            <div>Check ot the Final Result</div>
            <div></div>
            <div></div>
        </td>
        <td rowspan="16" colspan="12">

            <div>Enter the Time slot Details</div>
            <div><span>
                <input id="add" type="button" value="Add" /></span> <span><input id="edit" type="button" value="Edit" /></span> <span><input id="delete" type="button" value="Delete" /></span> </div>
            <table id="timeslotdetails">
                <thead>
                    <tr>
                        <td colspan="3">Options</td>
                        <td colspan="3">Name</td>
                        <td colspan="3">Duration</td>
                        <td colspan="3">Type</td>
                        <td colspan="3">Frequency</td>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div> <button id="slotAllottmentSubmit" type="Submit" value="Submit the Data">Submit the Data</button></div>
      </td>
        <td rowspan="16" colspan="3"></td>
    </tr>


</table></form>
     @{
    var selectList = new SelectList(
        new List<SelectListItem>
        {
            new SelectListItem {Text = "Google", Value = "Google"},
            new SelectListItem {Text = "Other", Value = "Other"},
        }, "Value", "Text");
     }
    <div id="addDialog" style="display:none">
                <table>
                    <tr><td>Name</td><td><input type="text"/></td></tr>
                    <tr><td>Duration</td><td>@Html.DropDownList("Enter the Duration", Enumerable.Range(1, 2).Select(i => new SelectListItem { Text = i.ToString(), Value = i.ToString() }), new { @class="popupAddName"})</td></tr>
                    <tr><td>Type</td><td>@Html.DropDownList("Enter the Type of Slot",new SelectList(new List<SelectListItem>
        {
            new SelectListItem {Text = "Lectures", Value = "Lectures"},
            new SelectListItem {Text = "Practicals", Value = "Practicals"},
            new SelectListItem {Text = "Special Purpose Slots", Value = "Special Purpose Slots"},
        }, "Value", "Text"),"Enter the Type of Slot",new {@class="popupAddType" })</td></tr>
                    <tr><td>Frequency</td><td>@Html.DropDownList("Enter the Duration", Enumerable.Range(0,1).Select(i => new SelectListItem { Text = i.ToString(), Value = i.ToString() }), new { @class="popupAddFrequency"})</td></tr>
                </table>
            </div>
</body></html>

Here's my js:
$(document).ready(function () {
    $('#add').click(function () {
        $('#addDialog').dialog({
            draggable: false,
            resizable: false,
            height: 'auto',
            width: 'auto',
            buttons: [
                {
                    text:"Submit",
                    click:function(){

                    }
                }
            ]
        });
    });
    $('#timeslotdetails').DataTable({
        dom: "Bfrtip",
        ajax: "../TimeSlotDetailsAddPopup.asmx/GetTimeSlots",
        columns: [
            { data: "Name" },
            { data: "Duration" },
            { data: "Type" },
            { data: "Frequency" }
        ],
        select: true,    
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]    
    } );    
} );         
})

使用选项时，jQuery对话框插件不起作用

0 个答案: