I don’t know if this is correct – I just followed the example on the jeditable website, but I can’t seem to be able to get this simple code working. I just want to save the data into the database and still show the changes on the page.
Below is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jeditable WYSIWYG Custom Input Demo</title>
<meta name="generator" content="Mephisto" />
<link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />
<script src="/mint/?js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js""
type="text/javascript" charset="utf-8"></script>
<script src="http://www.appelsiini.net/projects/jeditable/wysiwyg/wysiwyg/jquery.wysiwyg.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://www.appelsiini.net/projects/jeditable/wysiwyg/wysiwyg/jquery.wysiwyg.css" type="text/css" media="screen" charset="utf-8">
<script src="http://www.appelsiini.net/projects/jeditable/jquery.jeditable.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.appelsiini.net/projects/jeditable/wysiwyg/jquery.jeditable.wysiwyg.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
/* Fix FireBug */
/*
if ($.browser.mozilla) {
window.loadFirebugConsole();
};
*/
/* Handle links inside editable area. */
$('.editable > a').bind('click', function() {
$(this).parent().trigger('click');
return false;
});
$('#wysiwyg_2').editable('test-jedit.php',
{
id : 1,
content : 'wysiwyg_2',
indicator : '<img src="../img/indicator.gif">',
type : 'POST',
type : 'wysiwyg',
width : 640,
height : 'auto',
onblur : 'ignore',
submit : 'OK',
cancel : 'Cancel',
wysiwyg : { controls : { separator04 : { visible : true },
insertOrderedList : { visible : true },
insertUnorderedList : { visible : true }
}
}
});
});
</script>
<style type="text/css">
#sidebar {
width: 0px;
}
#content {
width: 770px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<p>
<h1>Jeditable</h1><br />
<small>Edit in place plugin for jQuery.</small>
<ul id="nav">
<li id="first"><a href="/" class="active">weblog</a></li>
<li><a href="/projects" class="last">projects</a></li>
</ul>
</p>
</div>
<div id="content">
<div class="entry">
<p>You might also want to check <a href="../custom.html">other custom inputs demo</a>.
<h2>Extra settings</h2>
<div style="width: 640px" class="editable" id="wysiwyg_2"><img
src="%5C%22http://%5C%22"><span style="\"font-weight:" bold;\"="">gdgfd<span style="font-style: italic;">
gfd</span><big><br>sdfsdf<br>sdfsdf<br><br></big></span></div>
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</body>
</html>
Here’s the PHP code:
<?php
$con = mysql_connect("localhost","username","password");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("my_db", $con);
$id = $_POST['id'];
$content = $_POST['content'];
mysql_query("INSERT INTO editable (id, content)
VALUES ('$id', '$content')");
echo $content;
mysql_close($con);
?>
The first thing to say is please read the php.net page about SQL Injection
To your problem …
I think I might have spotted a problem … your JavaScript is being executed before the DOM is ready … enclose your javascript code (all of it) within the following block :
This means that the code within the function will only be executed once the whole page has been loaded … calling functions on DOM elements that are not loaded will cause you issues … further reading on ready() …
Looking at the code I can see no obvious issue– however there are few basic things you can do to debug this issue … first off check (using something like firebug) that the AJAX request is actually being sent …Secondly you can check the the PHP MySQL code is working correctly …
Update
I took your code and created a jsfiddle
There are a few minor changes needed to get it working :
should be :
I have removed the strange characters !
Update 2
When the OK button is pressed the PHP is called – it POSTs the following data :
So in your PHP you need to change
$_POST['content']to$_POST['value']