jQuery .html(someHTML) is not working

Question

I have a script that makes an ajax request to the server. Then the server returns HTML code. After the request finish, I want to take the HTML code and put it on my site.

The problem that I am having is that the function .html() will display the html as text instead of making it an html.

Here is what I have done

var postData =
{
    'campaign_id': 1,
    'page_role': 'intro'
};

$.ajax({
    type: 'POST',
    url: 'url/to/get/html',
    data: postData,
    dataType: "text",
    beforeSend: function(jqXHR, settings){
        $('#MasterContentViewer').html('<div class="well innerwell">' +
                                            '<h3>Please wait while loading the next page</h3>'+
                                        '</div>');
    },
    error: function( jqXHR, textStatus, errorThrown ){

        alert('Loading content failed! Error Code: ' + jqXHR.status);
    },
    success: function(page){

        $('#MasterTable').removeClass('heightForIFrame');
        $('#MasterContent').removeClass('heightForIFrame');

        $('#MasterContentViewer').html(page);

    }
}).done(function(page) {

    var tags = $("meta[name^='is_system_'],meta[name^='is_attr_']" );

    $.each(tags, function(index, tag){

        var value = $(tag).attr('value');

        var name = $(tag).attr('name').replace('is_attr_', '').replace('is_system_', '');

        $('#attr_' + name + ':input').val( value );
        $('#attr_' + name).not('input').text( value );

        $('.attr_' + name + ':input').val( value );
        $('.attr_' + name ).not('input').text( value );

    });

I tried to change the following like

$('#MasterContentViewer').html(page);

to

$('#MasterContentViewer').empty().append(page);

which also did not work.

I also tried to change the dataType from "text" to "html" which also did not work.

How can I make the force the page to display html code instead of text?

UPDATED

Here is sample of what the user sees on the screen

<strong>Store Name: </strong><span class="attr_storename"></span> </div> <div class="scripter_header_label"> <strong>Store Number: </strong><span class="attr_alt_id_1"></span>

Have you checked if the response that you're recieving is an HTML string instead of rendered HTML ? — stark, Feb 18 '16 at 21:55
Not sure what you mean exactly but my page show the html tags for the user instead of rendering the html — Junior, Feb 18 '16 at 21:56
Could you post the value that you receive in your `page` variable ? — stark, Feb 18 '16 at 21:57
I just updated my question. will the server need to add a header to the response? — Junior, Feb 18 '16 at 22:00
Your server is probably encoding the HTML in some way. Have you checked to see what response you're actually getting? — Dave, Feb 18 '16 at 22:01
@DFriend I tried that before posting my question please read my question — Junior, Feb 18 '16 at 22:02
@Stryner thank you for your comment as that is what helped me fix the problem. my response had > instead of <. after changed the > to < everything worked! If you post an answer I will accept it. — Junior, Feb 18 '16 at 22:33

score 0 · Accepted Answer · edited May 23 '17 at 12:15

If .html(string) is appending elements as text, then that means that the elements are already HTML Encoded (e.g., <'s are in the string as >'s). jQuery will only encode html if you tell it to by using .text(string) instead of html(string).

Two possible solutions are:

Modify your server-side code to send non-encoded HTML
HTML Decode the string using Javascript (I would not recommend this method, however, because it caters to HTML Injection attacks).

jQuery .html(someHTML) is not working

1 Answers1