Question

I am using jQuery address and I can’t get it to initialize on refresh…(In all major browsers except IE) Here are the issues…

When I click on a link the ajax loads it loads perfectly and adds the class “selected” to the link as it is supposed to. When I use the back button it works perfect also, but after I click the link then hit the refresh button, it reloads the original state (minus the ajax) and will not add the class “selected” to any links or load anymore ajax thereafter.

Here is the link to the page. http://www.weightlossexp.com/articles

Any help is greatly appreciated, thanks in advance.

[Edit] Code

Jquery

var init = true, 
        state = window.history.pushState !== undefined;
        // Handles response
        var handler = function(data,topic,w) {
          $("#title_back h1").hide().html(topic).fadeIn(800);
          $('title').html(topic);
          $('#content').html(data).animate({width:w},1500);
          $('#lc').show();
          // $.address.title(/>([^<]*)<\/title/.exec(data)[1]);
        };
        $.address.state('/articles').init(function() {
            // Initializes the plugin
            $('#lc a').address();                
        }).change(function(event) {
            // Selects the proper navigation link
            $('#lc a').each(function() {
                //alert($(this).attr('href')+' - - '+$.address.state() + event.path);
                if ($(this).attr('href') == ($.address.state() + event.path)) {
                    $(this).addClass('selected').focus();
                } else {
                    $(this).removeClass('selected');
                }
            });
            var classL = $(".selected").length;
            if(classL == 1){
                var topic = $('.selected h2').html();
                var action = event.path.substr(1);
                var width = '100%';
            }else{ 
                var topic = "Topics"; 
                var action = '';
                var width = '0px';
            }
            if (state && init) {
                init = false;
            } else {
                // Loads the page content and inserts it into the content area
                $.ajax({
                    url: "scripts/ajax/getSubTitles.php",
                    data: {action:action},
                    type: "post",
                    success: function(data, textStatus, XMLHttpRequest) {
                        handler(data,topic,width);
                    }
                });
            }
        });

Html

<div id="lc" style="position:absolute; overflow:hidden;">
                    <a href="/articles/ap" id="ap"><div class="topics" style="border-top:1px solid #d1d1d1; margin-top:20px;"><h2>Anatomy and Physiology</h2></div></a>
                    <a href="/articles/end" id="end"><div class="topics"><h2>Endurance</h2></div></a>
                    <a href="/articles/flex" id="flex"><div class="topics"><h2>Flexibility</h2></div></a>
                    <a href="/articles/myth" id="myth"><div class="topics"><h2>Myths</h2></div></a>
                    <a href="/articles/nut" id="nut"><div class="topics"><h2>Nutrition 101</h2></div></a>
                    <a href="/articles/corr" id="corr"><div class="topics"><h2>Post-Rehab/Corrective Exercise</h2></div></a>
                    <a href="/articles/power" id="power"><div class="topics"><h2>Power</h2></div></a>
                    <a href="/articles/stab" id="stab"><div class="topics"><h2>Stability</h2></div></a>
                    <a href="/articles/str" id="str"><div class="topics"><h2>Strength/Resistance Training</h2></div></a>
                    <a href="/articles/supp" id="supp"><div class="topics"><h2>Supplements</h2></div></a>
                    <a href="/articles/wg" id="wg"><div class="topics"><h2>Weight Gain</h2></div></a>
                    <a href="/articles/wl" id="wl"><div class="topics"><h2>Weight Loss</h2></div></a>
                <div id="content">
                </div>

Answer 1

the problem with your code is that in the lines which you have included your javascripts

<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.address-1.5.min.js"></script>

after clicking on the link, the URL will change from

http://www.weightlossexp.com/articles

to

http://www.weightlossexp.com/articles/something

and those two js files can not be found in the new url so both jquery and jquery.address will not be loaded.

just start the path of your JS files with a slash ‘/’ and your code will work fine.

so the code will be like this:

<script type="text/javascript" src="/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/lib/jquery.address-1.5.min.js"></script>