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:

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

  5. mysql_connect("localhost", "root", "") or die (mysql_error());;
  6. mysql_select_db("test") or die (mysql_error());;

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

  10. while ($row = mysql_fetch_array($query)) {
  11. extract($row);
  12. echo "<h1 class=\"edit\" id=\"blogTitle\">$blogTitle</h1>";
  13. }

  15. ?>
  16. <script type="text/javascript" src="jquery.js"></script>
  17. <script type="text/javascript" src="jeditable.js"></script>
  18. <script>
  19. $(document).ready(function() {
  20. $(".edit").editable("http://localhost/save.php", {
  21. placeholder:'<?php echo $blogTitle; ?>',
  22. submit:'OK',
  23. cancel:'Cancel',
  24. onblur:'cancel',
  25. loadtext:'Loading...'
  26. });
  27. });
  28. </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.