An Example

This weirdo typed “Your Mommy” instead of “Yo Mama.” How distracting! Let’s write some code so we can fix this.

If we click the edit link corresponding to the joke, we get something that looks like the following:

Great! We edited it, now we simply click submit and we can go on with reading jokes and being merry!

How it works

When the edit link is clicked, some simple javascript is called. Here is the PHP code for the edit hyperlink for any joke.

echo "<a id="joke&quot;.$joke_id.&quot;" href="javascript:edit_joke(&quot;.$joke_id.&quot;);">;edit</a>";

We start by assigning each link with a distinct ID (corresponding to the joke’s ID in the database) and, upon clicking, it calls the javascript function edit_joke.

The Javascript/jQuery Part

Inside the edit_joke function, I used jQuery selectors to find the link and text for the joke. I then used the wrapInner() method to place an editable <div> inside our joke text’s <p> tags (basically, we now have <p id=”123″><div>Your mommy joke hehe haha</div></p> instead of <p id=”joke123″>Your mommy joke hehe haha</p>). After that, change the edit link to submit/cancel using jQuery. Clicking submit will call the javascript function edit_joke_submit(..) and clicking cancel will call the javascript function edit_joke_cancel(..). I placed those links inside a <span> tag so I could easily reference them later. The magic in this code is the contenteditable=’true’ part of the div. Here’s the code:

function edit_joke(joke_id){
	this_link = $("a#joke"+joke_id);
	this_joke = $("p#joke"+joke_id);

	this_joke.wrapInner("<div contenteditable='true' class='editable_div'></div>");

	this_link.replaceWith("<span id='submitcancel'>"+
		"<a id='joke"+joke_id+"' href='javascript:edit_joke_submit("+joke_id+");'>submit</a>"+
		"<a id='joke"+joke_id+"' href='javascript:edit_joke_cancel("+joke_id+");'>/cancel</a>" );
}

The edit_joke_cancel function is relatively simple. I first found the corresponding submit/cancel link and the joke div using jQuery selectors. After that, I used the html() method to grab the new text that was typed in. I set the text inside the <p> tags equal to the new text so that it would look like <p id=”123″>Yo mama joke hehe haha<div>Yo mama joke hehe haha</div></p> instead of <p id=”joke123″>Yo mama joke hehe haha</p>. Then, simply remove the <div> tags (and, consequently, the text inside), and it’s back to normal.

function edit_joke_cancel(joke_id){
	this_link = $("span#submitcancel");
	this_joke = $("p#joke"+joke_id);
	this_joke_div = this_joke.find("div");

	joke_text = this_joke_div.html();
	this_joke.html(joke_text);
	this_joke_div.remove();

	this_link.replaceWith(
			"<a id='joke"+joke_id+"' href='javascript:edit_joke("+joke_id+");'>edit</a>"
		);
}

To submit the joke changes, we need only send a post request to a server side php script with the joke id and the new joke text. Here’s the code:

function edit_joke_submit(joke_id){
	var this_joke = $("p#joke"+joke_id);
	var joke_text = this_joke.find("div").html();

	$.post('/jokes/ajax-edit.php',
			{
				id: joke_id,
				text: joke_text
			},
			function(data){
				alert(data);
			}
		);

	edit_joke_cancel(joke_id); // remove edible div
}

The PHP Part

All we have to do now is send an update query to the database with the corresponding id and text. The only caveat: editable divs place <br>’s when you hit enter, so I added the str_replace(..) to turn those into newline characters capable of storage in the database. Check it out:

// Include needed files for account verification here.
// Get your database connection and store it in $dbconn HERE. I use mySQLi in my code.
<?php
if( $accounts->check_admin() )
{
	$id = $dbconn->escape_string($_POST['id']);    // Prevent sql injection
	$text = $dbconn->escape_string($_POST['text']);

	$text = str_replace("<br>","\r\n", $text);    // Swap's out <br>'s

	$query = "UPDATE joke_table SET text='".$text."' WHERE id = ".$id;
	$dbconn->query($query) or die(mysqli_error($dbconn));
	echo "The joke has been edited  ";
}
else
{
	echo 'Yea... okay buddy -_-';
}
?>