aggiornare form con ajax e jquery

[processore]

salve

devo fare un form che tramite un bottone effettua una chiamata ajax e aggiorna i dati nel DB,
dopo aver premuto il bottone che si chiama aggiungi, deve uscire un nuovo bottone con scritto rimuovi.

$("#aggiungi").click(function(){
 
var dati = $("#osservazione").serialize(); //recupera tutti i valori del form automaticamente
 
//form invio dati post ajax
 
//questo alert potete levarlo, serve solo per farvi capire come vengono passati i dati

 
//invio
$.ajax({
type: "POST",
url: "../funzioni/aggiungi.php",
data: dati,
dataType: "html",
success: function(msg)
{


 
},
error: function()
{
alert("Chiamata fallita, si prega di riprovare...");
}
 
});//ajax

 
});//bottone click

ho provato a fare cosi ed effettivamente i dati li aggiunge nel db il mio problema e che non sono riuscito a trovare un modo per aggiornare il bottone e mettere il bottone rimuovi.

come posso fare ?

grazie

[cavicchiandrea]

Dipende se devi eliminare il dato appena aggiunto devi gestirlo lato server (per recuperare l'id appena generato) se vuoi aggiornare il tasto "aggiungi" ti basta farlo nel success

[processore]

una volta che l'utente clicca aggiungi effettua una chiamata ajax e aggiunge i dati nel db.
dopo esce il tasto rimuovi che una volta cliccato effettua una nuova chiamata ajax e cancella i dati.

io avevo pensato di fare cosi.

faccio una query se i dati sono nel db entro nell'if e stampo il form rimuovi.
altrimenti stampa il form aggiungi.

solo che facendo cosi per cambiare il bottone devo aggiornare la pagina manualmente.

c'è un modo per aggiornare solo il dv dopo la chiamata ajax ?

[processore]

oppure avevo pensato nella chiamata ajax nel success inserire una pagina html con dentro solo un imput rimuovi. al ritorn della chiamata ajax mi stampa l'imput rimuovi


si capisce o e meglio se metto il codice ?

[cavicchiandrea]

Quando inserisci il dato è stampi il response li generi il tasto elimina la funzione ajax la metterai nel documento principale

[longilineo]

Se ti limitassi a cambiare l'id dell'elemento 'aggiungi' in 'rimuovi' verrebbe comunque eseguito l'event handler legato all'elemento con id aggiungi anche quando questo venisse mancare a nel dom. Facendo l'unbinding con 'unbind' o 'off' l'evento click verrebbe ignorato anche sull'elemento con id 'rimuovi'.
Io utilizzerei i namespace per gli eventi così da distinguere il click sul pulsante quando serve per aggiungere da quando invece viene utilizzato per rimuovere. Chiamandoli rispettivamente click.add e click.remove, potresti fare qualcosa del tipo:

$("body").on('click.add', '#aggiungi', function(){
     btn = $(this); //così potrai lavorare sul pulsante dalla success della richiesta ajax
     $.ajax({
         //codice che già hai
         success: function(data){
           //eventuale codice per lavorare con data
           btn.text('Rimuovi').attr('id', 'rimuovi'); //cambi il testo e l'id del pulsante aggiungi rispettivamente in 'Rimuovi' e 'rimuovi'
         }
     });
});

$('body').on('click.remove', '#rimuovi', function(){
   //gestisci il click sul stato rimuovi.
});