CODEWITHSUNDEEP
javascriptjquery
sdolgy
sdolgy

Reputation: 7001

jquery append not working in IE/Firefox

I have the following HTML and subsequent jQuery which appends the related HTML elements after the JSON request has been retrieved.

This implementation works in Google Chrome + Android browser + Safari, but is not populating the data in Firefox or Internet Explorer 9.

** Works in Chrome, Android browser, Firefox 4 ... does not work in Firefox 3.x and IE.

Static HTML: 

   <header class=line>
                       <div class="unit size3of4">
                            <h2 class="fullname"></h2>
                            <h4 class="nickname"></h4>
                       </div>
   </header>

The jQuery code: 

<script>
function load_user_info() {
        var content_url = 'rest.api.url.com';
        $.getJSON(content_url, {id:'11xx1122xx11'}, function(data){
            console.log(data);
            $.each(data, function(key, value) {
                if (key == "fullname") {$('.fullname').append(value);}
                else if (key == "nickname") {$('.nickname').append(value);}
            });
         });
    }

 load_user_info();
 </script>

Slightly confused about the behavior between browsers. I can guarantee the JSON request is returning two variables: fullname & nickname and have confirmed this

In Firefox using the FireBug plugin I see the results of console.log(data).
In Chrome I see the results of the console.log(data) and the successful display of the fullname & nickname in the HTML after the JSON request.

Using jQuery 1.6.1 if it helps ...

JSON Output:

 {"fullname":"johnny fartburger", "nickname":"jf"}

Upvotes: 1

Views: 6756

Answers (6)

sdolgy
sdolgy

Reputation: 7001

The resulting problem was from the actual JSON data not being retrieved in IE. Hours and hours of search turned up the problem was that XDomainRequest is not natively supported by jQuery, specifically in a $.getJSON request

http://bugs.jquery.com/ticket/8283

In the end, I wrote a try {} catch {} statement that checks to see if $.browser.msie and if it is, do not use $.getJSON to retrieve the results, rather:

if ($.browser.msie) {
 var xdr = new XDomainRequest();
 xdr.open('GET', url);
 xdr.onload = function() {
     var data = $.parseJSON(this.responseText);
     show_data(data);                
 }
 xdr.send();
} else {
 $.getJSON(url, function(data){
     show_data(data);
 });
}

So ... conclusion append does work in IE (7/8/9) and Firefox (3/4) but not when the AJAX results aren't being returned. Thanks everyone for your help and insight.

Upvotes: 1

DarthJDG
DarthJDG

Reputation: 16591

.append() takes a HTML string as a parameter to append to the existing content. You probably want to replace the element's text, use .text() or .html() instead, depending on the contents of the value variable.

Upvotes: 0

MLS
MLS

Reputation: 895

as an alternative with appendTo, try to use .text() too

Upvotes: 0

GolezTrol
GolezTrol

Reputation: 116190

And what does data contain? I think .append is used to append elements. If data is plain text, that might not work (haven't tried it actually). Chrome uses a different engine and may convert the text to a textnode in the DOM.

Use .text() or .html() to set the contents of an element.

Upvotes: 0

Beno&#238;t
Beno&#238;t

Reputation: 7427

.append(value) is not very safe (for example if value="div").
You should use .html(value)

Upvotes: 0

lonesomeday
lonesomeday

Reputation: 238115

I'm slightly perplexed by what you're doing. I think the following code:

$.each(data, function (key, value) {
    if (key == "fullname") {
        $('.fullname').append(value);
    } else if (key == "nickname") {
        $('.nickname').append(value);
    }
});

could be more easily represented by this:

$('.fullname').append(data.fullname);
$('.nickname').append(data.nickname);

I don't know if this will solve your problem, but it would certainly be an improvement.

Upvotes: 3

Related Questions