Ajax Tabs Problem (More of the same)...

**hebbs01** · 06-23-2006, 03:32 AM

Ajax Tabs Content Script

Reference: http://www.dynamicdrive.com/dynamici...tent/index.htm

There are quite a few posts here that touch on my problem but rather than deviate these I though it best to start afresh.

For completeness each of the following posts touch on this issue, I have read through them and to be brutally honest am now more confused than when I started

http://www.dynamicdrive.com/forums/s...ead.php?t=9147
http://www.dynamicdrive.com/forums/s...ead.php?t=9840
http://www.dynamicdrive.com/forums/s...ad.php?t=10112
http://www.dynamicdrive.com/forums/s...ad.php?t=10418
http://www.dynamicdrive.com/forums/s...ad.php?t=10545

Unfortunately there is no public access to my pages so will have to doco this as well as I can here.

I am building a web based application where a user can view statistics etc on an 'Admin' page.

On that page I want to use the Ajax Tabs display so the user can tab between the various reports/views etc, all works fine until I want to incorporate JS into the page, or so I thought initially.

I start with something similar to the demo.html page which looks like this:

HTML Code:

<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />
<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">

/***********************************************
* Ajax Tabs Content script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
</head>

<body>
<br />
<div align="center"><center>
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="admin_action_page.php" rel="ajaxcontentarea" rev="admin_action.css">Actions</a></li>
<li ><a href="./totals/total_action_page.php" rel="ajaxcontentarea">Totals</a></li>
<li><a href="./workload/case_wload_page.php" rel="ajaxcontentarea">Workload</a></li>
</ul>
<div id="ajaxcontentarea" class="contentstyle">
</div>
<script type="text/javascript">
//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
startajaxtabs("maintab")
</script>
</body>

where the second tab (Totals) is where I am having the issue.

Initially I was trying to load another dynamic script into the this (Totals) page, a bar graph version of:

http://www.dynamicdrive.com/dynamici.../linegraph.htm

but whilst I could get the canvas to load I couldnt get the final image to display. (It all works fine when I send it to a new page!)

There is some php on the (Totals page) then I try to render the image with this code:

HTML Code:

<!-- graph code begins here-->
	<script type="text/javascript" src="wz_jsgraphics.js"></script>
	<script type="text/javascript" src="graph.js"></script>
	<body>
	<div id="myCanvas" style="overflow:auto; position:relative;height:300px;width:500px;"></div>
	
	<script>
	
	var g = new graph();
	g.add('<br><a href="list_action_page.php?type=Active\" onMouseOver=\"window.status=\'Click to view a list of New actions\'; return true;\" onmouseout=\"window.status=\'Scope - Secure Case & Offender Profiling Environment.\'; return true;\" title=\"Total - <? echo $numnew;?>&nbsp;\" target=\'_main\' >Active</a>', <? echo $numnew;?>);
	g.add('<br><a href="list_action_page.php?type=Cancelled\" onMouseOver=\"window.status=\'Click to view a list of Allocated actions\'; return true;\" onmouseout=\"window.status=\'Scope - Secure Case & Offender Profiling Environment.\'; return true;\" title=\"Total - <? echo $numcan;?>&nbsp;\" target=\'_main\'>Cancelled</a>', <? echo $numcan;?>);
	g.add('<br><a href="list_action_page.php?type=Pending\" onMouseOver=\"window.status=\'Click to view a list of actions pending Write Off\'; return true;\" onmouseout=\"window.status=\'Scope - Secure Case & Offender Profiling Environment.\'; return true;\" title=\"Total - <? echo $numpnd;?>&nbsp;\" target=\'_main\'>Pending</a>', <? echo $numpnd;?>);
	g.add('<br><a href="list_action_page.php?type=Re-Issued\" onMouseOver=\"window.status=\'Click to view a list of actions that have been Re-Activated\'; return true;\" onmouseout=\"window.status=\'Scope - Secure Case & Offender Profiling Environment.\'; return true;\" title=\"Total - <? echo $numreact;?>&nbsp;\" target=\'_main\'>Re-Issued</a>', <? echo $numreact;?>);
	g.add('<br><a href="list_action_page.php?type=Completed\" onMouseOver=\"window.status=\'Click to view a list of Completed actions\'; return true;\" onmouseout=\"window.status=\'Scope - Secure Case & Offender Profiling Environment.\'; return true;\" title=\"Total - <? echo $numcomp;?>&nbsp;\" target=\'_main\'>Completed</a>', <? echo $numcomp;?>);
	
	g.render("myCanvas", " "); 
	</script>

It seemed to be the issue of the Javascript on the second page, I tried a document.write() to the page and it worked when loaded in a new page but not within the Ajax Tabs page.

I tried the (Totals) page as the initial load (default) with the 'wz_jsgraphics.js' and 'graph.js' included in the initial call as 'Rev' - no good.

After numerous changes I took a different tack and decided to try and display a graph within the page using JPGraph. Again I can get an image to render on a fresh page, but not within the Ajax Tabs page.

My initial thought on this is that the activation of the JS on the page is the problem, I thought (as posted elsewhere) that the problem may be that the required .js files weren't being loaded as the page requiring them was second in the tab list and they weren't being called, this seems to be contradicted tho when I load the graph page as an Ajax Tab by itself.

I was determined to work this out myself (with the info already here) but have got so frustrated after a couple of days, I just had to post this for the sake of my own sanity if nothing else