Page reloading instead of element being displayed...

[Perad]

This is the problem that I am facing.

 

I am using span to trigger a javascript function. The function creates an absolutely positioned div on the webpage.

 

<span onMouseUp="formPopup();">Edit</span>

 

This is the function

 

<script type="text/javascript">

function formPopup()
{	
	// Sort out positioning.
	var boxWidth = 740;
	var pageWidth = document.documentElement.clientWidth;
	var yPos = 100;

	var halfPage = document.documentElement.clientWidth / 2;
	var halfBox = boxWidth / 2;
	var xPos = halfPage - halfBox;

	document.write('<div style="width:' + boxWidth + 'px;height:auto;position:absolute;top:' + yPos + 'px;left:' + xPos + 'px;" id="FormPopup">');

	// Content Here
	var conTitle; // = document.getElementById('conTitle').value;
	var conDescription; // = document.getElementById('conDescription').value;	
	var conKeywords; // = document.getElementById('conKeywords').value;

	document.write('<form action="" method="post">');
	document.write('<h3>Edit Page Data</h3>');
	document.write('<div class="form_item"><label>Page Name: </label><input type="text" name="name" value="' + conTitle + '" /></div>');
	document.write('<div class="form_item"><label>Page Description: </label><input type="text" name="meta_description" value="' + conDescription + '" /></div>');
	document.write('<div class="form_item"><label>Page Keywords: </label><input type="text" name="meta_keywords" value="' + conKeywords + '" /></div>');
	document.write('</form>');

	document.write('<\/div>');
}
</script>

 

How can I make this work so it displays the absolutely positioned div instead of reloading the page with just the div being displayed?

[haku]

I believe that the problem lies in the fact that you are using document.write in your javascript, which is an outdated method. You need to use more up-to-date dom techniques in order to be able to do this (or at least, that is the impression I am under - someone else may know a way around this).

 

Other than re-writing your script for you, the answers to your problems are a little too large for the scope of this thread. I would suggest looking up the following dom scripting techniques (I use this site for reference, it's great):

 

createElement

appendChild

insertBefore

createAttribute

 

You have used one DOM technique (getElementById), but for this to work consistently, you will need to add more to your javascript vocabulary. Good luck!

[KevinM1]

I believe that the problem lies in the fact that you are using document.write in your javascript, which is an outdated method. You need to use more up-to-date dom techniques in order to be able to do this (or at least, that is the impression I am under - someone else may know a way around this).

 

It's not that document.write() is outdated, it's that it overwrites the document at the beginning rather than append to the document's end.  The DOM methods are superior because they allow you to place elements exactly where you want them within the document.

[haku]

Those are the very reasons why it's outdated! Before DOM methods existed, document.write was all that there was. Now there are the DOM methods.

 

But its just semantics. The end result was the same one way or the other.

[KevinM1]

Those are the very reasons why it's outdated! Before DOM methods existed, document.write was all that there was. Now there are the DOM methods.

 

But its just semantics. The end result was the same one way or the other.

 

Oh..well...uh.... :blush:

 

Sorry about that.