jQuery AJAX converting variable string to html styled text

Question

I've got an AJAX transmission of a variable string in my primary coding language (Visual FoxPro 9) that looks like this:

     AjaxResponse = CREATEOBJECT("Custom")
     lcMessage = "<li class='hello'>Hello</li>"
     AjaxResponse.AddProperty("Reply", lcMessage)
     Response.ContentType = "text/html"
     Response.Write(AjaxResponse.Reply)

While using the jQuery function .ajax() I've created a success: function that looks like this:

        $.ajax({
            url: 'index?Proc=GetUuserHistory',
            dataType: "html",
            success: function(data){
               $("div#history-text").html('<ul>' + data + '</ul>');
            };
         });

My problem is that the text inserting into 'div#history-text' is unformatted and contains the li tags still. I've tried substituting the .text for .prepend, .append, and .html with no luck...is there a way to convert this string back to html format after its been received using Ajax?

Answer 1

Instead of .text() use .html() like this:

$("div#history-text").html(data);

Make sure that you're inserting the <li> into <ul> (you're currently inserting into a <div>) and this will work, inserting it like this: <div><li>Stuff</li></div>...is invalid HTML, not sure what the display results will be, especially cross-browser.

Edit: for future users, make sure any styles aren't affecting the display of your newly added elements :)

Answer 2

Have you tried using .load() instead of .ajax().