Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it
    Registrato dal
    Sep 2006
    Messaggi
    171

    aggiornare form con ajax e jquery

    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.

    codice:
    $("#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

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,078
    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
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2006
    Messaggi
    171
    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 ?

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2006
    Messaggi
    171
    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 ?

  5. #5
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,078
    Quando inserisci il dato è stampi il response li generi il tasto elimina la funzione ajax la metterai nel documento principale
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  6. #6
    Utente di HTML.it
    Registrato dal
    Oct 2009
    Messaggi
    636
    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:

    codice:
    $("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.
    });

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.