dynamic page replacing content issue

[jackley923]

I’m having trouble with this script:
https://css-tricks.com/dynamic-page-replacing-content/

I have it working just fine, but it doesn’t seem to play nice with other jquery scripts. Or maybe I need to do something extra.

For example: if I use jquery UI tabs to display some content on the index.html, it works fine. If I then browse to another page and back it no longer works. I think it’s the URL change (history plugin?) that breaks it possibly.

For example:
mysite/index.html = other scripts work fine.
mysite/index.html#index = other scripts do not seem to work.

Another example would be if I placed the tab script on the portfolio page, then navigate to it:
mysite/index.html#portfolio = it does not work.
mysite/portfolio.html = it works just fine.

This isn’t just with the tabs script, it seems to be for several scripts.
Any help with this?

[Chris Coyier]

This is just how JavaScript works. When content is loaded in dynamically, none of that content automatically has any events bound specially to it. You can get around some of that with things like jQuery’s .live() and .delegate(), so look into that. But otherwise, after the content is done loading (when you fetch a new page), you’ll need to re-bind or re-call all the stuff that made that content do stuff.

[Rob MacKay]

Just for the record…. I love .live() lol – it is awesome

[noahgelman]

I tried using .live() like 2 weeks ago, and I couldn’t get it to kick in. In this case, how would you use live to watch for incoming dynamic content and rebind the events?

[georgedrag]

I’m having a similar problem. Was this ever solved?

BTW, the site is here: http://hondapavarotti.com

specifically the BIO page. The tabbed panels on the page don’t work properly. I really don’t have a firm enough grasp on javascript yet to be able to fix this.

[noahgelman]

Maybe a small screencast on the .live() function is in order? One can only hope. I think that could be pretty entertaining. Or at least an article.

[georgedrag]

Well, I figured out a workaround…
Since the tabs worked when I load the page directly (instead of dynamically), I just added a condition to the dynamicpage script:

if (newHash == ‘bio.html’) {window.location = ‘bio.html’}

so that it redirects to the actual html page.

Really not sure if this is the best way to go about it, but it works! ^_^

[Gabriel]

Aha moment! Thanks for that clarification, Chris. I’ve been scratching my head on this one for some time now. I love the way this technique pulls constant in from existing pages, allowing them to exist separately and providing perfect progressive enhancement. But pulling in content that needs its own jQuery goodness to work (tabs, content sliders, etc) does not work. I can see now exactly why: the content that gets pulled in does not have any jQuery applied to it because the current page has already rendered and any scripts have already run and applied their magic, so things pulled in after the fact are limited to plain old html/css. Is that about right?

Unfortunately I don’t know the solution yet.

Your solution, gerodedrag, sounds like abandoning the dynamic loading and switching over to a regular old link for pages that have dynamic content. I’d say what’s the point in using the dynamic loading technique in the first place, then? Some pages would load in a really cool and smooth way and others would smack you in the face, loading like plain old html. In my case it’s going to be either-or, but not a mix of both.

I’m looking into .live(), but so far it looks a little beyond my n00b jQuery capabilities. I’m good at tweaking scripts to suit my needs, but am not yet at the level of writing my own.

[clokey2k]

The way I understand it you can just replace the jQuery

'$('.clickme').click(function(){})'

with

'$('.clickme').live('click', function(){})'

jQuery will then keep watching for any ‘$(‘.clickme’)’ past, present, and future.

You can then cover any of click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.

[ahill]

My IE conditional comments are not flowing through, either. I have these for a font change for IE, pretty simple. Works on the static pages, but not in the dynamic. So how can I change a font just for IE, directly in the main stylesheet? I am dragging out my CSS books to look for a clue; seems like conditional comments have been recommended for so long, I forgot any other method, if I knew one.

[ahill]

I’ll take that back, it appears to be some issues with Google Fonts; tests of simple things like color do carry through. My apologies. Back to the drawing board.

[Author]

Posts