Update content with contenteditable and jQuery

March 1st, 2012

Recently, I built a site for a client where they wanted to have the ability to make edits to some of the content on the site. Since I wasn’t using full blown content management system for it, they could just add events and news items, I didn’t want to have to write a huge WordPress like editing system. So I decided to see if it was possible to just let them edit the content right on the page if they were logged in as an admin. I’m not going to show any PHP for two reasons, if you don’t know anything about PHP, you probably shouldn’t be messing around with this yet and there’s a ton of tutorials out there to show you how to create an admin system and how to update a database. We’re going to focus on the jQuery because that’s the part that’s the most fun and it’ll make you cool at the office.

1
2
3
4
5
6
7
8
9
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="edit">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
          fugiat nulla pariatur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.</p>
    <p class="edit">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
          deserunt mollit anim id est laborum.</p>
</div>

Here’s the HTML we’re going to work with. We have three paragraph tags inside a div with the class of content. Two of the paragraph tags have a class of edit. To make this work, we’ll do this, if the user is logged in, then our JavaScript file will be loaded and our jQuery will run. We’ll add set the contenteditable attribute of the paragraph tags with the class of edit to true and then add a save button for the user to click when they’re done editing.

1
2
3
4
5
6
(function() {
    var content = $('.content'),
          edit = $('.edit');
          edit.attr('contenteditable', 'true');
          content.append('<button>Save</button>');
})();

Now that there’s a save button on the page, we need to check to see when it’s been clicked, so we know when to save.

1
2
3
4
5
6
7
8
9
10
(function() {
    var content = $('.content'),
          edit = $('.edit');
          edit.attr('contenteditable', 'true');
          content.append('<button>Save</button>');

    $('button').on('click', function() {

    });
})();

When the button clicked, we want to get all the content that is in the paragraph tags with the edit class and use jQuery’s ajax method to send our content to the PHP file that will update the database. What we’ll do is, since the button is inside the same div as the paragraph tags, we’ll get the siblings of the button using jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(function() {
    var content = $('.content'),
          edit = $('.edit');
          edit.attr('contenteditable', 'true');
          content.append('<button>Save</button>');

    $('button').on('click', function() {
        var siblings = $(this).siblings(),
              content1 = $(siblings[1]).html(),
              content2 = $(siblings[2]).html(),
              dataString = 'content1=' + content1 + '&content2=' + content2;

    });
})();

So what’s going on in the four lines inside the button click function? First we’re getting the siblings of the button and assigning it to the variable siblings. You might be wondering why I’m using $(this).siblings(), it’s because this way you could have more than one block to edit, you could reuse this as a function and it will work with any of the buttons you have on the page. Next, since this is a simplified version to just show the functionality, we get the two editable siblings and assign them to variables content1 and content2. Finally, we have to send these somehow to the PHP file that will update the database, so we set a variable called dataString to the same thing as we’d send with a normal form with the method of post. Now to send it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(function() {
    var content = $('.content'),
          edit = $('.edit');
          edit.attr('contenteditable', 'true');
          content.append('<button>Save</button>');

    $('button').on('click', function() {
        var siblings = $(this).siblings(),
              content1 = $(siblings[1]).html(),
              content2 = $(siblings[2]).html(),
              dataString = 'content1=' + content1 + '&content2=' + content2;

        $.ajax({
            type: 'post',
            url: 'update.php',
            data: dataString
        });

    });
})();

We just jQuery’s ajax method and send dataString to a PHP, I’ve called it update.php, where you’d use an MySQL insert statement and update your database. You could add a gif animation or something similar in order to show the user that something is happening. Or you could set up a callback function on the ajax method to tell the user that the database has been successfully updated.

This is a very simple example of how this could be done. In a more complicated site, you could change it so that jQuery scans the page for all the elements with a certain class and grabs their content. The contenteditable attribute has been around for a while, so long this will even work in IE6!

2 Responses to Update content with contenteditable and jQuery

  1. Great tutorial, will come in handy for my next project. Thanks!

  2. Nico says:

    what contains the update.php page?

Leave a Reply

Your email address will not be published. Required fields are marked *