0

autoscrollという jQuery プラグインを使用して、サイトにコメントを表示しようとしています。ただし、AJAX を使用してデータベースからコメントを取得するのに苦労しており、template関数が呼び出されることはありません。

$(".Reviews").autobrowse({
    url: function (offset) {
        //return Healthimized.Services.ClientUserServices.LoadClientUserReviews(1, LoadCustomerToSelectOption, ErrorHandler, onTimeOut)
        $.ajax({
            type: "POST",
            url: 'Services/ClientUserServices.asmx/GetAllSpecialities',
            //data: parameters,
            contentType: "application/json; charset=utf-8",
            //data: { fromDate: new Date(), toDate: new Date(), clientUserId:1},
            //data: "{'fromDate':'" + startFrom + "','toDate':'" + endTo + "','clientUserId':'" + doctorId + "'}",
            dataType: "json",
            //data: 'fromDate=' + new Date() + '&toDate=' + new Date() + '&clientUserId='+1,
            success: function (msg) {
                return "http://twitter.com/status/user_timeline/ParisHilton.json?count=10&page=OFFSET&callback=?".replace(/OFFSET/, 1+Math.round(offset/10));
            },
            error: function (e) {
                $(divToBeWorkedOn).html("Unavailable");
            }
        });
    },
    template: function (response) {
        var markup='';
        for (var i=0; i<response.length; i++) {
            markup+='<div style="background:rgba(0, 0, 0, 0.1);margin: 2% 2% 2% 2%;border-radius: 0.5em 0.5em 0.5em 0.5em;"><table>';
            markup += '<tr><td>';
            markup += '<img src="' + response[i].user.profile_image_url + '" /></td>';
            markup += '<td style="margin-top:-15px">'+response[i].text+'</td>';
            markup += '</tr></table></div>';
        }
        return markup;
    },
    itemsReturned: function (response) { return response.length; },
    max: 100,
    loader: '<div class="loader"></div>',
    sensitivity: 100,
    finished: function () { $(this).append('<p style="text-align:center"><b>No More Reviews to show</b></p>') }
    });
});
4

1 に答える 1

0

まず第一に、あなたのコードは切り離されたコードの断片が混ざり合ったように見えます。data第 2 に、このプラグインは RESTful サービスでの動作に適しています。このサービスでは、パラメーターがクエリ文字列を介して送信され、ASP.NET Web サービス メソッドを呼び出して、ajax 要求オブジェクトを介してパラメーターを渡す必要があります。また、ASP.NET は、実際の応答データがdプロパティに格納されている JSON オブジェクトで ajax 要求応答をラップします。

これらすべての事実に基づいて、ASP.NET Web サービス メソッドで使用するには、プラグイン コードを少し変更する必要があります。これを行うには、このプラグイン コードを変更します。

if (options.postData)
{
    var data = null;
    if (typeof options.postData == "function")
    {
        data = options.postData();
    }
    else
    {
        data = options.postData;
    }

    jQuery.post(options.url(currentOffset), data, ajaxCallback, "json").error(options.onError);
}
else
{
    jQuery.getJSON(options.url(currentOffset), ajaxCallback).error(options.onError);
}

変更されたコード:

if (options.postData) {
    var data = null;
    if (typeof options.postData == "function") {
        data = options.postData(currentOffset);
    }
    else {
        data = options.postData;
    }

    jQuery.ajax({
        url: options.url(),
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: data,
        success: ajaxCallback,
        error: options.onError
    });
}
else {
    jQuery.getJSON(options.url(currentOffset), ajaxCallback).error(options.onError);
}

以下のような Web サービス コードがあるとします。

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class ClientUserServices : System.Web.Services.WebService
{
    [WebMethod]
    public string[] GetAllSpecialities(int index)
    {
        return Enumerable.Range(1, 20).Select(id => Guid.NewGuid().ToString()).ToArray();
    }
}

GetAllSpecialities次に、次のコードでメソッドを利用できます。

<script type="text/javascript">
     $(function () {
          $("#Reviews").autobrowse({
               url : '<%= ResolveClientUrl("~/Services/ClientUserServices.asmx/GetAllSpecialities") %>',
               postData: function (index) {
                    return "{ 'index' :" + index + "}";
               },
               template: function (response) {
                    response = response.d;
                    var markup = '';
                    for (var i = 0; i < response.length; i++) {
                         markup += "<div>" + response[i] + "</div>";
                    }
                    return markup;
               },
               itemsReturned: function (response) {
                    return response.d.length;
               },
               offset: 0,
               max: 10000,
               useCache: true,
               expiration: 1,
               onError: function (error) {
               }
          });
     });
</script>

<div id="Reviews">
</div>
于 2012-09-17T09:08:19.413 に答える