Utilisez jQuery pour créer edit dans place div et avoir une nouvelle div disponible pour éditer juste en dessous

Question

Je suis nouveau à jQuery et je voudrais savoir s'il est possible de créer et éditer sur div sur lequel je peux cliquer , tapez un peu de texte, faites-le sauvegarder et ayez immédiatement une autre div dynamiquement en dessous qui permettra la même capacité à taper et à enregistrer, et ainsi de suite. Si quelqu'un a des idées, ce serait grandement apprécié.

$(document).ready(function() { 
     $('.edit_area').editable(function(value, settings) { 
      return (value); 
     }, { 
      type: 'textarea', 
      onblur: 'submit', 
      indicator: 'Saving...', 
      callback: function(value, settings) { 
       var thisData = $(value); 

       $.post('<%=Url.Action("SetPostieNotes", "Posties") %>', 
       'postieNotes=' + escape(thisData) 
       ); 
       var divTag = document.createElement("div"); 
       divTag.id = "div"; 
       divTag.setAttribute("align", "center"); 
       divTag.className = "edit_area"; 
       divTag.innerHTML = "Test Dynamic Div."; 
       document.body.appendChild(divTag); 
      } 
     }); 
    }); 

Answer 1

Utilisez jEditable pour la fonctionnalité modifier en place, et l'utiliser est des fonctions de rappel pour frayer la nouvelle div ci-dessous l'existant.

---

Vous n'êtes pas vraiment en utilisant tout ce que jEditable a à offrir, essayer quelque chose comme ça (je ne peux pas tester ce moment, mais il devrait vous donner quelques idées):

$(function() { 
    $('.edit_area').editable('<%=Url.Action("SetPostieNotes", "Posties") %>', { 
     callback: function(v, settings) { 
      var new_div = $('<div />') 
          .addClass('edit_area') 
          .editable('<%=Url.Action("SetPostieNotes", "Posties") %>', settings); 

      $(this).after(new_div); 
     } 
    }); 
}); 

Ce devrait être tout ce qu'il y a à faire. Vous n'avez pas besoin de faire la soumission vous-même, c'est ce que jEditable est pour. Fournissez simplement l'URL que vous souhaitez enregistrer comme premier paramètre et les paramètres comme seconde.

Answer 2

J'ai commencé en utilisant jEditable et déplacé sur les plugins éditables de tectual() au lieu Voici le code que je utilise https://github.com/relipse/jQuery-Editable/blob/master/jquery.editable.js