jQuery AJAX Get html is put like text

Question

I have this ajax function

   $.ajax({
        url: requestUrl,
        type: 'get',
        dataType: 'html',
        beforeSend: function() {
        },
        complete: function() {
        },      
        success: function(html) {

        var tab_item = document.getElementById(tab);
            try{
                tab_item.innerHTML = html;
            }catch(e){
                tab_item.innerText = html;
            }
       }
    });
    }

}

with tab and requestUrl vars set before ajax. The response is

<p>&</p>
<p>
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
</p>
<div style="font-family: Arial, Verdana, sans-serif; font-size: 12px; color: rgb(34, 34, 34); background-color: rgb(255, 255, 255); ">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at.</p>
</div>
<p>&</p>

It is placed in a div and looks like this

<p> &nbsp;</p> <p> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> </p> <div style="font-family: Arial, Verdana, sans-serif; font-size: 12px; color: rgb(34, 34, 34); background-color: rgb(255, 255, 255); "> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at.</p> </div> <p> &nbsp;</p> 

Instead of try-catch I used $('#'+tab).html(html) and $('#'+tab).text(html) but they either don't have result or the result is the same. I also tried the json dataType but I had similar problems.

What do I miss ? Should I use a different DOM element ?

Answer 1

It seems that your server it's sending you an html encoded response. I think you should html decode the response before inserting it in the tab.

You can do it so by using a javascript html decoder or use the trick from this post:

How to decode HTML entities using jQuery?

Basically it is:

var decoded = $("<div/>").html(encodedStr).text();