如何让 OSX 样式 SimpleModal 与动态链接按钮一起使用

Question

首先，我很快就成为了 jQuery 的忠实粉丝。简洁真的引起了我的注意。我每天都在学习使用 jQuery 的新东西，因为我已经很久没有使用它了。我使用过 SimpleModal 并且喜欢它的外观和感觉。不过，我遇到了问题，想知道是否有人可以帮助我。我有一个页面，它最初是调用数据库检索数据并用数据填充网格视图。我将 OSX 样式 SimpleModal 附加到 gridview 中的链接按钮，效果很好！但是，我决定不让服务器端代码调用数据库，而是使用 .ajax 调用来检索数据。显然，我无法使用来自 .ajax 调用的数据填充 gridview，因此我决定动态创建一个带有表内链接的表，希望它能够以与 gridview 链接相同的方式启动 OSX Style SimpleModal。但令我沮丧的是，它没有。我想知道是否有人对如何让它工作有任何想法，或者可能建议一种不同的技术来显示从 .ajax 调用返回的数据。

这是我的 jQuery 代码：

  $('#cmdSubmit_Create').click(function () {
        var allowCodes;
        if ($('#chkAllowValueCodes').is(':checked')) {
            allowCodes = 1;
        }
        else {
            allowCodes = 0;
        }

        $.ajax({
            type: "POST",
            url: "Test.aspx/createSource",
            data: '{"schoolId":"' + $('#ddSchools').val() + '","vendor":"' + $('#txtVendor').val() + '","tsource":"' + $('#txtTSource').val() + '","allowCodes":"' + allowCodes + '"}',
            contentType: "application/json",
            dataType: "json",
            success: function (msg) {
                // Replace the div's content with the page method's return.
                document.getElementById('divResults').innerHTML = msg.d;
            },
            error: function (xhr, status, error) {
                alert('error' + error)
            }
        });
        return false;
    });

这是我的代码隐藏：

[WebMethod]
public static string createSource(string schoolId, string vendor, string tsource, int allowCodes)
{
    try
    {
        dsResults = Common.CreateHandPSource(tsource, schoolId, vendor, allowCodes);

        return BuildTable(dsResults.Tables[0]);
    }
    catch
    {
        throw new Exception("Could not create source code!");
    }
}

public static string BuildTable(DataTable dt)
{
    StringBuilder sb = new StringBuilder();

    int x = 0;
    int y = 1;
    int colCount = dt.Columns.Count;

    sb.Append("<table><thead>");

    foreach (DataColumn column in dt.Columns)
    {
        sb.Append("<th>" + column.ColumnName + "</th>");
    }

    sb.Append("</thead><tbody>");

    foreach (DataRow row in dt.Rows)
    {
        sb.Append("<tr>");
        do
        {
            sb.Append("<td>");

            if (y == 0)
            {
                sb.Append("<a href='#' class='osx'  OnClientClick='showFields(this)' >" + row["SchoolId"] + "-" + row["title"] + "</a>");
            }
            else
            {
                sb.Append(row[y]);
            }

            sb.Append("</td>");
            y++;
        }
        while (y < colCount);
        sb.Append("<tr>");
        y = 0;
    }

    sb.Append("</tbody></table>");

    return sb.ToString();

}

解决方案：

我在链接的 live.hover 上初始化 OSX 模式，并允许链接启动 OSX SimpleModal 的点击功能。代码如下：

    $('.osx').live('hover', function () {
        OSX.init();
    });

Answer 1

我看到了两个潜在的问题...

1. 您告诉 .ajax 方法您希望返回 Json，但实际上返回的是 HTML。

2. 由于某种原因，您的数据看起来像字符串中的 Json 对象。

试试这个：

$.ajax({
    type: "POST",
    url: "Test.aspx/createSource",
    data: { schoolId: $('#ddSchools').val(), vendor: $('#txtVendor').val(), tsource: $('#txtTSource').val(), allowCodes: allowCodes},
    dataType: "html",
    success: function (msg) {
        // Replace the div's content with the page method's return.
        $('#divResults').clear().html(msg);
    },
    error: function (xhr, status, error) {
        alert('error' + error)
    }
});