Question

我想根据主页发送的参数动态加载一个带有数据的模态窗口。主页将在表中具有一组编辑链接。单击任何编辑链接应打开一个窗口，其中包含基于发送的行ID的相应数据。下面的代码不起作用。我需要进行哪些更改，以便在单击编辑链接时，我可以将rowid发送到'dialogMsg'div图层，以便可以将数据动态放入其中

<div id="dialogMsg" title="Editing " + StudentFirstName >
            Show other student details here
</div>

<table >
<tr>
    <td>
        James
    </td> <td><a href="#" id="editlink">Edit</a></td>
</tr>
<tr>
    <td>
        John
    </td> <td><a href="#" id="editlink">Edit</a></td>
</tr>
<tr>
    <td>
        Doe
    </td> <td><a href="#" id="editlink">Edit</a></td>
</tr>
</table>

<script type="text/javascript">

    $(document).ready(function () 
    {
        $("#dialogMsg").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Create an account": function () {
                    var bValid = true;

                    $(this).dialog("close");

                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }

        });


        $('#editlink')
        .click(function () {
            $('#dialogMsg').dialog('open');
        });
    });
</script>

Answer 1

我对您的代码进行了一些更改：

<div id="dialogMsg" title="Editing ">Show other student details here</div>
<table>
    <tr>
        <td>James</td>
        <td>
            <a href="#" class="editlink">Edit</a>
            <input type="javascript" class="personId" value="1" />
        </td>
    </tr>
    <tr>
        <td>John</td>
        <td>
            <a href="#" class="editlink">Edit</a>
            <input type="javascript" class="personId" value="2" />
        </td>
    </tr>
    <tr>
        <td>Doe</td>
        <td>
            <a href="#" class="editlink">Edit</a>
            <input type="javascript" class="personId" value="2" />
        </td>
    </tr>
</table>

<script type="text/javascript">
    $(document).ready(function () {
        $("#dialogMsg").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Create an account": function () {
                    var bValid = true;

                    $(this).dialog("close");

                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }

        });


        $('.editlink').click(function () {
            $('#dialogMsg')
                .dialog('option', 'title', "Editing " 
                    + $(this).closest('tr').find('td:first').text())
                .dialog('open');

            var personId = $(this).closest('tr').find('.personId').val();
            // work it out with the ID here
        });
    });
</script>

完成的更改：

将标题移至JavaScript。您无法像<div id="dialogMsg" title="Editing " + StudentFirstName >一样设置title属性。
将id链接的Edit属性更改为class属性。 id对于页面中的每个元素必须是唯一的。
在JavaScript中设置对话框标题。 $(this).closest('tr').find('td:first').text()).dialog('open');。在这里，我获取最近的父tr标记，并获取第一个td子标记的文字。

修改

为css类添加了ID的隐藏字段。该类可以在jQuery select中用于获取ID。

使用jquery在mvc 4中打开参数的模态窗口

1 个答案: