History.js replaces the wrong content

Question

I have the following initiation in my JavaScript; I’m always using the code shown in github by the way. The full code can be seen here

var
        /* Application Specific Variables */
        contentSelector = '.tab-content,.page-content,article:first,.article:first,.post:first',
        $content = $(contentSelector).filter(':first'),
        contentNode = $content.get(0),
        $menu = $('#menu,#nav-sub,.nav,.nav-sub:first').filter(':first'),
        activeClass = 'active selected current youarehere open',
        activeSelector = '.active,.selected,.current,.youarehere, .open',
        menuChildrenSelector = '> li,> ul > li',
        /* Application Generic Variables */
        $body = $(document.body),
        rootUrl = History.getRootUrl(),
        scrollOptions = {
            duration: 800,
            easing:'swing'
        };

The problem lies in :

contentSelector = '.tab-content,.page-content,article:first,.article:first,.post:first',

and in:

$menu = $('#menu,#nav-sub,.nav,.nav-sub:first').filter(':first'),

When the menu clicked in .nav, has to change the .page-content.

When the menu is clicked in .nav-sub, the content has to be replaced in .tab-content

The problem is, both menu's change .page-content, instead of just either tab-content or page-content.

Any idea how to change this?

Please don't use $ for variables, it's just bad practice, especially if you also use jQuery. — zatatatata, Jun 19 '12 at 22:29
Check the github link, i used the code from there. But will think about it in a later stage. — NicoJuicy, Jun 19 '12 at 22:37
@VahurRoosimaa It is very common for people to prefix variables pointing to `jQuery` objects with a `$`. It is your personal preference not to do it, it has nothing to do with the question at hand. — Ruan Mendes, Jun 19 '12 at 22:49
@VahurRoosimaa have a look at http://stackoverflow.com/a/205974/63094 . Dollar sign ($)'s are permitted anywhere in variable names. — artlung, Jun 19 '12 at 22:54

score 1 · Answer 1 · answered Jun 25 '12 at 21:23

1

Fix your content select

Change from

contentSelector = '.tab-content,.page-content,article:first,.article:first,.post:first'

TO

contentSelector = '.tab-content, .page-content, .article:first, .post:first'

answered Jun 25 '12 at 21:23

Vartan Arabyan

2,925
7
25
35

score 0 · Answer 2 · answered Jun 26 '12 at 04:27

History.js isn't replacing the wrong content; ajaxify-html5.js (the script you are using) is doing exactly as it was designed:

If the user clicks on an internal link (and the link does not have the no-ajaxy class), then the script intercepts the click, stops the browser from loading the page, and initiates an Ajax request for the page.

Note that this includes all internal links on the page, not just ones in the menu.
When the Ajax request is complete, the script replaces the content on the current page with the content from the response (and does some other clever things like set the activeClass on the right menu item, update the page title and run scripts from the response).

The script uses the first element found with contentSelector as the "content" node. This does not depend on which link the user clicked on.

If you want to "ajaxify" only menu links, you can change (line 95):

$body.ajaxify();

to call .ajaxify() on your menu element instead.

If you want to update a different element with the new content, you can change (line 145):

$content.html(contentHtml).ajaxify().css('opacity',100).show(); /* you could fade in here if you'd like */

to update another element instead.

History.js replaces the wrong content

2 Answers2