Solved

contentEditable javascript remote scripting

Posted on 2003-11-24
33
740 Views
Last Modified: 2008-03-03
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
0
Comment
Question by:ark2000
  • 18
  • 15
33 Comments
 
LVL 10

Expert Comment

by:NetGroove
ID: 9809743
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
 
LVL 10

Expert Comment

by:NetGroove
ID: 9809753
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
 
LVL 10

Expert Comment

by:NetGroove
ID: 9809755
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
 

Author Comment

by:ark2000
ID: 9809765
ok, what about adding an image? so we would have a span with an image that may be replaced...
0
 

Author Comment

by:ark2000
ID: 9809774
also for the first example, since the page stays the same, don't we need to put a page code into .asp file?
0
 

Author Comment

by:ark2000
ID: 9809778
Response.Status = "200 OK"

is it?
0
 

Author Comment

by:ark2000
ID: 9809788
how r u NetGroove? =)
0
 

Author Comment

by:ark2000
ID: 9809793
oh and can't we put a code in the span to avoid the button? just to run the function when focus changes?
0
 

Author Comment

by:ark2000
ID: 9809859
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
 
LVL 10

Expert Comment

by:NetGroove
ID: 9809861
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
 
LVL 10

Expert Comment

by:NetGroove
ID: 9809873
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
 

Author Comment

by:ark2000
ID: 9809879
http://d5395716.t50.thisinformation.com/home it wasn't working a second ago here, I'll put the lates in a sec
0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9809891
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
 
LVL 10

Accepted Solution

by:
NetGroove earned 500 total points
ID: 9809911
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
 

Author Comment

by:ark2000
ID: 9809934
I must have some conflict still doesn't work, but it works in a plain html page
0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9809971
Remove the leading slash in "/yourpage.asp

0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:ark2000
ID: 9809984
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
 
LVL 10

Expert Comment

by:NetGroove
ID: 9809998
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
 
LVL 10

Expert Comment

by:NetGroove
ID: 9810001
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
 

Author Comment

by:ark2000
ID: 9810002
k thanks!

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

ark
0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9810008
Uhps! I just noticed.
Thank you very much for the points.
0
 

Author Comment

by:ark2000
ID: 9810010
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
 

Author Comment

by:ark2000
ID: 9810014
yw
0
 

Author Comment

by:ark2000
ID: 9810089
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
 

Author Comment

by:ark2000
ID: 9810101
function editSpan(spanId){
  theSpan = document.getElementById(spanId);
  theSpan.className='editable';
  thespan.contentEditable;
}

is this right?
0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9810118
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
 

Author Comment

by:ark2000
ID: 9810132
cool
the only thing left is the cursor remains hand after the change to editable... any remedy?
0
 

Author Comment

by:ark2000
ID: 9810136
oh and on blur I guess would be nice to change it back to noneditable...
0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9810138
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
 
LVL 10

Expert Comment

by:NetGroove
ID: 9810146
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
 
LVL 10

Expert Comment

by:NetGroove
ID: 9810208
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
 

Author Comment

by:ark2000
ID: 9810209
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
 

Author Comment

by:ark2000
ID: 9810633
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

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now