Getting string data returned from asmx webservice with AJAX

Question

I have an .asmx webservice that gets some data from my database and builds HTML using a stringbuilder (VB.net). When I get back and alert the data value of the ajax return I get the following:

{"d":"\u003cdiv class=\"col-md-6\"\u003e\u003cform id=\"frmShoppingCart\"\u003e\u003ctable class=\"table\"\u003e\u003ctr\u003e\u003ctd width=\"25%\"\u003e\u003cimg src=\"/images/productImages/BBO/B1021TRA-GRN-1.jpg\u003c/td\u003e\u003ctd width=\"75%\"\u003e\u003cselect id=\"seaCombo\" class=\"form-control\"\u003e\u003coption value=\"2\"\u003e2\u003c/option\u003e\u003coption value=\"1\"\u003e1\u003c/option\u003e\u003c/select\u003e\u003cbr /\u003e\u003cbr /\u003e\u003ch4\u003eB1021TRA\u003c/h4\u003e\u003cbr /\u003e\u003cbr /\u003e\u003ch5\u003e\u003csmall\u003ePrice: $26.00 MSRP: $55.00\u003c/small\u003e\u003c/h5\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\u003c!-- End Header Table --\u003e\u003c/div\u003e\u003c!-- col-md-6 --\u003e"}

Answer 1

Change your javascript to request 'json' dataType and use the .d property on your data like this:

function productPopup(sProductTitle, sStyleID) {
    $('#productModalLabel').html(sProductTitle);
    $.ajax({
        type: "POST",
        url: "/webservices/ProductServer.asmx/GetProductForPopup",
        data: "{ 'strStyleID':'"  + sStyleID + "' }",
        contentType: "application/json; character=utf-8",
        dataType: "json",
        success: function (data) {
            $("#contentDiv").html(data.d);
            alert("Success:" + data.d); },
        failure: function (xhr, ajaxoptions, thrownError) {
            alert("Error1:" + xhr.status);
            alert("Error2:" + thrownError);
        }
    });
    $('#productModal').modal();
}

You can see an explanation of why it is data.d here: http://encosia.com/a-breaking-change-between-versions-of-aspnet-ajax/