Question

I am trying to inject an html string into a div, but am having a problem. The return from csharp method I pass is not what what is showing up in the div.

JavaScript Function…

$.ajax({
    type: "POST",
    url: "MainPage.aspx/mapBuildLegend",
    data: dataOut,
    contentType: "application/json; charset=utf-8",
    dataType: "text",
    success: function (text) { $('#divLegend').html(text); },
    error: function () { alert('Could Not Load Legend!'); }
});

String Returned from C Sharp Web Method

    "<table><tr><th>Color</th><th>Range</th></tr><tr><td><div class='divColorSwatch' style='background-color:#D3D3D3;'></div></td> <td> <div class='divColorLabel''>0 To 4.9999</div></td></tr><tr><td><div class='divColorSwatch' style='background-color:#FFC8C8;'></div></td> <td> <div class='divColorLabel''>5 To 9.9999</div></td></tr><tr><td><div class='divColorSwatch' style='background-color:#FF9696;'></div></td> <td> <div class='divColorLabel''>10 To 14.9999</div></td></tr><tr><td><div class='divColorSwatch' style='background-color:#FF6464;'></div></td> <td> <div class='divColorLabel''>15 To 19.9999</div></td></tr><tr><td><div class='divColorSwatch' style='background-color:#FF3232;'></div></td> <td> <div class='divColorLabel''>20 To 24.9999</div></td></tr><tr><td><div class='divColorSwatch' style='background-color:#FF0000;'></div></td> <td> <div class='divColorLabel''>25 To 100</div></td></tr></table>"

What ends up in my div…

    {"d":"\u003ctable\u003e\u003ctr\u003e\u003cth\u003eColor\u003c/th\u003e\u003cth\u003eRange\u003c/th\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cdiv class=\u0027divColorSwatch\u0027 style=\u0027background-color:#D3D3D3;\u0027\u003e\u003c/div\u003e\u003c/td\u003e \u003ctd\u003e \u003cdiv class=\u0027divColorLabel\u0027\u0027\u003e0 To 4.9999\u003c/div\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cdiv class=\u0027divColorSwatch\u0027 style=\u0027background-color:#FFC8C8;\u0027\u003e\u003c/div\u003e\u003c/td\u003e \u003ctd\u003e \u003cdiv class=\u0027divColorLabel\u0027\u0027\u003e5 To 9.9999\u003c/div\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cdiv class=\u0027divColorSwatch\u0027 style=\u0027background-color:#FF9696;\u0027\u003e\u003c/div\u003e\u003c/td\u003e \u003ctd\u003e \u003cdiv class=\u0027divColorLabel\u0027\u0027\u003e10 To 14.9999\u003c/div\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cdiv class=\u0027divColorSwatch\u0027 style=\u0027background-color:#FF6464;\u0027\u003e\u003c/div\u003e\u003c/td\u003e \u003ctd\u003e \u003cdiv class=\u0027divColorLabel\u0027\u0027\u003e15 To 19.9999\u003c/div\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cdiv class=\u0027divColorSwatch\u0027 style=\u0027background-color:#FF3232;\u0027\u003e\u003c/div\u003e\u003c/td\u003e \u003ctd\u003e \u003cdiv class=\u0027divColorLabel\u0027\u0027\u003e20 To 24.9999\u003c/div\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cdiv class=\u0027divColorSwatch\u0027 style=\u0027background-color:#FF0000;\u0027\u003e\u003c/div\u003e\u003c/td\u003e \u003ctd\u003e \u003cdiv class=\u0027divColorLabel\u0027\u0027\u003e25 To 100\u003c/div\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e"}

Thank you for any help,

Eric

Answer 1

Looks like it’s returning JSON. Try

$('#divLegend').html(text.d);

UPDATE

If that doesn’t work, then you need to just convert the returned text into a JSON object first:

var jText = JSON.parse(text);
$('#divLegend').html(jText.d);