jquery append not working in IE/Firefox

Question

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"}

Do you have a sample of what is contained in the JSON response? — Martijn Pieters
– Martijn Pieters, Commented May 25, 2011 at 10:38
I created a jsFiddle out of this thing. Works for me in Firefox. — kapa
– kapa, Commented May 25, 2011 at 12:07
Johnny Fartburger lives in IE and Firefox. Hmmm. maybe I need to implement this with ` $(document).ready(function() {});` — sdolgy
– sdolgy, Commented May 25, 2011 at 12:27

lonesomeday · Accepted Answer · 2011-05-25 10:35:11Z

3

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.

answered May 25, 2011 at 10:35

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

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

1 Comment

sdolgy Over a year ago

I tried this ... didn't fix the behavior in Firefox ;; however, thank you for the improvement tip for the code. Optimize is part 2 after functional is fixed!

sdolgy · Accepted Answer · 2011-05-26 18:18:20Z

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.

Benoît · Accepted Answer · 2011-05-25 10:35:51Z

0

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

answered May 25, 2011 at 10:35

Benoît

7,4272 gold badges28 silver badges30 bronze badges

Comments

GolezTrol · Accepted Answer · 2011-05-25 10:38:14Z

0

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.

answered May 25, 2011 at 10:38

GolezTrol

116k19 gold badges186 silver badges215 bronze badges

1 Comment

sdolgy Over a year ago

Modifying the code and using your suggestion didn't make a difference? $('.fullname').text(data.fullname); $('.nickname').text(data.nickname);

kapa · Accepted Answer · 2011-05-25 10:50:27Z

0

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

edited May 25, 2011 at 10:50

kapa

78.9k21 gold badges166 silver badges178 bronze badges

answered May 25, 2011 at 10:41

MLS

8951 gold badge9 silver badges17 bronze badges

2 Comments

MLS Over a year ago

sometimes similar minor problems are automatically solved by refreshing browsers. if u see output on console, then except implemented styling, it must appear.

sdolgy Over a year ago

MLS .. your comment was the right hint. the json output wasn't showing in the console for IE9 which is what got me onto the answer. cheers

DarthJDG · Accepted Answer · 2011-05-25 10:51:56Z

0

.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.

edited May 25, 2011 at 10:51

answered May 25, 2011 at 10:35

DarthJDG

16.6k11 gold badges52 silver badges56 bronze badges

2 Comments

lonesomeday Over a year ago

That's true, but it's hardly the problem here. A selector in Firefox would be a selector in Chrome too.

DarthJDG Over a year ago

@lonesomeday: You're right, it seems I've got my own RTFM to do. I edited my answer as if nothing happened, now it's not wrong, just irrelevant. :)

Collectives™ on Stack Overflow

jquery append not working in IE/Firefox

6 Answers 6

1 Comment

Comments

Comments

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related