CODEWITHSUNDEEP
javascriptjqueryajaxbrowser-historyhistory.js
NicoJuicy
NicoJuicy

Reputation: 3528

History.js replaces the wrong content

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?

Upvotes: 4

Views: 352

Answers (2)

Jeffery To
Jeffery To

Reputation: 11936

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.

Upvotes: 0

Vartan Arabyan
Vartan Arabyan

Reputation: 3073

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'

Upvotes: 1

Related Questions