CODEWITHSUNDEEP
phpmysql
Helen Neely
Helen Neely

Reputation: 4740

JEditable Not Saving in Mysql

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="\&quot;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);
?>

Upvotes: 0

Views: 983

Answers (1)

Manse
Manse

Reputation: 38147

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 :

$(document).ready(function() {
  // your code here
});

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

$result = mysql_query($query); // execute your query

// Check result
// This shows the actual query sent to MySQL, and the error. Useful for debugging.
if (!$result) {
    $message  = 'Invalid query: ' . mysql_error() . "\n";
    $message .= 'Whole query: ' . $query;
    die($message);
} 

// if you get to here the query worked fine ...

Update

I took your code and created a jsfiddle

There are a few minor changes needed to get it working :

<div style="width: 640px" class="editable" id="wysiwyg_2">
<img src="%5C%22http://%5C%22"><span style="\&quot;font-weight:" bold;\"="">gdgfd
<span style="font-style: italic;"> gfd</span>
<big><br>sdfsdf<br>sdfsdf<br><br></big></span></div>

should be :

<div style="width: 640px" class="editable" id="wysiwyg_2"><span style="font-weight: bold;">gdgfd<span style="font-style: italic;">
gfd</span><br>sdfsdf<br>sdfsdf<br><br></span></div>

I have removed the strange characters !

Update 2

When the OK button is pressed the PHP is called - it POSTs the following data :

1:wysiwyg_2
value:<span style="font-weight: bold;">gdgfd<span style="font-style: italic;">
gfd</span><big><br>sdfsdf<br>sdfsdf<br><br></big></span>

So in your PHP you need to change $_POST['content'] to $_POST['value']

Upvotes: 1

Related Questions