Forum Moderators: open
Im facing with a JavaScript problem and I just cant manage with it.
ok, what is it all about:
I want to make a simple dynamic component frequently called 'a tab panels' or 'tab buttons'
you know - you have few tab buttons on the top of the screen and each one of them replaces a
content of my document with a particular page(html page)
look for example: <snip>
so ok, no problem. i made it very easy and it works fine (almost - problems start later... :) )
here is my directory tree:
index.html
/pages/page1.html //page to load into index.html
/pages/page2.html //page to load into index.html
/pages/page3.html //page to load into index.html
each one of the page within pages dir are the pages to be loaded after clicking one of the tab.
its simple.
ok my index.html goes like this:
//--------- index.html -----------
<html>
<head>
<script type='text/javascript' src="js/jsFile.js"></script>
</head>
<body>
<input onClick="loadIntoFrame('myFrame', 'pages/page1.html')" type='button' value='load page1.html content'>
<input onClick="loadIntoFrame('myFrame', 'pages/page2.html')" type='button' value='load page1.html content'>
<input onClick="loadIntoFrame('myFrame', 'pages/page3.html')" type='button' value='load page1.html content'>
<br><br>
Below is the Dynamic content: (in 'myDiv' element)
<br>
<hr>
<div id='myDiv'></div>
<iframe id='myFrame' name='myFrame' onLoad="loadIntoDiv('myDiv', 'myFrame')" style='display: none; visibility: hidden;' src='about:blank'>
</iframe>
</body>
<script>
/* loads a page into iframe */
function loadIntoFrame(id, page){
var el;
el = document.getElementById(id);
if(el) el.src = page;
}
/* takes a html content from iframe and pastes it into 'myDiv' on this page */
function loadIntoDiv(divName, frameName){
var el;
el = document.getElementById(divName);
aframe = window.frames[frameName];
if(el && aframe){
el.innerHTML=aframe.document.body.innerHTML;
}
}
</script>
</html>
//--------- end of index.html -----------
next, the content of pages directory:
each one of these pages contains almost similar code:
//--------- page1.html -----------
<html>
<body>
<!-- Here i make an instance of a sample object -->
<script>
var dat = new Date();
</script>
page 1
<!-- Here is an element which utilizes an dat element -->
<input type=button onClick="alert(dat)" value="test">
</body>
</html>
//--------- end of page1.html -----------
OK.
lets finally ask the question of the Day! :)
As you see it works great: when you click each of the button (my tab buttons are input buttons for simplicity)
the whole page is first loaded into iframe and next the content is copied with innerHTML into 'myDiv' element.
But there is a trap which I cant takeover!
When you click a 'test' button in page1.html after loading it into index.html it doesent work because the object 'dat' is created in different scope (in the iframe scope - not index.html scope).
so html content is done well but there is problem with copying javascript objects.
why im talking about it?
its simple. the page1.html is a symbol of my Javascript components generated by jsp or php or similar engine.
i.e. I have a calendar component which is independant object and the structure of it is very similar as above:
//------------------ my component ----------------
<script>
var cal = new Calendar()
</script>
<html-code>
here i utilize a cal object by events.
for example somwhere in the code is
onClick='cal.showCurrentDate()'
</html-code>
//------------------ end of my component ------
so when this part of code is copied by the innerHTML into 'myDiv' element it looks great but when i try to click an element within html-code section
which starts an event: cal.showCurrentDate() - there is a problem. the cal object isnt known in this context!
Maybe my method of creating objects by <script> obj = new Object()</script><html-content>content which utilizes obj</html-content> is wrong?
anybody has any idea how to manage with it?
im not interested into pasting the content of page1.html into my index.html. it has to be loaded dynamicly.
hope sbd had similar problem...and has a solution.
if so THHHHHANKKK YOUUUUUUUUUU
P.S.
sorry for such a long piece of writing but i really want to know if there is another solution of my problem
greets,
Peter, POLAND
p.s.2.
sorry..my english isnt good so you have to read twice to understand what im trying to say heheh
ok joking
[edited by: engine at 5:03 pm (utc) on May 18, 2005]
[edit reason] TOS [webmasterworld.com] [/edit]
First of all:
Welcome to Webmaster World!
As for your question, I think that by copying the innerhtml of the iframe src you are not really copying the variable definitions.
You might want to try creating an empty global variable in index.html and use this to load your objects from the iframe src page. Something like:
in index.html:
<script type="text/javascript">
var cGlobalVar=''
</script>
and in page1.html:
<script type="text/javascript">
function setVar(){
var dat=new Date()
parent.cGlobalVar=dat
}
</script>
</head>
<body onload="setVar()">
...
Hope this helps,
ajkimoto
hmmm hard nut
Hmmm...
The global var in index.html does not need to 'know' anything about what is in page1.html. It is really just an empty variable in which you could put any object from any page, and reassign it at will. So you could reassign the global each time you load a new page in the iframe.
ajkimoto
