Question

首先，我很快成为jQuery的忠实粉丝。简单性真的引起了我的注意。我正在学习一些新的日常工作与jQuery，因为我已经很久没有使用它了。我使用SimpleModal并喜欢它的外观和感觉。我遇到了问题并且想知道是否有人可以帮助我。我有一个页面，最初调用数据库检索数据并使用数据填充gridview。我将OSX Style SimpleModal附加到gridview中的一个linkbutton并且工作得很棒！但是，我决定不使用服务器端代码调用数据库，我将调用一个.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

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

您告诉.ajax方法您希望Json返回，但实际上是在返回HTML。
由于某种原因，您的数据看起来像是字符串中的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)
    }
});

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

1 个答案: