Comment modifier les données sur le clic

Je ne suis pas sûr de ce que l'on appelle, mais je veux pouvoir cliquer sur, par exemple, un div contenant un nombre, puis il se transforme en un champ de texte d'entrée, la valeur étant le nombre auquel j'ai cliqué.

Ensuite, je veux modifier le numéro, puis cliquer sur (événement en ligne), et il va revenir à un div , à partir du champ de texte montrant le nouveau numéro édité. Le numéro aurait également été mis à jour dans la base de données via ajax.

À quoi sert cette fonction?
Quelle est la meilleure façon de coder cela?

Vous pouvez faire ce qui suit:

Avoir un événement de clic et créer une boîte de texte à la volée qui prend le texte dans le div comme valeur.

Le flou même qui se lie à cette zone de texte et fait un appel AJAX et, dans son succès, change le texte div

Disons que votre HTML est comme:

 <div id="fullname">Amazing Spider man</div>

Et votre code JS sera comme:

 $('#fullname').click(function(){ var name = $(this).text(); $(this).html(''); $('<input></input>') .attr({ 'type': 'text', 'name': 'fname', 'id': 'txt_fullname', 'size': '30', 'value': name }) .appendTo('#fullname'); $('#txt_fullname').focus(); }); $(document).on('blur','#txt_fullname', function(){ var name = $(this).val(); $.ajax({ type: 'post', url: 'change-name.xhr?name=' + name, success: function(){ $('#fullname').text(name); } }); });

Cela se manifeste dans ce jsfiddle

Il s'appelle jQuery edit en place. Il existe plusieurs plugins disponibles chez jQuery pour cela.

Il y a jEditable: http://www.appelsiini.net/projects/jeditable

Cependant, X-editable semble beaucoup plus agréable: http://vitalets.github.io/x-editable/

Entrez la description de l'image ici

Vous avez déjà nommé l'ensemble du processus.

D'abord, affectez tous vos numéros ou champs à une certaine classe.

 <div class="editable">value</div>

Ensuite, attribuez à cette classe un événement de clic.

 $('.editable').click(function(){ //replace element with input element containing the value //attach an onblur event to the new element $(newelement).blur(function(){ //use $.ajax to send the element's value to your server //remove the input element and then replace the previous element with the new value }); });

Pourquoi ne pas rester avec un seul champ de saisie, et changer les styles de champ sur le flou. Vous pouvez tout enlever, de sorte qu'il ne ressemble pas à une entrée, de cette façon il n'est pas nécessaire de changer d'aller-retour. Faire un appel Ajax sur le flou.