Writing Dynamic Content

**Rain Lover** · 06-12-2010, 04:19 PM

Hi,

Here's what I've been trying a lot to find but to no avail:
a simple text field and submit button that lets users insert an embedding (HTML/CSS/JavaScript codes) to display on the same frame.
I'd like something like this:
http://www.howtocreate.co.uk/tutoria...s/dywrite.html

Unfortunately it doesn't run any code, e.g.

Code:

<html> 
<head> 
<script type="text/javascript"> 
function startTime() 
{ 
var today=new Date(); 
var h=today.getHours(); 
var m=today.getMinutes(); 
var s=today.getSeconds(); 
// add a zero in front of numbers<10 
m=checkTime(m); 
s=checkTime(s); 
document.getElementById('txt').innerHTML=h+":"+m+":"+s; 
t=setTimeout('startTime()',500); 
} 

function checkTime(i) 
{ 
if (i<10) 
  { 
  i="0" + i; 
  } 
return i; 
} 
</script> 
</head> 

<body onload="startTime()"> 
<div id="txt"></div> 
</body> 
</html>

Or the text marquee code on the following tutorial:
http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm

Your help is greatly appreciated!
Regards
Rain Lover

**jscheuer1** · 06-13-2010, 04:05 AM

You've basically outlined three scripts, the two linked to in your post and the third is the code in your post. The code in your post works fine, as do the examples you link to. It might be helpful if you could be more specific about just what you're after. Do you want to overwrite the frame as in your first example link? Or do you want to simply populate an existing element as in your post's code? Or do you want to create a marquee as in the second example link?

More to the point might be why and what type of content you want displayed.

That said, you can do something like so:

Code:

<head> 
<script type="text/javascript"> 
function writeIt(form){
	document.getElementById('txt').innerHTML = form.elements.user_text.value;
}
</script> 
</head> 

<body> 
<div id="txt"></div>
<form action="#" onsubmit="writeIt(this); return false;">
<textarea name="user_text" cols="50" rows="5"></textarea><br>
<input type="submit" value="Write It">
</form>
</body> 
</html>

But if you want to run script code that the user might enter, that can get a bit tricky, and is potentially dangerous.

If you want a robust editor type thing, see:

http://www.dynamicdrive.com/dynamici...itor/index.htm

**Rain Lover** · 06-13-2010, 08:35 AM

Dear John,

<head>
<script type="text/javascript">
function writeIt(form){
document.getElementById('txt').innerHTML = form.elements.user_text.value;
}
</script>
</head>

<body>
<div id="txt"></div>
<form action="#" onsubmit="writeIt(this); return false;">
<textarea name="user_text" cols="50" rows="5"></textarea><br>
<input type="submit" value="Write It">
</form>
</body>
</html>

Thanks for the code. That's exactly what I'm looking for. But the problem is it doesn't support any embed code. It works well if you embed HTML, but doesn't run JavaScript codes. The following example works with JavaScript, too:
http://www.howtocreate.co.uk/tutoria...s/dywrite.html

But unfortunately it doesn't run some JavaScript, like the marquee example or the code on my first post.

**jscheuer1** · 06-13-2010, 11:52 AM

Originally Posted by Rain Lover

That's exactly what I'm looking for. But the problem is it doesn't support any embed code. It works well if you embed HTML, but doesn't run JavaScript codes.

When using an element's innerHTML property to change its content, if you want to run some javascript after that, you just have to run it. It's not going to run automatically. The browser isn't parsing it as code. In fact, it has to already be associated with the document, just pasting it in like that with innerHTML won't get it parsed. You might be able to pass it to eval(), but that gets tricky, and can be dangerous.

Originally Posted by Rain Lover

The following example works with JavaScript, too:
http://www.howtocreate.co.uk/tutoria...s/dywrite.html

But unfortunately it doesn't run some JavaScript, like the marquee example or the code on my first post.

It works fine with the code in your post, if it is written so as that in can be executed all on one line:

Code:

<html><head><title>Opening new browser windows</title></head><body onload="startTime()"><p><a href="javascript:history.go(-1);">Back</a></p>    <script type="text/javascript">  function startTime()  {  var today=new Date();  var h=today.getHours();  var m=today.getMinutes();  var s=today.getSeconds();  m=checkTime(m);  s=checkTime(s);  document.getElementById('txt').innerHTML=h+":"+m+":"+s;  t=setTimeout('startTime()',500);  }   function checkTime(i)  {  if (i<10)    {    i="0" + i;    }  return i;  }  </script>    <div id="txt"></div>  </body></html>

This generally means removing all single line delimited comments. In the above case there was only the one:

Code:

// add a zero in front of numbers<10

or changing them to multi line delimited comments:

Code:

/* add a zero in front of numbers<10 */

Without that, once it's written to the page, it looks like the script stops there, the entire rest of the page is now a javascript comment.

It also means that the script must make proper use of the semicolon (this one already does). When a script has line breaks, often the browser can intuit where a missing semicolon belongs. Once you put the script all on one line, the browser has no way to tell. To find out more about the proper use of the semicolon, see:

http://www.jslint.com/

So, ultimately this is tricky too, and dangerous. I say these both are dangerous because without proper safeguards a user could do some odd stuff, perhaps even some very bad stuff, on the server using AJAX.

**Rain Lover** · 06-13-2010, 05:26 PM

Thanks for the explanation! However, it can be time-consuming and even impossible for average users to get JavaScript codes right before embedding.

Although I don't want an HTML editor, I just saw the following and thought it might give you some ideas:
http://htmledit.squarefree.com/

Can the above page source or something similar be used to create my text area and submit button?

**jscheuer1** · 06-13-2010, 10:22 PM

That link doesn't appear to do anything in some browsers, best to avoid its code. If you want users to be able to input poorly constructed javascript, the best bet may be an ordinary textarea instead of a text input:

Code:

<head> 
<script type="text/javascript"> 
function writeIt(form){
	document.write(form.elements.user_text.value + '<br><input type="button" onclick="history.go(-1);" value="Back">');
	document.close();
}
</script> 
</head> 

<body> 
<div id="txt"></div>
<form action="#" onsubmit="writeIt(this); return false;">
<textarea name="user_text" cols="50" rows="5"></textarea><br>
<input type="submit" value="Write It">
</form>
</body> 
</html>

The input forces everything into a single line. The textarea, though it often appears to force the text to wrap, sends it with the line breaks intact. For example, try pasting this code into the above form:

Code:

<script type="text/javascript">
alert('His steep acres absolutely juggle his stumbling beagles. Our puzzled aspersions cavalierly impress those gloating exhortations. That quarrelsome feather woefully locks our straightforward banshees. The confusing bachelors tomboyishly judge those disenchanted bongos. That frowning backer censoriously hooks her tempestuous aardvarks. Their squealing felons tonelessly interpret his nonsectarian aces. Her confiding animals courageously jail those congested chromosomes. Their mysterious bakers ceremonially appreciate his quelling fantasies. Their adoring colors unrealistically lighten his testy chocolates. His naughty clowns augustly alert his absorbing fellows.')
alert('here')
// bad comment
</script><!-- script with poor semicolon usage and a really long line -->

**Rain Lover** · 06-22-2010, 07:37 PM

jscheuer1,

You're a star! I learned many things in this thread.
Thanks a lot!

**Rain Lover** · 06-25-2010, 12:10 PM

It also means that the script must make proper use of the semicolon (this one already does). When a script has line breaks, often the browser can intuit where a missing semicolon belongs. Once you put the script all on one line, the browser has no way to tell. To find out more about the proper use of the semicolon, see:

http://www.jslint.com/

Dear jscheuer1,

JSlint is great, but it doesn't re-write the code. Are there any programs that can find missing semicolons and then correct your code automatically?

By the way, I removed comments and put semicolons back on the following marquee code, per your instructions and using JSLint:
http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm
And then put the code into the text input field:
But it doesn't work!

What do you think?

**jscheuer1** · 06-25-2010, 05:04 PM

I've never tried any of these out. But you can Google:

javascript tidy

As for why the marquee script didn't work. Jslint doesn't ensure that the code will do anything, just that its syntax is correct. Did the syntax corrected script work on a regular page? If so, either it wasn't fully corrected for syntax, or there is something inherent in the code that won't work doing it via document.write(). I believe there might be, two things in fact. The script itself performs document.write(), and it relies upon an onload event, which presumably has already passed.

**Rain Lover** · 06-26-2010, 02:15 PM

That link doesn't appear to do anything in some browsers, best to avoid its code.

I tried to create a realtime effect so changes in the textarea automatically show in a frame at the same time without using any button. Here's a book instructions I tried to follow:

Use an iframe. Have the textarea and iframe on the same page, and have the iframe pointing to a blank HTML document. Then when the user has changed the textarea according to their needs, take the value of it, reference the document object of the frame, and document.write the new HTML into that:
window.frames['myframe'].document.open();
window.frames['myframe'].document.write(document.myform.ta.value);
window.frames['myframe'].document.close();

However, I couldn't build the correct code.

I wonder if you could help me with this.
Thanks in advance!

Thread: Writing Dynamic Content

Thread Tools

Search Thread

Writing Dynamic Content

The Following User Says Thank You to jscheuer1 For This Useful Post:

Many thanks!

One more question please, if you don't mind...

Bookmarks

Bookmarks

Posting Permissions