Question

I’m using a simple line of jquery to load a new “song meaning” when a link is clicked. This works fine on Chrome and IE, but it doesn’t change in Firefox. I’m passing the song ID with the ‘sid’ variable so that the loadmeaning.php knows what song we’re looking for.

$('#songmeaning').load('/music/ajax/loadmeaning.php', "sid="+id);

I turned on Firebug and I notice that it is actually pulling the data from loadmeaning.php successfully, it just doesn’t replace the content of #songmeaning – and again, only in Firefox.

Has anyone else run into this problem, or can offer some tips?

Here’s the HTML used around the songmeaning element

<div class="meaning">
    <div id="refresh" onclick="refreshMeaning(<?=$songID;?>)"><img src="/images/refresh_icon.png" height="16" width="16" title="Load More Meanings"></div>
    <div id="songmeaning" class="indent"><?=$songMeaning;?></div>
</div>

Thanks.

Answer 1

Double-check your DOM structure to ensure that songmeaning is truly a unique ID. If it’s not unique, different browsers may give you different results when you try to use it. Other than that, I can’t think of anything. Do you get any errors in Firebug?

Edit Right now (2010-10-29 22:24 BST) clicking that refresh link doesn’t do anything for me in either Firefox or Chrome. The code is:

$('#songmeaning').get('/music/ajax/loadmeaning.php', "sid="+id);

That get should be load. But I’m assuming you’ve made some change? Since your title says load…

Edit Right now (2010-10-30 09:07) it works just fine on Firefox 3.6, the code has changed again:

$('#refresh').html("<img src='/images/loading.gif' height='20' width='20' title='Loading'>");
$('#songmeaning').fadeOut('fast');
var refreshIcon = function refreshIcon() { $('#songmeaning').fadeIn(); $('#refresh').html("<img src='/images/refresh_icon.png' height='16' width='16' title='Load More Meanings'>"); }
$('#songmeaning').load('/music/ajax/loadmeaning.php', "sid="+id, refreshIcon);