contentEditable javascript remote scripting

Hello,

I'm looking for a javascript function that will allow me to edit text in contentEditable span and on focus change send the content using javascript remote scripting tothe .asp script. Icluding some sort of identification of the content.

Has anyone came across a simple thing like that?

Not html editing just text.

thanks,
ark
ark2000Asked:
Who is Participating?
 
NetGrooveCommented:
To make the blur change sensitive and avoide repeating identical text extend the function to this:

<html>
<head>
<script>
function sendSpan(spanId){
  theSpan = document.getElementById(spanId);
  theText = theSpan.innerHTML;
  if(theSpan.oldText != theText){
    newImg = new Image();
    newImg.src = "/yourpage.asp?text="+escape(theText);
    window.status = spanId+": "+theText;
    theSpan.oldText = theText;
  }
}
</script>
</head>
<body>
<span id="Content1" contentEditable style="height: 20%; width: 100%;" onBlur="sendSpan(this.id)">Editable Content</span>
<hr>
<span id="Content2" contentEditable style="height: 20%; width: 100%;" onBlur="sendSpan(this.id)">Editable Content</span>
</body>
</html>

0
 
NetGrooveCommented:
How about this:

<html>
<head>
<script>
function sendSpan(){
  theText = document.getElementById("theContent").innerHTML;
  newImg = new Image();
  newImg.src = "/yourpage.asp?text="+escape(theText);
}
</script>
</head>
<body>
<form>
<span id="theContent" contentEditable style="height: 100%; width: 100%;">Editable Content</span>
<input type=button value=Send onClick="sendSpan()">
</form>
</body>
</html>


0
 
NetGrooveCommented:
Or in a hidden form field:

<html>
<head>
<script>
function sendSpan(){
  theText = document.getElementById("theContent").innerHTML;
  theForm = document.forms[0];
  theForm.newText.value = theText;
  theForm.submit();
}
</script>
</head>
<body>
<form>
<input type=hidden name="newText">
<span id="theContent" contentEditable style="height: 100%; width: 100%;">Editable Content</span>
<input type=button value=Send onClick="sendSpan()">
</form>
</body>
</html>



0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
NetGrooveCommented:
Ok, the form needs then the asp as action:

<html>
<head>
<script>
function sendSpan(){
  theText = document.getElementById("theContent").innerHTML;
  theForm = document.forms[0];
  theForm.newText.value = theText;
  theForm.submit();
}
</script>
</head>
<body>
<form action="/yourpage.asp">
<input type=hidden name="newText">
<span id="theContent" contentEditable style="height: 100%; width: 100%;">Editable Content</span>
<input type=button value=Send onClick="sendSpan()">
</form>
</body>
</html>



0
 
ark2000Author Commented:
ok, what about adding an image? so we would have a span with an image that may be replaced...
0
 
ark2000Author Commented:
also for the first example, since the page stays the same, don't we need to put a page code into .asp file?
0
 
ark2000Author Commented:
Response.Status = "200 OK"

is it?
0
 
ark2000Author Commented:
how r u NetGroove? =)
0
 
ark2000Author Commented:
oh and can't we put a code in the span to avoid the button? just to run the function when focus changes?
0
 
ark2000Author Commented:
also we need to make the function generic to allow for unlimited number uf editable span's as well as the .asp page needs to retrieve the identifier for the currently edited span.
0
 
NetGrooveCommented:
Uhps! You are too fast for me :)

So you like the first example without <form> submision, right?

How about this:

<html>
<head>
<script>
function sendSpan(){
  theText = document.getElementById("theContent").innerHTML;
  newImg = new Image();
  newImg.src = "/yourpage.asp?text="+escape(theText);
  window.status = "Text sent: "+theText;
}
</script>
</head>
<body>
<span id="theContent" contentEditable style="height: 100%; width: 100%;" onBlur="sendSpan()">Editable Content</span>
</body>
</html>


Look to window status line at window bottom.

0
 
NetGrooveCommented:
And here more generic:

<html>
<head>
<script>
function sendSpan(spanId){
  theText = document.getElementById(spanId).innerHTML;
  newImg = new Image();
  newImg.src = "/yourpage.asp?text="+escape(theText);
  window.status = spanId+": "+theText;
}
</script>
</head>
<body>
<span id="Content1" contentEditable style="height: 20%; width: 100%;" onBlur="sendSpan(this.id)">Editable Content</span>
<hr>
<span id="Content2" contentEditable style="height: 20%; width: 100%;" onBlur="sendSpan(this.id)">Editable Content</span>
</body>
</html>



0
 
ark2000Author Commented:
http://d5395716.t50.thisinformation.com/home it wasn't working a second ago here, I'll put the lates in a sec
0
 
NetGrooveCommented:
Change this:
>span id="theContent" contentEditable style="{width:450px; height:75px; border:red 1px dotted;}"  onBlur="sendSpan("theContent)>Ability to overr

To this:
<span id="theContent" contentEditable style="{width:450px; height:75px; border:red 1px dotted;}"  onBlur="sendSpan(this.id)" >Ability to overr...

0
 
ark2000Author Commented:
I must have some conflict still doesn't work, but it works in a plain html page
0
 
NetGrooveCommented:
Remove the leading slash in "/yourpage.asp

0
 
ark2000Author Commented:
no no, that was just ad muncher... i didn't put in the filter rule cause the domain name will be customer2.com once the dns propagates....

so, it works fine now.

Thanks,

r u gonna be up for some time?

I didn't sleep yet but if you are I'll post more questions =)
0
 
NetGrooveCommented:
Just at the moment I have to leave the office and go home.
I need 45 minutes to be at home.

Post your questions and I will look later.

See you,
NetGroove

0
 
NetGrooveCommented:
And I am some timezones in front of you :)
I am located in Munich.
Perhaps is better idea to look at this in few hours...

0
 
ark2000Author Commented:
k thanks!

I'll try to figure out the things I need to finish up.

ark
0
 
NetGrooveCommented:
Uhps! I just noticed.
Thank you very much for the points.
0
 
ark2000Author Commented:
whenever you have a moment, I won't be going to sleep, will work on the receiving .asp page and try to figure out where am I going to hold the text.... propably use just plain text file to hold content as variables...
0
 
ark2000Author Commented:
yw
0
 
ark2000Author Commented:
if you have a sec, I'm trying to add ability to change the span to be editable on click, please have a look at the above link... what am I doing wrong?
0
 
ark2000Author Commented:
function editSpan(spanId){
  theSpan = document.getElementById(spanId);
  theSpan.className='editable';
  thespan.contentEditable;
}

is this right?
0
 
NetGrooveCommented:
Check this:

function editSpan(theSpan){
 theSpan.className='editable';
 theSpan.contentEditable=true;
}

And you are realy tired. Last line is a typo.
And if you passed in onclick like this:
onClick="editSpan(this)">

Then you get the span object and do not need the getElement....

0
 
ark2000Author Commented:
cool
the only thing left is the cursor remains hand after the change to editable... any remedy?
0
 
ark2000Author Commented:
oh and on blur I guess would be nice to change it back to noneditable...
0
 
NetGrooveCommented:
Same is also for  sendSpan() function. If you pass the object instead of object id, then is less coding and less maintenance.

Like this:
function sendSpan(theSpan){
  theText = theSpan.innerHTML;
  if(theSpan.oldText != theText){
    newImg = new Image();
    newImg.src = "/yourpage.asp?text="+escape(theText);
    window.status = spanId+": "+theText;
    theSpan.oldText = theText;
  }
}

function editSpan(theSpan){
  theSpan.className='editable';
  theSpan.contentEditable=true;
}

<span id="Content1" style="{width:450px; height:75px; cursor:hand;}"  onBlur="sendSpan(this)" onclick="editSpan(this)">Ability to overr...

0
 
NetGrooveCommented:
Yeap!

<html>
<head>
<script>
function sendSpan(theSpan){
  theText = theSpan.innerHTML;
  if(theSpan.oldText != theText){
    newImg = new Image();
    newImg.src = "yourpage.asp?text="+escape(theText);
    window.status = newImg.src;
    theSpan.oldText = theText;
  }
 theSpan.className='';
 theSpan.contentEditable=false;
 
}

function editSpan(theSpan){
 theSpan.className='editable';
 theSpan.contentEditable=true;
}
</script>
</head>
<body>
<span id="Content1" style="height: 20%; width: 100%;" onBlur="sendSpan(this)" onClick="editSpan(this)">Editable Content</span>
<hr>
<span id="Content2" style="height: 20%; width: 100%;" onBlur="sendSpan(this)" onClick="editSpan(this)">Editable Content</span>
</body>
</html>

0
 
NetGrooveCommented:
And the cursor style is switched like this:

<html>
<head>
<script>
function sendSpan(theSpan){
  theText = theSpan.innerHTML;
  if(theSpan.oldText != theText){
    newImg = new Image();
    newImg.src = "yourpage.asp?text="+escape(theText);
    window.status = newImg.src;
    theSpan.oldText = theText;
  }
 theSpan.className='';
 theSpan.style.cursor='hand';
 theSpan.contentEditable=false;
 
}

function editSpan(theSpan){
 theSpan.className='editable';
 theSpan.style.cursor='auto';
 theSpan.contentEditable=true;
}
</script>
</head>
<body>
<span id="Content1" style="height: 20%; width: 100%;" onBlur="sendSpan(this)" onClick="editSpan(this)">Editable Content</span>
<hr>
<span id="Content2" style="height: 20%; width: 100%;" onBlur="sendSpan(this)" onClick="editSpan(this)">Editable Content</span>
</body>
</html>


0
 
ark2000Author Commented:
perfect! only thing I think will be to add the border of the same color as background to noneditable state not to make the page jump
0
 
ark2000Author Commented:
a funny thing is the hand cursor and change to noneditable form isn't kicking in until after 2 or 3 clicks.. what gives?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.