editable div 1

[atsea]

I remember passing over a site that had a tutorial how to do this, but I didn't think much of it at the time and now I can't find it...hopefully someone here can point me in the right direction.

I have created a small table using <div>'s some of these I would like to give the user the abilty to edit/add text.

since the contenteditable attribute is not entirly "cross-browser", I was looking for an alternate approach.

This is what I would like to do:
HTML something like this:

<script src="editDiv.js" type="text/javascript"></script>

<div class="nameBox" id="fName" onclick="edit(this)"></div>
<div class="addBox" id="add" onclick="edit(this)"></div>

now the JavaScript is where I have the issues (although I think it should be stright forward)...

I would like my editDiv.js file to:
A: generate a popup with a text field.
B: once the user clicks "OK" the content of the textbox is placed in the appropriate <div> (using innerHTML)

I'm sure this is possible...

Any thoughts would be greatly appreciated.

Thanks,

AtSea

 

[mwolf00]

<script>
function edit(inObj){
  newTxt = document.getElementById("newText").value
  if (document.all){
    inObj.innerHTML = newTxt
  }
  else{
    inObj.childNodes(0).textNode = newTxt
  }
}
</script>

<div class="nameBox" id="fName" onclick="edit(this)"></div>
<div class="addBox" id="add" onclick="edit(this)"></div>

<textarea id='newText'></textarea>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 

[atsea]

mwolf00,

thanks for the quick response.

Your code is exacltly what I needed to steer me in the right direction. (although FF didn't seem to like your code)

after playing around with it I came up with this:

<script>
function javascript_prompt() {
	
	//two arguments are required for "prompt" boxes
	var message = "Please enter you Name";
	//the default value for the text 
	var textBox = "";

	var user_value = prompt(message,textBox);

	// check if there is a value to return
	if (user_value != null) {
		//if ok do this
		attention = document.getElementById('attn');   
		attention.innerHTML = user_value;
		  
	} else {
		//if "cancel" do this
		return null;
	}
}
</script>

<div onClick="javascript_prompt()">JavaScript Popup</div>

<div id="attn">THIS IS THE DESTINATION DIV</div>

thanks

atsea