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/

is there a reason youre not using the JSON data type on your request? — prodigitalson
– prodigitalson, Commented Aug 8, 2010 at 3:23
Unrelated to the actual problem: you're overriding the values of the #txt elements on every loop so that they end up having the values of the last iteration. Is this really what you want? — BalusC
– BalusC, Commented Aug 8, 2010 at 3:35

brianpeiris · Accepted Answer · 2010-08-08 22:49:47Z

2

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.

edited Aug 8, 2010 at 22:49

answered Aug 8, 2010 at 3:52

brianpeiris

10.8k1 gold badge34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

brianpeiris Over a year ago

You're welcome Brandon. I've edited my answer with a response to your comment

prodigitalson · Accepted Answer · 2010-08-08 03:29:55Z

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);
                });
            }
        };

}

Collectives™ on Stack Overflow

How to parse HTML from a JSON array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related