Please help me fix this Jquery function and figure out a fallback in case Javascript is disabled.

Question

This code is supposed to get the id from a clicked anchor tag in the middle of a ul with the id 'links' and then use that id for other purposes across the page, however the alerts have shown me that I keep getting 'undefined' as if the element has no id. I double check my source code and they do indeed have ids, so I'm not sure what the problem is.

$(function() {      
    $('ul#links > li > a').click(function() {

        var planet = $(this).id;
        alert(planet);
        $('#planet').removeClass();
        $('#planet').addClass('planet');

        var bg = 'black url(../img/' + planet + '.jpg) fixed no-repeat center';
        alert(bg);
        $('body').css('background', bg);
    });             
});

Also this Jquery function is being used as a Javascript way of handling this kind of situation. I already had implemented a PHP solution which involved being redirected to a quick script that sets a cookie and returns the user to the previous page, then using the cookie to load a new CSS. Is there a way I could use that method as a backup to the JS method in the case that JS is disabled?

The page - http://schnell.dreamhosters.com/folio/

Answer 1

You are creating a jQuery object from the element and try to get the id from that. It would would if you use the attr method, but you should just get the id from the element itself:

var planet = this.id;

As for the backup method, that sounds plausible. However, instead of linking to a different page I would link to the same page with a querystring that determines what to show.

Answer 2

$(this).id is where the issue is... use $(this).attr('id')

Answer 3

You were pretty close:

$(function() {      
  $('ul#links > li > a').click(function() {
    var planet = this.id;
    $('#planet').removeClass().addClass("plane");
    var bg = 'black url(../img/' + planet + '.jpg) fixed no-repeat center';
    $('body').css('background', bg);
    return false;
  });             
});

Firstly, this.id will get you the ID. The jQuery alternative is $(this).attr("id").

Second, you can chain addClass() and removeClass() to save looking up the element twice. This isn't necessary for your problem but is good practice.

Third, unless you want your link to traverse somewhere you need to either prevent the default action (by calling evt.preventDefault() on the event object passed to the callback) or simply ending with return false; (which also does evt.stopPropagation()).

Lastly, what you're doing is well-suited to working with Javascript disabled because you can go to a page that does the same thing. I wouldn't bother with setting the cookie and redirecting. If the script name URI is /view/planet.php do this:

<a id="saturn" href="/view/planet.php?planet=saturn">Saturn</a>

Inside the same script you can do (I'm assuming PHP here; I didn't see any mention of what you use):

$planets = array(...);
$planet = $_GET['planet'];
if (in_array($planet, $planets)) {
  echo <<<END
<style type="text/css">
body { background: black url(.../img/$planet.jpg) fixed no-repeat center; }
</style>
END;
}

while rendering the page.