Come modificare i dati onclick

Question

Non sono sicuro di come si chiama, ma voglio poter fare clic su ad es. a div contenente un numero e quindi cambierà in un campo di testo di input, con il valore che è il numero su cui ho fatto clic.

Quindi desidero modificare il numero e fare clic su (evento onblur) e verrà modificato in un div, dal campo di testo che mostra il nuovo numero modificato. Il numero sarebbe stato anche aggiornato nel database tramite ajax.

Come si chiama questa funzione?
Qual è il modo migliore per codificarlo?

Answer 1

Si chiama jQuery edit in place. Ci sono un certo numero di plugin disponibili da jQuery per questo.

Answer 2

Hai già chiamato l'intero processo.

Innanzitutto, assegna tutti i tuoi numeri o campi con qualche classe.

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

Quindi, assegnare a tale classe un evento click.

$('.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 
}); 
}); 

Answer 3

C'è jEditable: http://www.appelsiini.net/projects/jeditable

sguardi Tuttavia, X-modificabili molto più belli: http://vitalets.github.io/x-editable/

Answer 4

Perché non basta stare con un campo di input, e cambiare gli stili di campo su sfocatura. Puoi portare via tutto in modo che non sembri un input, in questo modo non c'è bisogno di cambiare avanti e indietro. Effettua una chiamata Ajax su sfocatura.

Answer 5

È possibile effettuare le seguenti operazioni:

avere un evento click e creare una casella di testo al volo che prende il testo all'interno del div come un valore.

L'hanno una sfocatura anche che si lega a quella casella di testo e fa una chiamata AJAX e nel suo successo modificare il testo div

permette di dire il codice HTML è come:

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

e il codice JS sarà essere come:

$('#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); 
     } 
    }); 
}); 

questo è demostrated in questo jsfiddle

Answer 6

Le cose sono cambiate. HTML5 ha un attributo contentEditable con un supporto browser già piuttosto buono, quindi ti consigliamo di esplorarlo prima, soprattutto se vuoi fare no-jquery.

Semplicemente mettere contentEditable = true in un div lo renderà cliccabile e modificabile (testo base). È possibile impostare un listener di base e inserire un aggiornamento in un array pronto per il salvataggio tramite ajax. More info here.

Inoltre, here's a plugin che lo prende ulteriormente e fornisce più controlli WYSIWYG per questi campi.

In ogni modo, ecco un esempio di codice, senza plugin, non jquery:

var editable = document.getElementById('myContent'); 
 
editable.addEventListener('input', function() { 
 
    console.log('An edit input has been detected'); 
 
});

<div id="myContent" contentEditable=true>This is a paragraph. Click to make it editable.</div>