1

我想根据主机页面发送的参数动态加载带有数据的模式窗口。主机页面将在表格中包含一组编辑链接。单击任何编辑链接应打开一个窗口，其中包含基于发送的行 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>
4

1 回答 1

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>

所做的更改：

  1. 将标题移至 JavaScript。您不能像这样设置标题属性<div id="dialogMsg" title="Editing " + StudentFirstName >。

  2. id将Edit链接的属性更改为class属性。id对于页面中的每个元素必须是唯一的。

  3. 在 JavaScript 中设置对话框标题。$(this).closest('tr').find('td:first').text()).dialog('open');. 在这里，我正在获取最近的父tr标签并获取第一td个子标签的文本。

编辑：

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

于 2013-05-06T21:47:17.523 回答