Need som help to modify this script.

Need som help to modify this script.

Hi! 


I found this very userfull (edit in place) script and i would like to make som modifications to it but i dont get it to work propper.


What i want to achive is that when you are clicking the "edit" button my <p>hello there</p> becomes <p><input type="text" value="hello there" /></p>


I managed to make it convert to an input by using .replaceWith but a cant get it to change back when i press my save och cancel button.

And i also dont understand how i can include my prevValue var inside value=" prevValue "...


I hope some can help me, here is the code.


  2. /**
  3.  * editableText plugin that uses contentEditable property (FF2 is not supported)
  4.  * Project page - http://github.com/valums/editableText
  5.  * Copyright (c) 2009 Andris Valums, http://valums.com
  6.  * Licensed under the MIT license (http://valums.com/mit-license/)
  7.  */
  8. (function(){
  9. /**
  10. * The dollar sign could be overwritten globally,
  11. * but jQuery should always stay accesible
  12. */
  13. var $ = jQuery;
  14. /**
  15. * Extending jQuery namespace, we
  16. * could add public methods here
  17. */
  18. $.editableText = {};
  19. $.editableText.defaults = {  
  20. /**
  21. * Pass true to enable line breaks.
  22. * Useful with divs that contain paragraphs.
  23. */
  24. newlinesEnabled : false,
  25. /**
  26. * Event that is triggered when editable text is changed
  27. */
  28. changeEvent : 'change'
  29. };  
  30. /**
  31. * Usage $('selector).editableText(optionArray);
  32. * See $.editableText.defaults for valid options 
  33. */
  34. $.fn.editableText = function(options){
  35. var options = $.extend({}, $.editableText.defaults, options);

  37. return this.each(function(){
  38. // Add jQuery methods to the element
  39. var editable = $(this);

  41. /**
  42. * Save value to restore if user presses cancel
  43. * This var will hold previous value
  44. */
  45. var prevValue;

  47. // Create edit/save buttons
  48. var buttons = $(
  49. "<div class='editableToolbar'>" +
  50. "<span class='edit'>Edit</span>" +
  51. "<span class='save'>Save</span>" +
  52. "<span class='cancel'>Cancel</span>" +
  53. "</div>")
  54. .insertBefore(editable);

  56. // Save references and attach events            
  57. var editEl = buttons.find('.edit').click(startEditing);

  59. buttons.find('.save').click(function(){
  60. stopEditing();
  61. editable.trigger(options.changeEvent);
  62. });
  63. buttons.find('.cancel').click(function(){
  64. stopEditing();
  65. editable.html(prevValue);
  66. });

  68. // Display only edit button
  69. buttons.children().css('display', 'none');
  70. editEl.show();

  72. if (!options.newlinesEnabled){
  73. // Prevents user from adding newlines to headers, links, etc.
  74. editable.keypress(function(event){
  75. // event is cancelled if enter is pressed
  76. return event.which != 13;
  77. });
  78. }

  80. /**
  81. * Makes element editable
  82. */
  83. function startEditing(){
  84. // Save previous value               
  85. prevValue = editable.html();

  87. buttons.children().show();
  88. editEl.hide();

  90. editable.replaceWith('<p class="editable"><input type="text" value="" /></p>');
  92. }
  93. /**
  94. * Makes element non-editable
  95. */
  96. function stopEditing(){
  97. buttons.children().hide();
  98. editEl.show();
  100. editable.replaceWith('<p class="editable"></p>');
  101. }
  102. });
  103. }
  104. })();
    105.