1. Computing

Discuss in my forum

Jennifer Kyrnin

Correction to ContentEditable Article

By January 4, 2013

Follow me on:

The article Making Web Page Content Editable by Users had an error in it. In my zeal to have my articles use nice typography, I search-and-replaced all the straight quotes (') in the JavaScript to curly quotes (’). Thus rendering the sample code worthless.

Sorry for any confusion.

After the break: what the sample code should have looked like.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Tasks</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

<body>
<h1>My Tasks</h1>
<p>Start typing in your list, and the browser will store it for you. When you reload it will still be here.</p>
<ul id=myTasks contenteditable=true>
  <li></li>
</ul>

<script>
$(document).ready(function(){
  $("#myTasks").blur(function() {
    localStorage.setItem('myTasksData', this.innerHTML);
  });

  if ( localStorage.getItem('myTasksData') ) {
    $("#myTasks").html(localStorage.getItem('myTasksData'));
  }
});
</script>
</body>
</html>

Thanks to Tony who caught this error and reported it while I was on vacation back in December! And if you ever find errors on my site, please don’t hesitate to let me know. I try to prevent mistakes in the first place, but I’m human. And I really appreciate it when you let me know what I can fix. Thanks!

Comments
January 7, 2013 at 3:20 pm
(1) Gerry Williams says:

Boy Howdy did your update come at the right time. Actually I missed your initial posting but this micro-CMS feature was just what we needed.

When initially thinking about it I though it would only be applicable to ‘private pages’ – not may sites want to open their content to the general population’s whims. But, in our case, we have a site where we needed to inform ‘registered’ users of timely events (ever 10 minutes or so on a specific date). We also have an administration page (protected by login).

We modified the code to php and as a function of the user (admin or registered user) changed the contenteditable tag to one of (=true or =false). We also added a javascrip page-refresh so the the page automatically updates minute.

Now, an administrator can update the s and the users will instantaneously see them. SWEET.

I would appreciate a bit of advice on a further mod. We would like a second instance of localstorage ((‘myOtherTasksData’) and in a non form. I tried with an ID but that did not work.

Anyone have a suggestion?

Thanks Jennifer !!!!

January 7, 2013 at 5:41 pm
(2) Jennifer Kyrnin says:

Thanks. I’m glad I could help. I’ll think about your problem and if I come up with a solution I’ll post something. And if anyone else has suggestions, please feel free to let Gerry know…

January 7, 2013 at 7:11 pm
(3) Gerry Williams says:

Here’s a Oops I think.

I had not check my code out in anything but FireFox – my code doesn’t work on Opera or IE-9.

I loaded your original code (not my php version) and the same results; FF-Okay Opera-Does not work, IE – does not work. any ideas?

http://aassregistration.com/baseline-notices.html

Sad-Gerry

Leave a Comment

Line and paragraph breaks are automatic. Some HTML allowed: <a href="" title="">, <b>, <i>, <strike>

©2014 About.com. All rights reserved.