Ho aggiunto la chiamata alla funzione cancella()
Non ci siamo, vedo che stai mischiando un bel po' di roba senza capirne i concetti; in questo modo, tutto ciò che puoi ottenere è solo un bel minestrone. Capisco che nella situazione che hai attualmente, se non hai ben chiaro ciò che stai manovrando, non è semplice applicare delle modifiche in modo specifico senza rischiare di creare un effetto domino, come vedo dal codice che hai abbozzato. Ci sono infatti vari errori più che altro concettuali.
Non è semplice spiegare tutto in un'unica discussione ma cerco di andare per ordine evidenziando i punti critici.
Nel tuo script, questa roba $(function cancella(){ non ha assolutamente senso. Per applicare il gestore all'evento click, basta solo la riga che viene dopo.
Come ho accennato al punto 5 del mio primo post, meglio tenere separato lo script dal codice HTML. Come puoi notare nel mio esempio, non c'è più nessun attributo di evento dichiarato nei tag HTML, ma il tutto è impostato solo ed esclusivamente nello script. Questo è ciò che intendevo dire.
In altre parole, quel gestore onclick, che tu hai scritto come attributo del tag, e quella stessa funzione cancella() che viene richiamata da tale gestore, non servono più se imposti il gestore direttamente da script come ti ho indicato:
codice:
$('.contenitore_ricetta .rimuovi').click(function(){...});
Questo infatti fa tutto il lavoro. Il gestore viene applicato tramite il metodo click() di jQuery e la tua funzione cancella() è rimpiazzata da quel gestore (la funzione callback di tale metodo); non serve nient'altro.
Spero che almeno concettualmente sia chiaro.
Anche quell'onchange, che vedo nel tuo codice sul tag select, puoi impostarlo allo stesso modo, usando il metodo change() di jQuery, e rimuovendo chiaramente l'attributo dal tag e tutto ciò che non serve più.
Quindi nel tuo script avrai semplicemente una cosa del genere:
codice:
$('#users').change(function(){
//Qui le azioni che avvengono al change dell'elemento #users
});
ATTENZIONE: quando "selezioni" degli elementi tramite jQuery (ma allo stesso modo con semplice JavaScript) è essenziale assicurarsi che quegli elementi siano stati già creati nella pagina e quindi siano disponibili per la manipolazione via script. A tal proposito è necessario far eseguire lo script solo dopo la creazione di tali elementi. Alcuni usano inserire il blocco <script> alla fine del body; in alternativa, inserendo lo script dentro head, si può usare il metodo ready() di jQuery.
Semplice esempio:
codice:
<head>
<script>
// Metodo ready() eseguito quando la pagina è stata caricata completamente
// e gli elementi del DOM sono disponibili per essere manipolati via script
$(function(){
/*
Qui puoi mettere tutto il tuo script,
in particolare quello in cui vai a selezionare e manipolare
gli elementi creati all'apertura della pagina
*/
});
</script>
</head>
Qui ho usato la forma abbreviata di ready() (quella raccomandata) come ho fatto anche per gli esempi nei precedenti post.
Dentro la funzione che rimuove l'elemento, vedo che hai impostato una chiamata AJAX che, come mi hai accennato, serve per rimuovere il record dal db. Fai però attenzione a come hai impostato la cosa; vedo che nel success hai inserito il remove(), con l'intento di rimuovere l'elemento dalla pagina una volta che ricevi risposta dal server (da quel che intuisco). Questo è anche corretto ma, se fai caso, la prima riga della funzione sta già rimuovendo l'elemento:
codice:
var idElementoRimosso = $(this).closest('.contenitore_ricetta').remove().attr('id');
Nello specifico, questa riga ti restituisce il valore dell'id ma, allo stesso tempo, va a rimuovere l'elemento tramite il metodo remove(). In sostanza fa più azioni assieme. Questo è ciò che ti avevo indicato di fare inizialmente, perché non era chiaro ciò che volessi fare esattamente; cioè, recuperare l'id, quindi fare la chiamata AJAX e, alla risposta, rimuovere l'elemento dalla pagina.
Fai inoltre attenzione a dove e come stai usando il this.
codice:
$('.contenitore_ricetta .rimuovi').click(function(){
var idElementoRimosso = $(this).closest('.contenitore_ricetta') [...]
$.ajax({
[...]
success: function(response){
$(this).closest('.contenitore_ricetta') [...]
}
})
})
Dentro la funzione callback del click (cioè nel suo contesto), farà riferimento all'elemento da cui e scaturito l'evento, ma se lo usi dentro la funzione del success farà riferimento all'oggetto jqXHR della relativa chiamata AJAX (vedi questa discussione su stackoverflow).
Quel tuo script non può funzionare per tutti questi motivi.
Consiglio: per quel tipo di chiamata AJAX (vedo che hai usato type:"POST") puoi usare la forma abbreviata col metodo post() di jQuery.
Potrebbe anche essere utile mostrare un messaggio di errore nel caso la richiesta AJAX non sia andata a buon fine.
Riepilogando il tutto, potrebbe essere una cosa del genere:
codice:
$('.contenitore_ricetta .rimuovi').click(function(){
var idElementoDaRimuovere = $(this).closest('.contenitore_ricetta').attr('id');
$.post('piatto.php', {id: idElementoDaRimuovere}, function(){
$('#'+idElementoDaRimuovere).remove();
}).fail(function() {
alert('Errore: richiesta non riuscita. Non è stato possibile rimuovere questo elemento');
});
});
.
Consiglio: per tutte le chiamate AJAX, anche nella funzione showUser(), ti consiglio l'uso dei metodi jQuery così da semplificare il più possibile la stesura dello script.
Per cui, anziché questa roba:
codice:
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","search.php?q="+str,true);
xmlhttp.send();
}
}
Puoi fare una cosa del genere:
codice:
$('#users').change(function(){
var val = this.value;
if (val == '') $('#txtHint').html('');
else $('#txtHint').load('search.php?q='+val);
});
.
Cioè, innanzitutto impostare il gestore del change come già visto per il click, e utilizzare il metodo load() di jQuery; un'altra forma abbreviata per la chiamata AJAX che, in questo caso, riversa direttamente il contenuto della risposta all'interno dell'elemento specificato.
Spero che le dritte date siano sufficienti per poter proseguire nel tuo elaborato e, cosa più importante, che ti siano chiari i concetti esposti; o quantomeno, spero di non averti confuso maggiormente le idee 
Fai sapere, buon proseguimento 
Rispondi quotando
