使用 jQuery 对话框

Question

我有一个 HTML table 并且我从 database.Some 获取每个单元格的数据单元格有一个编辑图标，所以当用户点击它时，他应该看到一个弹出窗口上对话框。在这个对话框中应该有一个带有 3 options.And 的下拉菜单，在用户选择其中一个并单击保存按钮后，数据库应该得到更新。以前我使用提示而不是使用 jQuery 对话框，用户必须键入新的 status.But 现在我想使用对话框。

以下是我在 tracking.php 文件中的部分代码。

                    <td>
                       <?php
                      $var=$arrayD['Structural Data Loaded']; 
                      echo
                      '<a data-id="$id" class="StructuralDataLoaded">' . $var . ' <img class="img" onclick="javascript:SelectStatus(data-id);" src="images/edit.png"></a>';
                      ?>
                   </td>




        /* Selecting new status DIV */
           <div id="SelectingStatus" title="Select Status" style="display:none;">
       <h>
            Select the status
       </h>

       <select>
             <option value="Not Started">Not Started</option>
             <option value="In Progress">In Progress</option>
             <option value="Completed">Completed</option>
       </select>

    </div>


    <script>

function SelectStatus(id) {

$('#SelectingStatus').dialog('destroy');
    var SelectingStatus = $('#SelectingStatus');
    SelectingStatus.dialog({
        close: function(event, ui) {
            $(this).dialog('destroy');
        },
        modal: true,
        title: 'Select Status',
        width: 600,
        height: 'auto',
        overlay: {
            backgroundColor: '#000000',
            opacity: 0.5
        },

    });

}

现在当我点击编辑图标时，我没有看到任何弹出对话框。问题是什么？

Answer 1

Dialog is a jQuery UI feature。根据您收到的错误消息，您似乎还没有加载 jquery-ui.js.

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

使用 jQuery 对话框

Using jQuery Dialog

php

jquery

dialog