0

I'm using jquery.address plugin to update my browser's address bar while loading content through ajax. Everything works fine, except I have no idea how to automatically load the event.value or event.path into the DIV I'm using to load content when the user try to access a bookmarked page like "domain.com/about-us", in that case page loads but the "about-us" content does not load in the DIV. What am I missing? This is my code:

JS:

function loadURL(url) {
    $("#content").fadeOut(600, function() {
        $(this).load(url).fadeIn(800);  
    });
}

$.address.init(function(event) {

    $.ajax({
        url: event.value,
        success: function(data){ $('#content').load(data); }
    });

}).change(function(event) {

    $('a').click(function(){
         loadURL($(this).attr('href'));
    });

});

HTML:

<div id="menu">
        <ul>
            <li id="menu_about"><a href="about-us.html" rel="address:/about-us">About Us</a></li>
            <li id="menu_contact"><a href="contact.html" rel="address:/contact">Contact</a></li>
        </ul>
</div>

<div class="wrapper">

    <div id="content">

    </div>

</div>

.htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine on

  # Rewrite current-style URLs of the form 'index.html?url=x'.
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.html?url=$1 [L,QSA]
</IfModule>

Thanks!

Matt
  • 19,570
  • 12
  • 62
  • 104
McEnroe
  • 61
  • 1
  • 7

1 Answers1

0

$.address.externalChange(function(event)) is what you are looking for. It'll capture the path on page load.

SParanagama
  • 98
  • 7