Utilize a JavaScript Script within Dynamically Created Content

[RGStrat]

Hello Everyone,

So I have a problem that is genuinely stumping me here. The sad part is this is probably something very easy.

I'm using the following script for a site I'm working on: http://css-tricks.com/rethinking-dynamic-page-replacing-content/

However, one of the "pages" i'm working on requires a verticle menu that you can switch through the content with a JavaScript selector (it allows you to see various lists, so loading different pages would be somewhat of a hassle for the user).

I'm attempting to do this with tabsLite, from the jQuerty UI framework (minus the actual framework):
http://plugins.jquery.com/tabsLite/

Here's my issue:

• The dynamic menu for the overall site works beautifully.
• When you load the specific page that the verticle tabs and tabsLite script is on, it works exactly as it should. (e.g. www.site.com/verticle_menu.php)
• However, when you come from another page (e.g. www.site.com/index.php) to the page with the tabs, (www.site.com/verticle_menu.php), then the content of all the tabs is displayed, and not hidden like it should. Consequently, clicking any of the verticle menu items has no effect, but to execute the dynamic replacement script and add a hash (verticle_menu.php#tab-1) to the URL.

Any suggestions? I figured it might be an issue with the script not being loaded. I tried calling functions within the JS, to no avail. I'm a bit stumped.

[JorgeM]

Do you have sample code or a link to the site online so we can take a look?

[RGStrat]

Hello JorgeM,

I just uploaded the portion of the finished site. The page I'm talking about is: http://snowmanlady.com/new/snowmen.php

The script will work with a direct link, but just click around the navigation to see it fail to load.

Thanks!

[JorgeM]

I took a quick look using Chrome since it has a nice set of developer's tools, and as soon as the page loads, there quite a bit of errors in the "console log". Also, i noticed that you are running jQuery v1.10.1, so I'm not sure if you are using syntax, methods, etc.. that are newer than that version...

I'll have to take a deeper look at another time as I'm about to walk out the door. Hopefully someone else can also take a look now that you've provided the URL to the site.

[RGStrat]

Thanks, much appreciated!

[JorgeM]

So, with regard to third bullet item

"then the content of all the tabs is displayed, and not hidden like it should."

I copied your HTML to jsfiddle to see what's going on with the tabs and when I added the jQuery block that you seem to be missing on your page, the tabs work as expected. Here is the jQuery code I added which would be placed after the tabs section of your page. You could simply add this block towards the bottom, prior to the closing </body> tag.

From tablite #

Source --> tabsLite

<script>
(function(a){a.fn.tabsLite=function(){this.each(function(){var b=a(this);var c=b.children("ul").children("li");var d=b.children("div");var e=d.first();b.addClass("tabsLite-mainDiv");c.addClass("tabsLite-tab").first().addClass("tabsLite-tab-selected");d.addClass("tabsLite-panel").hide().first().show().addClass("tabsLite-panel-selected");c.click(function(){e=a(this).children("a").attr("href");c.removeClass("tabsLite-tab-selected");d.hide().removeClass("tabsLite-panel-selected");a(this).addClass("tabsLite-tab-selected");a(e).show().addClass("tabsLite-panel-selected")}).children("a").click(function(a){a.preventDefault()})});return this}})(jQuery)

$(function(){
  $('#tabs').tabsLite();
});
</script>

Click on this link to see the tabs working for you code (minus some CSS) --> jsFiddle Demo

As I mentioed before, there seems to be other issues on your page. Since I'm not familiar with your code, its challanging to go through all of it.

I would suggest, you keep your existing page, and start a new page and put the page together in pieces/sections, checking functionality as you build the page until you get to the point where it breaks again. I think this approach is much easier to follow when troubleshooting.

[RGStrat]

Thanks for taking a look at it!

I think I've narrowed down the issue, and am having somewhat of a problem figuring out a solution.

I actually did have the tabsLite JS in the code, albeit in a bit of an odd place. I had put it inside of the actual "content" DIV in the page.

I'm fairly certain the issue comes down to the way that the dynamic page works. This seems to be fairly obvious when you attempt to execute a simple "hello world" on the page with the tabs:

 <script type="text/javascript">
document.write("Hello World!")
</script>

When you go to the page link directly, or reload the page, it functions perfectly. However, if you tab over to another link in the menu and go back, it refuses to execute the JavaScript. I think this is due to it not reloading the entire page. Since the script just replaces the contents of "content", I believe it does not apply JavaScript or load Javascript within the dynamically loaded content. I even experimented with loading the tabsLite script on the other pages, to no avail. I believe this is because teh script is already executed, so it doesn't apply it.

I hope this made sense! This one is kind of stumbling me.

[JorgeM]

So it could be me that I may not be understanding your description, but when I access the direct link: http://snowmanlady.com/new/snowmen.php, your tabs are not working properly as seen in this picture. As you can see, the contents of tab-1 and tab-2 are shown in the picture. I havent clicked on anything yet. However, When I moved your tab related code and uploaded to jsfiddle it works fine.

I'm not sure what other elements/components in your page is causing this problem. It appears that the tabLite related code is fine.

Since I do not know your code very well, the way that I would approach this is to create a new page, start adding the code you know works, check each component after every change. When the page exhibits the same behaviour, you've found your culprit. Sorry if that is not helpful. I dont have the time needed to debug this for you. It would take me quite a while. I wanted to quickly validate your tabLite block which seems to be fine.