Question

Why does this not work?

$( ["blog","user","forum"] ).each(function(num,opt) {
    if ( window.location.pathname.indexOf(opt) != -1 ) {
        $('#rb-' + opt).attr('checked','checked');
        return false;
      }
});

When I input $('#rb-blog').attr('checked','checked'); it works as expected?

console.log(typeof opt) produces string and the expected value.

— UPDATE —

I’ve just seen the html is being written to the page via ajax and is executed on .ready() 🙁 Thanks for the help all, much appreciated.

Answer 1

Solution: the HTML content was not yet written to the page, so now we wait for ajax requests to complete, then we call the function to update the select value, like so…

// apply checked to the selected element
function setAsChecked() {
    $.each(["blog","user","forum"], function(num,opt){
        if (window.location.pathname.indexOf(opt) != -1) {
            $('#rb-' + opt, '.radio_menu').attr('checked','checked');
            return false;
        }
    });
}

// $('.radio_menu').ajaxStop(function(){
//  setAsChecked();
// });

// UPDATE! ajaxStop() catches all our ajax events - not cool. Instead, use when
$.when( $.ajax("") ).done(function(){
    setAsChecked();
});

Maybe that saves someone else a headache!

— EDIT —

BE WARNED! This solution caused a major headache when used with CakePHP. The layout disappeared when we called this function in the footer.

See this thread: CakePHP no layout on back and forward button