Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery BBQ Plugin Confusion
    primarykey
    data
    text
    <p>I am relatively new to JavaScript and jQuery.</p> <p>I am using the jQuery BBQ plugin to provide back page functionality. I have the following implementation:</p> <pre><code>// Be sure to bind to the "hashchange" event on document.ready, not // before, or else it may fail in IE6/7. This limitation may be // removed in a future revision. $(function(){ // Override the default behavior of all `a` elements so that, when // clicked, their `href` value is pushed onto the history hash // instead of being navigated to directly. $(".content a").click(function(){ var href = $(this).attr( "href" ); // Push this URL "state" onto the history hash. $.bbq.pushState({ url: href }); // Prevent the default click behavior. return false; }); // Bind a callback that executes when document.location.hash changes. $(window).bind( "hashchange", function(e) { // In jQuery 1.4, use e.getState( "url" ); var url = $.bbq.getState( "url" ); // In this example, whenever the event is triggered, iterate over // all `a` elements, setting the class to "current" if the // href matches (and removing it otherwise). $("a").each(function(){ var href = $(this).attr( "href" ); if ( href === url ) { $(this).addClass( "current" ); } else { $(this).removeClass( "current" ); } }); console.log(url) $.getScript(url) }); // Since the event is only triggered when the hash changes, we need // to trigger the event now, to handle the hash the page may have // loaded with. $(window).trigger( "hashchange" ); }); </code></pre> <p>Now this works great, if I go direct to mysite.com/brands the URL loads fine, and when I click a tab the URL shows up like this <a href="http://localhost:3000/trends#url=/trends/latest" rel="nofollow">http://localhost:3000/trends#url=/trends/latest</a> which is OK, the back button works when I go through the other tabs on the page.</p> <p>$.getScript calls the JavaScript that currently loads my partials into the templates.</p> <p>The problem is that it only seems to work on a one-layer basis. If I click my parent nav item Trends, and click a tab, the plugin doesn't work. Its like it refuses to see it.</p> <p>I can see the BBQ plugin has advanced features, but I'm not sure if what I want is even advanced.</p> <p>Can anyone suggest from the jQuery, or previous experience with the plugin what I could do?</p> <p>Much appreciated.</p> <p>Thanks,</p> <p>Geoff</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload