Multiple Javascript widgets on a single page

Question

Hello all Javascript and Widget Experts .

I am scratching my head for the last two days trying to figure out how to enable my widget so it can be included on the same page twice .

Here is what I have done

1.driver.js ( Loads all the required ) Loading the jquery , jquery-ui, wdcreate.js, set tabs.js via document.write calls .

2.wdcreate.js ( creates the tab lists and content ) Nothing complex , just a ui and li lists to create 3 tabs content assigned to wHTML and then conent loaded via

document.getElementById(tabid+"_mywidget_container").innerHTML = wHTML;

3.settabs.js ( Ideally supposed to enable tabs ) has just one line to load the tab container

$(document).ready(function() {$( "#"+tabid+"_mywidget_container" ).tabs();});

4.index.html - ( test page that includes the widgets ) This page just has two widgets included

<script type='text/javascript'> 
    var tabid='001';
    document.write('<scr'+'ipt type="text/JavaScript" src="http://localhost:8080/demo/driver.js"></scr'+'ipt>'); 
    </script>
    <div id="001_mywidget_container"></div>

<script type='text/javascript'> 
var tabid='002';
document.write('<scr'+'ipt type="text/JavaScript" src="http://localhost:8080/demo/driver.js"></scr'+'ipt>'); 
</script>
<div id="002_mywidget_container"></div>

Now the issue is the tabs are rendered if I include only one widget in my index.html file , if I include two or three for that matter , It fails ..

Any suggestions or what Is it I have to do ? I have tried searching and to isolate the issue put together this small project , originally was using plain javascript and reverted to jQuery ( I am not an expert Javascript programmer). Realize that this has to do something with the window.onLoad

Also note that in the settabs , instead of assigning the tabid dynamically , if I use two calls one for each tabwidget id , it loads two tab containers ..

one can have multiple widgets on a single page ex one tab container to show information for one topic , another tabcontainer for another topic etc.. so a user looking to have a page which can show information on 6 topics will include 6 widgets/tabcontainers on the same page ...

Appreciate all your help. Thanks again.

Also here are the pages

http://www.werindia.com/demo/index1.html - widget included one time
http://www.werindia.com/demo/index2.html - widget included two times. in reality this could be any non zero number 

http://www.werindia.com/demo/driver.js
http://www.werindia.com/demo/wdcreate.js
http://www.werindia.com/demo/settabs.js

This is the page with static containers -- but in reality these would be dynamic

http://www.werindia.com/demo/index3.html

Answer 1

Well, offhand the following things make no sense.

• You've mashed implementation code and your dependencies into a single file and you're loading/executing all of it twice.

• You're not merely linking via script tags twice. For some reason you felt compelled to use document.write

• It's 2012 and you're using document.write

• You have some common tabs functionality you want to hit two div containers and for some reason you're using IDs instead of a class. It looks like IDs might establish what tabs get built in your tabs.js but I can only assume since you're not showing that code.

We do not reappend script tags to make the same thing happen twice in JavaScript. We fire functions twice. Or we fire the right function at a more general category of DOM elements.

If the following is all it takes to build tabs in those containers:

$(document).ready(function() {$( "#"+tabid+"_mywidget_container" ).tabs();});

then this would make a lot more sense:

$(document).ready(function() {$( ".tab_container" ).tabs();});

If you don't know what needs to be in your HTML in order for .tab_container to work, I think you need to put all of this down and learn the basics more in-depth than you do. Try to keep your JS completely separated from the HTML. Link your files once at the bottom of the page. Learn the DOM API or at least how jQuery works. Try to think of JS as acting on HTML rather than simply writing it as it parses.

Answer 2

put your driver.js file path correctly it is pointing to localhost ,change it to http://www.werindia.com

use below code to generate script tag

var headID = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://www.somedomain.com/somescript.js';
headID.appendChild(newScript);