Ajax call shows plain html

Question

I have CKEditor & i save that as a Html in my database.Then i'm going to get that saved html stream & show it inside div But it shows the html codes.

My webmethod return below line

<p> <strong>Test Heading </strong></p> <p> <img alt="" src="http://s7.postimg.org/511xwse93/mazda_familia_photo_large.jpg" style="width: 150px; height: 112px;" /></p> <p> test description goes here</p>

Div

<div id="usrnewsdesc"></div>

My Ajax Call

     function LoadNewsToUsers() {
       debugger;

       var newurl = '<%= ResolveUrl("/WebMethods.aspx/GetIndividualUserNews") %>';

        $.ajax({
            url: newurl,
            type: "POST",
            data: JSON.stringify({ ToUser: "<%=GetUserID()%>" }),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (Result) {
                $.each(Result.d, function (key, value) {

                    var html ="<body>"+value.News+"</body>";
                    $("#usrnewsdesc").append(html);

                });

            },


            error: function (e, x) {
                alert(x.ResponseText);
            }
        });
    }

My div looks like this mydiv

My WebMethod

 [WebMethod, ScriptMethod]
public static List<UserNews> GetIndividualUserNews(Guid ToUser)
{
    List<UserNews> UserNewsDetails = new List<UserNews>();
    try
    {
        SqlCommand comGetAllFiles = new SqlCommand("SP_GetNewsToUser", conDB);
        comGetAllFiles.CommandType = CommandType.StoredProcedure;
        if (conDB.State == ConnectionState.Closed)
            conDB.Open();
        comGetAllFiles.Parameters.Add("@ToUser", SqlDbType.UniqueIdentifier);
        comGetAllFiles.Parameters["@ToUser"].Value = ToUser;

        SqlDataReader rdr = comGetAllFiles.ExecuteReader();
        DataTable dt = new DataTable();
        dt.Load(rdr);
        foreach (DataRow r in dt.Rows)
        {
            UserNewsDetails.Add(new UserNews
            {
                Id = (int)r["Id"],
                News = r["News"].ToString(),
                DateTime =(DateTime) r["DateTime"],
                ToUser = (Guid)r["ToUser"]

            });
        }

    }
    catch (Exception ee)
    {
    }
    finally
    {
        conDB.Close();
    }
    return UserNewsDetails;
}

Console.log is below

  &lt;p&gt;
    &lt;strong&gt;Test Heading &lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;
    &lt;img alt=&quot;&quot; src=&quot;http://s7.postimg.org/511xwse93/mazda_familia_photo_large.jpg&quot; style=&quot;width: 150px; height: 112px;&quot; /&gt;&lt;/p&gt;
&lt;p&gt;
    test description goes here&lt;/p&gt;

Inside the div it shows the webmethod return html coding as it is — TechGuy, May 02 '14 at 18:15
@themerlinproject i use $("#usrnewsdesc").html(html); but not success — TechGuy, May 02 '14 at 18:15
@themerlinproject [not true](http://jsbin.com/ruxame/1/edit) — Pointy, May 02 '14 at 18:16
@GSiry CKEditor saved html looks like this
Test Heading

test description goes here — TechGuy, May 02 '14 at 18:25
Take the HTML that is in your db. Paste it in notepad. Save as HTML and open in your browser .. See what shows up — G-Man, May 02 '14 at 18:25
Hey.. It looks like you are appending a body tag to a div.. Is that legit ? — G-Man, May 02 '14 at 18:27
Appending the `` tag is invalid but I don't *think* it'd cause the problem. @TechGuy you definitely should not be doing that in any case. You need to look at the actual JSON in the response; your browser can show you that in the developer tools. — Pointy, May 02 '14 at 18:28
@Pointy I am wondering if some browsers might not render the HTML correctly because of invalid HTML.. — G-Man, May 02 '14 at 18:31
@Pointy I checked it with Firebug & alertResult.d & it shows [Object,Object] — TechGuy, May 02 '14 at 18:33
@GSiry I just save exact return html stream in .html file..It's working fine — TechGuy, May 02 '14 at 18:34

score 1 · Accepted Answer · edited May 23 '17 at 12:28

You need to decode your html content before you can use it as html.

success: function (Result) {
    $.each(Result.d, function (key, value) {

        var html = $("<div/>")        // temp container
                    .html(value.News) // "render" encoded content to text
                    .text();          // retrieve text (actual html string now)

        // body tags are a bad idea here but whatever.
        html = "<body>" + html + "</body>"; 

        $("#usrnewsdesc").append(html);

    });

},

With credit to this post for the decoding instruction: How to decode HTML entities using jQuery?

brainless coder · Answer 2 · 2014-05-02T19:39:50.827

0

You are seeing the correct output. No wrong is there. It is HTML Encoded, you have to decode it. You can use NewtonSoft json serializer to Decode it. Convert it and then return it from server side. Better if you could replace on the javascript side before applying it with append, because if the server return sometimes, your client js will be broken Other than this all codes are okay

Try replacing quotes with js -

var s = value.News.replace('&lt;','<').replace('&gt;','>').replace('&squote','\'').replace('&quote','"');
$("#usrnewsdesc").html(s);

may be this will help or use NewtonSoft JSON serializer-

edited May 02 '14 at 19:39

answered May 02 '14 at 18:40

brainless coder

6,310
1
20
36

Can you show the server side action code that is returning the result? – brainless coder May 02 '14 at 18:59
when i use your edited code it shows the error in firebug console is TypeError: value.Niews is undefined – TechGuy May 02 '14 at 19:33
Now it shows the plain html code inside div like this Test Heading

test description goes here
– TechGuy May 02 '14 at 19:36
Edited again... if this does not fix, may be you need to look into encoding and decoding. – brainless coder May 02 '14 at 19:40
No.it also same plain html looks like – TechGuy May 02 '14 at 19:42

Ajax call shows plain html

2 Answers2