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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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>


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>



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>



Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

ark2000Author Commented:
ok, what about adding an image? so we would have a span with an image that may be replaced...
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?
ark2000Author Commented:
Response.Status = "200 OK"

is it?
ark2000Author Commented:
how r u NetGroove? =)
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?
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.
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.

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>



ark2000Author Commented:
http://d5395716.t50.thisinformation.com/home it wasn't working a second ago here, I'll put the lates in a sec
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...

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>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

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

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 =)
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

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...

ark2000Author Commented:
k thanks!

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

ark
NetGrooveCommented:
Uhps! I just noticed.
Thank you very much for the points.
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...
ark2000Author Commented:
yw
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?
ark2000Author Commented:
function editSpan(spanId){
  theSpan = document.getElementById(spanId);
  theSpan.className='editable';
  thespan.contentEditable;
}

is this right?
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....

ark2000Author Commented:
cool
the only thing left is the cursor remains hand after the change to editable... any remedy?
ark2000Author Commented:
oh and on blur I guess would be nice to change it back to noneditable...
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...

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>

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>


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
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?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.