PDA

Click to See Complete Forum and Search --> : Dynamic webpage...

Dude
02-23-2003, 03:12 PM
Hi there,

I'm currently building a dynamic webpage mainly using javascript's document.write.

I have an .htm document which contains a dropdown list containing elements I may want to insert in the page (eg image, textarea...). So basically, what I do is read the selected index in the dropdown list and then when the OK button is clicked, I use the document.write function to rewrite the page including the code for whichever element was chosen. This works just fine once. However, when I do the same thing again from the resulting document, the document.write function does not overwrite the source of the document, hence I get 2 header zones instead of one and everything is repeated.

For example : first use -> a textarea is chosen and inserted on click on the Ok button.
A new page is generated containing the same header as before, the same dropdown list and the same OK button. In addition to all this, the textarea field is added. This is perfect.

Second use -> I'm now using the generated document. I choose an image in the dropdown list. I click on the OK button and the image is appended to the resulting document BUT the textarea is still there (it shouldn't be) and furthermore there are 2 <html> tags and </html> tags now as well as 2 header zones...

Does anyone have any idea what I can do ?
BilEde
02-23-2003, 05:24 PM
hi,
I find it easier to set up <Div>s and <span>s and use the innerHTML and innerText propeties of objects than document.write.
You can use the styles propeties of CSS to control placement of them if needed.
pyro
02-23-2003, 05:27 PM
NOTE: innerTEXT is IE only, so even if only passing text, I'd use innerHTML...
Dude
02-24-2003, 02:01 PM
Ok then I'll try the inner property used with spans... I hope it'll turn out the right way

Thanks guys for your help.
Phil Karras
02-24-2003, 03:22 PM
I think I understand what you're trying to do but unless I could see the code I'm not sure I can tell you where you're going wrong.

First I agree with the <div> and innerHTML info given to you to begin with. This works very well for all DOM level 1 browsers (IE5.0 & NS6.0 & newer)

If you want the page that was generated to generate a new page in the present window you have to also be careful of a few other things.

1. Make sure you put all the HTML and JavaScript needed to continue the process in the new page.

2. Be real careful you're not adding more code to existing code. (A good way to insure this is to add all the code to a sting var, then empty the var when the page has been written.)

This is a recursive task and it is very easy to mess things up if you're not thinking clearly as to what is happening, what happened, and what you want to happen.

Hope that helps.
Dude
02-26-2003, 04:07 PM
With the innerhtml and the div property, everything is ok ! However, I can only seem to get it to work if the javascript function is called thru a href="javascript:functionName()"> ie calling it with onclick="javascript:..." doesn't seem to work.

I did think about regenerating the code corresponding to the JS function. Thanks anyway for reminding me :)

The main problems I have to tackle now deal with inserting the right element at the right spot. I thought I deal with this by using a string stored in a hidden field. The string is a series of numbers, each one representing a type of insertion and the order being the order in which to insert them...

What do you think ?

You can check out a first version where only insertion is dealt with (not the order) at
http://www.if.insa-lyon.fr/eleves/dbrossar/xnet3/test/test.htm

Thanks for your advice, Dude.
Phil Karras
02-26-2003, 05:05 PM
Congrats on getting it working and I'll say this about your coding idea, it should work. As in anything it's the implementation that's tricky sometimes.

Good-luck!
BilEde
02-26-2003, 06:33 PM
Pleased you've got it working.
I think that the reason it won't work from the onclick event is because the calling code itself is being overwritten. The href is the last thing called so doesn't affect anything else. It could probably work from the onclick by using the event function to call a function to change the innerHTML via the setTimeout() function.