jEditable input value to refresh the element content on submit

jEditable input value to refresh the element content on submit

My greetings for everyone! Like the title says, I am using jEditable plugin to test some inline editing code, but I can't get the input value, because when I submit the data, it returns to a normal element with the old data, not with the new one.

Take a look at the attached screenshot image.

Well, I tried to get the element .text() or .html()  on keyup event and save it to a variable, but it returns all the input and buttons together =[

I've read on the project website that I can handle all the data with Ajax, submitting it to a function instead of a URL, but how?

My code:

  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  2. <?php

  3. mysql_connect("localhost", "root", "") or die (mysql_error());;
  4. mysql_select_db("test") or die (mysql_error());;

  5. $query = mysql_query("SELECT id, blogTitle FROM inline");

  6. while ($row = mysql_fetch_array($query)) {
  7. extract($row);
  8. echo "<h1 class=\"edit\" id=\"blogTitle\">$blogTitle</h1>";
  9. }

  10. ?>
  11. <script type="text/javascript" src="jquery.js"></script>
  12. <script type="text/javascript" src="jeditable.js"></script>
  13. <script>
  14. $(document).ready(function() {
  15. $(".edit").editable("http://localhost/save.php", {
  16. placeholder:'<?php echo $blogTitle; ?>',
  17. submit:'OK',
  18. cancel:'Cancel',
  19. onblur:'cancel',
  20. loadtext:'Loading...'
  21. });
  22. });
  23. </script>
You see the placeholder option? Yes, I tried to put that variable (from the keyup event) in it, but failed, it doesn't return only the input value.

Thank you.