Load Content From a Hidden Div (Extended Functionality)

Question

As with a few other posts here on StackOverflow, I'm looking to load in content from a series of hidden divs into a primary content div. However, I am looking to extend this functionality and do something I wasn't able to find in any other posts.

I did find an answer to the basis of this question here as provided by Shyju.

While the solution works very well, I would like to extend this and be able to link to a hidden div from within the active div (or #ajax as listed in the solution linked).

Ideally, I would like to have a navigation section that contains home, previous and next links that all pull from hidden divs to replace the content of an #activeContent div. The initial content of #activeContent (Home) would be something of a table of contents which would allow you to press on a list item to jump directly to the associated hidden div, replacing the table of contents.

I've used modified gallery sliders in the past to accommodate this, but I didn't want to have to scroll past all the divs between point A and point B on the way to point B. I find the ajax method of simply replacing the content to be much more elegant in this context.

Hopefully my request for assistance makes sense. Any help would be greatly appreciated!

My current code looks like this -

$(".itemLink").click(function () {

    var id = $(this).attr("id").replace(/^.(\s+)?/, "");
    var contentTobeLoaded = $("#item_" + id).html();

    $('#activeContent').fadeOut(600,function(){
        $('#activeContent').html(contentTobeLoaded).fadeIn(500, function () {
        //do whatever you want after fadeIn
        });
    });

});

<body>

<section id="navigation">
    <a href="#" class="itemLink" id="a1">Item 1</a>
    <a href="#" class="itemLink" id="a2">Item 2</a>
    <a href="#" class="itemLink" id="a3">Item 3</a>
</section>

<section id="content">
    <h3>Content will be displayed below</h3>

    <div id="activeContent"></div>
</section>

<section id="hiddenContainer" style="display:none;">
    <div id="item_1">
        Item 1 content<br><br>
        <a href="#" class="itemLink" id="a4">Item 4</a>
    </div>

    <div id="item_2">
        Item 2 content
    </div>

    <div id="item_3">
        Item 3 content
    </div>

    <div id="item_4">
        Item 4 content
    </div>
</section>

I'm not understanding your question, from what I gather I don't see any reason the solution you posted wouldn't work... I don't see what your trying to extend about it. You say "I would like to extend this and be able to link to a hidden div from within the active div" but loading content from a hidden div the code is the same whether you do it from a nav menu or the active div. — Jeff Wilbert, Dec 30 '11 at 19:53
Something like this? http://jsfiddle.net/feQ8A/ (Note, using a `rel` tag is cleaner IMO.) — Jared Farrish, Dec 30 '11 at 19:58
Jeff, that's what I thought too, but it's not working that way. You'll see that I have a link to Item 4 within #item_1. Clicking on that link does not do anything. I suspected it was because the link was within the div that was being replaced. I'm sure it's entirely possible it does work and I'm just missing something obvious. — mattblac, Dec 30 '11 at 20:11
Also, thanks for the link Jared. I agree that using the rel tag is cleaner, but seeing as I'm just getting going with this kind of code, I'm working with whatever I can find! At some point, I suppose I should start with the dead basics of javascript/jQuery/ajax so I actually understand what I'm doing. — mattblac, Dec 30 '11 at 20:18
For a start off, then, use [`on()`](http://api.jquery.com/on/) instead of `live()` (which is deprecated, as of jQuery 1.7). — David Thomas, Dec 30 '11 at 20:29

Jeff Wilbert · Accepted Answer · 2011-12-30T21:37:19.373

1

You need to change your click method to use the live method. When you move the content from the hidden div to your active, it's erasing the event tied to your a elements. live maintains all events on current and future elements.

$(".itemLink").live('click', function () {

Fiddle Demo: http://jsfiddle.net/hSyYE/

Note

If your using jQuery 1.7+ then the proper way would be

$('body').on('click', 'a.itemLink', function () {

edited Dec 30 '11 at 21:37

answered Dec 30 '11 at 20:13

Jeff Wilbert

4,400
1
20
35

[$.live()](http://api.jquery.com/live/) is deprecated, it's suggested to use `$.on()` or `$.delegate()` instead. Also `$.clone(true, true)` should copy the event handlers. – Jared Farrish Dec 30 '11 at 20:19
Yes I was just in the process of updating my code for the 1.7 way of doing it. – Jeff Wilbert Dec 30 '11 at 20:20
Much appreciated! Thank you for explaining what was happening, that goes a long way towards helping my understanding! – mattblac Dec 30 '11 at 20:22
No problem, don't forget to finish the whole cycle to your questions; if this answer solved your question, please mark the question as answered by checking the box next to this answer (**[see this for more info](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work)**). This helps build up your own reputation which will only benefit you and the community by letting others know what solved your problem. – Jeff Wilbert Dec 30 '11 at 20:39
@jaredFarrish - With your most recent edit, I did as recommended and changed `$(".itemLink").live('click', function(){` with `$(".itemLink").on('click', function(){` and it immediately stopped working. I am using jQuery 1.7.1. Any thoughts? – mattblac Dec 30 '11 at 20:40
@mattblac - You would need to check the version you're using. `$.on()` was introduced in version 1.7. Also, [`$.on()`](http://api.jquery.com/on/) has a different syntax to `$.live()` (although, after reviewing, that looks like it should work). – Jared Farrish Dec 30 '11 at 20:44
@jaredFarrish - Sorry, I should have been more specific. Links 1-3 still work after setting it to .on, but the 'internal' Link 4 no longer works. – mattblac Dec 30 '11 at 20:45
@jaredFarrish - Correct. The only change I made was switching `$.live` to `$.on`. – mattblac Dec 30 '11 at 20:48
@mattblac - Sorry, my browser crashed. I don't see a reason why one would work and the other wouldn't. You might try `$.clone()`ing instead of copying the `$.html()`, although I don't know why `$.on()` should work. If you can make a http://jsfiddle.net demonstration of the problem, that would help. – Jared Farrish Dec 30 '11 at 21:03
@JaredFarrish You can use the fiddle I made in my answer and simply change `live` to `on`; I did so already here http://jsfiddle.net/hSyYE/1/ and I'm having the same problems where it's not working with the link inside the hidden div, really strange. – Jeff Wilbert Dec 30 '11 at 21:06
Strange indeed. No problem though, I can use `live` for the time being. I really appreciate all your help with this and baring with me through my first foray into the wide world of StackOverflow! – mattblac Dec 30 '11 at 21:09
@mattblac - Something to do with how `$.on()` handles `$.html()`; this, for instance, works with `$.clone(true, true)`: http://jsfiddle.net/hSyYE/2/ (Note, as well, that `e` needs to be passed to the handler, and I added caching of the `#activeContent` jQuery selection.) – Jared Farrish Dec 30 '11 at 21:25
@JaredFarrish and mattblac, I figured out the solution. Using `.on` in the way `$('element').on('click', function() { .. });` is the same as `.bind()` the way on works now is it delegates events to element you select but if you move the element or add new ones the element still disappears. The proper way is `$('parent-element').on('click', 'element', function() { ... });` or in this case `$('body').on('click', 'a.itemLink', function () {` that way we're declaring an event on the `body` tag and saying to filter click request for objects of `a.itemLink` when the event bubbles from being click. – Jeff Wilbert Dec 30 '11 at 21:42
That makes sense; when I was reading the docs, that line didn't quite register as to what it meant, but I did read that `$.live()` attaches to the `document` node for monitoring. I can see how `$.on()` is expected to perform better. – Jared Farrish Dec 30 '11 at 21:50
@JaredFarrish Yeah I found http://stackoverflow.com/questions/8315990/jquery-onclick-func-function-not-doing-its-job which explained it best. To mimic `.live()` you just need to use `.on()` and attach to the parent of the element you want to work with and use the selector property to filter. Instead of attaching to `body`, Matt you could use `section` instead, since all your links to load hidden content are contained in that tag. I just used body since its easier and in case you have links not inside `section` then it'll still work as body is the parent to everything on the page. – Jeff Wilbert Dec 30 '11 at 22:02

Load Content From a Hidden Div (Extended Functionality)

1 Answers1