Question

I’m trying to set the attribute of an element programmatically, but firebug keeps giving the error: obj.setAttribute is not a function. I’m using jQuery so I’m going to show a bit of extra code so you can see the context.

The code is the following:

$j(function(){
  function callback(response) {

        if (response.status == 200) {
            var data = response.responseBody;
            console.log(data)
            if (data.length > 0) {
                var artistData = $j.parseJSON(data);
                var marker = new google.maps.Marker({
                      position: new google.maps.LatLng(artistData.location.lat, artistData.location.lng),
                      map: map
                    });

                var obj =  document.getElementById('ratingRender').firstChild;
                obj.setAttribute("model", "[artist: deftones, rating: 4.0, artistID: 1]");
                document.getElementById('recommendedList').appendChild(obj);
            }
        }
        }

    $j.atmosphere.subscribe('${resource(dir: '/atmosphere/recommend')}',
        callback,
        $j.atmosphere.request = {transport: 'streaming'});

    $j('#buttonPost').click(function() {
        var searchedArtist = '${search.artist}';
        $j.get('${createLink(action: "recommend")}?artist=' + searchedArtist);
    });
});

and the ratingRender div:

<div id="ratingRender" style="display: none">
    <g:render template="/artist/rate" model="[artist: deftones, rating: 3.0, artistID: 1]" />
</div>

Any ideas why is this happening?
Thank you very much!

UPDATE

I tried with this:

var obj =  $('#ratingRender').children().eq(0);
obj.attr("model", "[artist: deftones, rating: 4.0, artistID: 1]");

and it doesn’t give the error anymore. However, it is not modifying the attribute either. I don’t know why. Anyone?

Answer 1

Why dont you use jquery? try this

var obj =  $('#ratingRender').children().eq(0);
obj.attr("model", "[artist: deftones, rating: 4.0, artistID: 1]");