How to parse HTML from a JSON array

Question

I'm using the jHTMLArea editor, and I'm having a problem with populating my textarea controls with html coming from a json array object. All html elements contains both the forward and backward slashes in them, <tr \/>. For example, txtOrganization is a textarea control that accepts html, but when I run the code below, the control is blank.

Also below is a sample of the json array being return from the service. If I enter the data manually like so:

$("#txtByline").val('<P>Testess<\/P>\r\n<P>&nbsp;<\/P>');

everything works.

 function LoadForm(PublicationID) {
    /*
        $("#txtByline").val('');*/
        PublicationID = 41;
        var ajaxOpts = {
            type: "post",
            url: "../JSONService.php?Method=GetPublication&PublicationID=" + PublicationID + "",
            data: "",
            success: function (data) {
                var dataObject = eval('(' + data + ')');
                var opt;
                for (var a = 0; a < dataObject.length; a++) {
                    var item = dataObject[a];
                    $("#txtTitle").val(item.Title);
                    $("#txtSubTitle").val(item.SubTitle);
                    $("#selType").val(item.Type);
                    $("#txtDate").val(item.DateTime);
                    $("#txtContactName").val(item.ContactName);
                    $("#txtContactPhone").val(item.ContactPhone);
                    $("#txtContactEmail").val(item.ContactEmail);
                    $("#txtOrganizationTitle").val(item.OrganizationHTML);
                    $("#txtByline").val(item.Byline);
                    $("#txtBody").val(item.Body);
                    $("#txtClosingBody").val(item.BodyClosing);
                    $("#txtQuote").val(item.Quote);
                    $("#txtDescription").val(item.Description);
                    $("#txtFootnote").val(item.FootNote);
                }
            }
        }



 ([{"Type":"About","Year":"2010","DateTime":"08\/07\/2010","ContactName":"test","ContactPhone":"test","ContactEmail":"test","OrganizationHTML":"<P><A href=\"http:\/\/www.iup.edu\">Orrick<\/A><\/P>","Title":"test","SubTitle":"test","Byline":"<P>Testess<\/P>\r\n<P>&nbsp;<\/P>","Body":"<H1>sdfsdfsdfsdfsd<\/H1>\r\n<H1>dfgdfgdfgdf<\/H1>\r\n<H1>dfgdfgdfdfgdf<\/H1>","BodyClosing":"<UL>\r\n<LI>fghgfhgf<\/LI><\/UL>","Quote":"<P align=center>dfgdfgdfgdf<\/P>","Description":"test","FootNote":"test","IsActive":null,"RegionID":"0","PageID":"0","ID":"41","FileID":null,"FileText":null,"FileUrl":null,"ImageID":null,"ImageCaption":null,"ImagePath":null,"KeyWordID":null,"KeyWords":null,"LinkID":null,"LinkUrl":null,"LinkText":null}])

http://jhtmlarea.codeplex.com/

Answer 1

You have to tell jHtmlArea to update itself after you set the value of the underlying textarea:

$("#txtOrganizationTitle").val(item.OrganizationHTML).htmlarea('updateHtmlArea');

In response to your comment:

jHtmlArea doesn't have great documentation (unless you're using intellisense in Visual Studio along with jHtmlArea's vsdoc file.) but it's code is not too hard to read through. It follows the same pattern that most jQuery plugins do, so I was able to find out what methods they make available, updateHtmlArea being one of them.

Answer 2

Try this:

function LoadForm(PublicationID) {
        PublicationID = 41;
        var ajaxOpts = {
            type: "post",
            dataType: 'JSON',
            url: "../JSONService.php?Method=GetPublication&PublicationID=" + PublicationID + "",
            data: "",
            success: function (dataObject) {
                var opt;
                jQuery.each(dataObject, function(i,item){
                    $("#txtTitle").val(item.Title);
                    $("#txtSubTitle").val(item.SubTitle);
                    $("#selType").val(item.Type);
                    $("#txtDate").val(item.DateTime);
                    $("#txtContactName").val(item.ContactName);
                    $("#txtContactPhone").val(item.ContactPhone);
                    $("#txtContactEmail").val(item.ContactEmail);
                    $("#txtOrganizationTitle").val(item.OrganizationHTML);
                    $("#txtByline").val(item.Byline);
                    $("#txtBody").val(item.Body);
                    $("#txtClosingBody").val(item.BodyClosing);
                    $("#txtQuote").val(item.Quote);
                    $("#txtDescription").val(item.Description);
                    $("#txtFootnote").val(item.FootNote);
                });
            }
        };

}