Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 12

Discussione: jquery remove()

  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2012
    Messaggi
    199

    jquery remove()

    Ciao a tutti,

    sono fermo per una cavolata, in pratica recupero dei record con un ciclo while(php), dovrei fare in modo che premendo una X di fianco al record scomparisse usando .remove(), ora quello che non ho capito è come passare l'id esatto alla funzione... Vi copio il codice:

    codice:
     <?php
    while($riga_desc=$rs_desc->fetch_assoc()){
    echo"
    <div class='canc' id='descrizione'>
    " .$riga_desc['id_ricetta']."
    <a class='fa fa-close' href='javascript:cancella()'  style='font-size:16px;color:red'></div></a>
    
    
    <br/>
    ";
    
    
    }
    ?>
    
    
    <script>
    function cancella() {
     $('#descrizione').remove()
    } 
    
    Qualcuno sa aiutarmi?
    Grazie

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,325
    Ciao, si può risolvere in vari modi ma, vedendo il tuo codice, è necessario chiarire prima qualcosa:

    1 - Gli id devono necessariamente essere univoci all'interno di uno stesso documento HTML.
    Nel tuo ciclo vedo che stai creando un div con un id
    codice:
    <div class='canc' id='descrizione'>
    mi pare di capire che in uscita avrai quindi una serie di div che avranno lo stesso id; se così fosse, a livello programmatico è un grosso errore. In tal caso devi "diversificare" in qualche modo quell'id, magari aggiungendo un qualche indice, o altrimenti (se ti serve solo per identificare l'elemento nel suo contesto) puoi usare una classe anziché un id.

    2 - Controlla la validazione del codice in uscita (usando un validatore, ad esempio questo). Vedo infatti che c'è la chiusura del div (</div>) dentro il tag <a>, ma da quel che vedo il div è aperto prima dell'apertura di <a>; a meno che tu non abbia omesso di proposito delle parti di codice per riportare l'esempio sul forum, così come lo hai scritto mi pare abbastanza sbagliato.

    3 - Alla tua funzione puoi passare un argomento per poter identificare l'elemento da rimuovere. Puoi fare comunque in vari modi; in linea di massima si può passare l'id dell'elemento da rimuovere (che deve essere univoco, come detto sopra) come argomento della funzione, o usare la keyword this (che fa riferimento all'elemento che chiama la funzione, nel tuo caso l'elemento <a>) e risalire, in modo relativo, all'elemento da rimuovere, ad esempio col metodo closest() di jQuery (e in tal caso sarebbe meglio usare una classe per identificare il relativo div contenitore). In genere il secondo metodo è più versatile ma va impostato a dovere in base alla situazione che si ha.

    4 - Piuttosto che un elemento <a> (che nasce per essere un link) userei un pulsante (ad esempio un elemento <button> con dentro l'icona di Font Awesome, dal momento che stai usando tale toolkit) e imposterei un gestore per l'evento click. Mi pare più adatto in questa situazione.

    5 - Un ultimo consiglio: nella programmazione web è buona pratica mantenere separati il più possibile le componenti html, css e javascript per ottenere un codice pulito; in altre parole è preferibile separare lo stile dai contenuti (quindi evitare CSS in linea) e allo stesso modo, separare l'azione dai contenuti (quindi evitare l'inserimento di JavaScript nei tag HTML).


    Qui un semplice esempio in base a quanto indicato; chiaramente è solo un esempio dimostrativo in HTML, poi sta a te integrarlo eventualmente nel tuo PHP e impostarlo al meglio secondo le tue esigenze:
    codice:
    <!DOCTYPE HTML>
    <html lang="it">
       <head>
          <title>Esempio</title>
          <meta charset="utf-8">
          <script src="http://code.jquery.com/jquery-latest.min.js"></script>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
          
          <script>
             // Qui tutto il JavaScript separato dal codice HTML
             
             $(function(){
                // Applico un gestore click per i pulsanti .rimuovi
                $('.contenitore_ricetta .rimuovi').click(function(){
                   // Il this fa riferimento al pulsante stesso
                   // con closest() seleziono il primo elemento ascendente che ha classe .contenitore_ricetta
                   // quindi lo rimuovo
                   $(this).closest('.contenitore_ricetta').remove();
                });
             });
          </script>
          
          <style>
             /* Qui tutto il CSS separato dal codice HTML */
             
             .contenitore_ricetta {
                width: 500px;
                background: tan;
                margin-bottom: 10px;
                overflow: auto;
             }
             .contenitore_ricetta .rimuovi {
                float: right;
                cursor: pointer;
             }
             .rimuovi > .fa-close {
                font-size: 16px;
                color: red;
             }
          </style>
          
       </head>
       <body>
    
          <div class='contenitore_ricetta'>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             <button class='rimuovi'><i class="fa fa-close"></i></button>
          </div>
    
          <div class='contenitore_ricetta'>
             Morbi venenatis nibh sit amet mi elementum semper.
             <button class='rimuovi'><i class="fa fa-close"></i></button>
          </div>
    
          <div class='contenitore_ricetta'>
             Quisque suscipit sem non est eleifend consectetur.
             <button class='rimuovi'><i class="fa fa-close"></i></button>
          </div>
    
          <div class='contenitore_ricetta'>
             Suspendisse malesuada massa lorem, id pharetra arcu iaculis a.
             <button class='rimuovi'><i class="fa fa-close"></i></button>
          </div>
    
       </body>
    </html>
    Se qualcosa non ti è chiaro, chiedi pure.
    Buon proseguimento.
    Ultima modifica di KillerWorm; 24-04-2019 a 17:49
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2012
    Messaggi
    199
    Grazie mille per la tua risposta, ho capito perfettamente... stavo già pensando di usare closest(), anche se in effetti dovrei studiare meglio jquery. Ho una domanda, se dovessi recuperare l'id dei vari div, come potrei fare? In php potrei passare i vari id all'interno del while es.
    codice:
    ...
    <div class='contenitore_ricetta' id='id_".$riga_desc['id']."' > ... </div>
    Ma poi lato jquery?
    Questo mi sfugge!

    Ancora grazie per i tuoi consigli!

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,325
    Grazie mille per la tua risposta, ho capito perfettamente...
    Figurati

    se dovessi recuperare l'id dei vari div, come potrei fare?
    Dipende da cosa ti serve fare esattamente.

    Tieni presente che nell'esempio che ho postato puoi fare a meno di recuperare l'id, dal momento che il div stesso è selezionato relativamente all'elemento .rimuovi, usando appunto il this e il metodo closest().

    Se ti serve comunque recuperare l'id, chiarisci meglio a cosa ti serve e in che punto dello script hai bisogno di recuperarlo.

    In genere con jQuery puoi usare una cosa del tipo $(elemento).attr('id') o altri metodi (vedi questa discussione su stackoverflow), ma non essendo chiaro quale sia l'obiettivo è difficile darti una risposta mirata; eventualmente prova a chiarire.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    Utente di HTML.it
    Registrato dal
    Dec 2012
    Messaggi
    199
    Devo recuperare l'id del div che elimino, che fa riferimento all'id di un record, per passarlo ad una chiamata ajax in modo da aggiornare il database e poter eliminare il record. In pratica devo eliminare senza aggiornare la pagina, il problema però è anche inverso ossia aggiungere un record senza aggiornare la pagina... Ma prima affronto questo...

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,325
    Chiarissimo.

    Come detto sopra, puoi usare .attr('id'); dentro la funzione del click potresti fare una cosa del genere:
    codice:
    $('.contenitore_ricetta .rimuovi').click(function(){
       var idElementoRimosso = $(this).closest('.contenitore_ricetta').remove().attr('id');
       console.log(idElementoRimosso);
    });
    .
    In questo modo la variabile idElementoRimosso riceverà il valore dell'id di quell'elemento che stai rimuovendo.
    La riga successiva console.log(idElementoRimosso); chiaramente serve solo a verificare, nella console del tuo browser, il corretto funzionamento.

    Qui l'esempio completo:
    codice:
    <!DOCTYPE HTML>
    <html lang="it">
       <head>
          <title>Esempio</title>
          <meta charset="utf-8">
          <script src="http://code.jquery.com/jquery-latest.min.js"></script>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
          
          <script>
             $(function(){
                $('.contenitore_ricetta .rimuovi').click(function(){
                   var idElementoRimosso = $(this).closest('.contenitore_ricetta').remove().attr('id');
                   console.log(idElementoRimosso);
                });
             });
          </script>
          
          <style>
             .contenitore_ricetta {
                width: 500px;
                background: tan;
                margin-bottom: 10px;
                overflow: auto;
             }
             .contenitore_ricetta .rimuovi {
                float: right;
                cursor: pointer;
             }
             .rimuovi > .fa-close {
                font-size: 16px;
                color: red;
             }
          </style>
          
       </head>
       <body>
    
          <div class="contenitore_ricetta" id="contenitore_1">
             Contenitore 1
             <button class="rimuovi"><i class="fa fa-close"></i></button>
          </div>
    
          <div class="contenitore_ricetta" id="contenitore_2">
             Contenitore 2
             <button class="rimuovi"><i class="fa fa-close"></i></button>
          </div>
    
          <div class="contenitore_ricetta" id="contenitore_3">
             Contenitore 3
             <button class="rimuovi"><i class="fa fa-close"></i></button>
          </div>
    
          <div class="contenitore_ricetta" id="contenitore_4">
             Contenitore 4
             <button class="rimuovi"><i class="fa fa-close"></i></button>
          </div>
    
       </body>
    </html>
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  7. #7
    Utente di HTML.it
    Registrato dal
    Dec 2012
    Messaggi
    199
    Grazie per la dritta, ora cerco di sistemare lo script... Ho due domande... perchè con:
    codice:
    var id = $(this).closest('.contenitore_ricetta').attr('id').val();
    Non ottengo un valore?

    ... Domanda inversa, come posso aggiungere un elemento preso dal db, senza aggiornare la pagina?

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,325
    Grazie per la dritta
    ur welcome

    perchè con:
    codice:
    var id = $(this).closest('.contenitore_ricetta').attr('id').val();
    Non ottengo un valore?
    Non mi è chiaro cosa intendi ottenere con val(); tale metodo infatti è utilizzato per recuperare il valore di elementi input, select e textarea (cioè elementi che posseggono una proprietà value); non mi pare il tuo caso.

    Ad ogni modo dipende anche da ciò che viene restituito dal metodo (funzione) che lo precede. Il metodo attr() restituisce una stringa (vedi documentazione), cioè il valore testuale dell'attributo specificato, per cui non puoi usare val() perché questo metodo non appartiene all'oggetto stringa; presumibilmente otterrai un errore visibile nella console.

    Eventualmente chiarisci quale sia il tuo preciso intento.

    ... Domanda inversa, come posso aggiungere un elemento preso dal db, senza aggiornare la pagina?
    La risposta è "AJAX", argomento largamente discusso sul web e anche qui sul forum.
    Consiglio di fare delle ricerche sia sul web sia sul forum per capire come poter iniziare ad impostare la cosa; se poi hai difficoltà puoi aprire eventualmente una nuova discussione su questo specifico argomento.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  9. #9
    Utente di HTML.it
    Registrato dal
    Dec 2012
    Messaggi
    199
    Ok... Allora, ho inserito lo script nella pagina e diciamo che funziona al 70%,ma ho un problema e non capisco a cosa sia dovuto...
    In pratica ho una pagina nella quale inserisco il cliente in una select popolata con dati presi dal db e senza refresh ottengo i dati, posto il codice:
    codice:
    <?php $data=date("Y/m/d");
    include '../include/db_conn_open.php';
    $query_fornitore = " la query evito di postarla";
    $rs_fornitore = $mysqli->query($query_fornitore);
    ?>
    
    
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    
    <script>
    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();
        }
    }
    </script>
    
    
    
    
    </head>
    <body>
    
    
     <br /><br />
               <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
    
        </div>
        <ul class="nav navbar-nav">
        <li ><a href="#">DASHBOARD</a></li>
        <li ><a href="#">COMPILA</a></li> 
        <li class="active"><a href="#">VISUALIZZA </a></li> 
        </ul>    
    </nav> 
    </div>
    <table class="table table-striped" border="1" id="tabella">
    <tbody>
    <tr class="product">
    <td>
    
    
    <div class="form-group">
      <label for="sel1">Seleziona un Cliente:</label>
      <select class="form-control" id="users" name="users" onchange="showUser(this.value)">
    
    
    <option value="">-</option>
    <?php
    while($riga = $rs_fornitore->fetch_assoc()){
    
    
    ?>
    
      <option value="<?php echo $riga['rag_soc'].",".$riga['semestre'] ?>"><?php printf($riga['rag_soc']." ".$riga['semestre']) ?></option>
    <?php } ?> 
      </select>
    
    
    </tr>
    </tbody>
    </table>
    <br>
    
    
    <div id="txtHint">
    <b>&nbsp;&nbsp;&nbsp;Seleziona il Cliente:</b></div>
    </body>
    </html>
    Ora la pagina che viene caricata "search.php":
    codice:
    <?php $data=date("Y/m/d");
    include '../include/db_conn_open.php';
    ?>
    
    
    <!DOCTYPE html>
    <html>
    <head>
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    
    
    
    </head>
    <body>
    
    
    
    
     <?php
    
    
    $record = explode(',',$_GET['q']);
    $rag_soc=$record['0'];
    $semestre=$record['1'];
    
    
    $query_settimana = "select * from settimana inner join cliente on settimana.id_cliente=cliente.id_cliente where rag_soc='$rag_soc' AND semestre='$semestre' AND elimina_settimana='0'";
    $rs_settimana = $mysqli->query($query_settimana);
    $riga_settimana = $rs_settimana->fetch_assoc();
    
    
    $query_giorno = "select * from giorno where id_settimana='".$riga_settimana['id_settimana']."' ";
    $rs_giorno = $mysqli->query($query_giorno);
    $riga_giorno = $rs_giorno->fetch_assoc();
    
    
    $pranzo=$riga_giorno['id_giorno'];
    $cena=$riga_giorno['id_giorno'];
    
    
    echo"<table class='table table-bordered'>";
    
    
     echo "<tr><td colspan='7'> ID giorno: ".$riga_giorno['id_giorno']." ID settimana: ".$riga_settimana['id_settimana']." Cliente: <b>".$riga_settimana['rag_soc']." </b> Menu': <b>".$riga_settimana['semestre']."</b></td></tr>";
    
    for( $i=1; $i<=$riga_settimana['numero_settimana']; $i++)
    {
    
    
    	 echo"
    
    	 <tr>
    
         <td colspan='7' align='center'><b>SETTIMANA ".$i."</b></td>
    
        </tr>
    	<tr>";
    
    
    	for( $j=1; $j<=7; $j++)
    
    	{    if($j==1){$giorno="Lunedi'";    }
    	else if($j==2) {$giorno="Martedi'";  }
    	else if($j==3) {$giorno="Mercoledi'";}
    	else if($j==4) {$giorno="Giovedi'";  }
    	else if($j==5) {$giorno="Venerdi'";  }
    	else if($j==6) {$giorno="Sabato";    }
    	else if($j==7) {$giorno="Domenica";  }
    
    
    	echo "<th scope='col'>".$giorno."</th>";
    
    
    
    	}
    
    	echo"</tr>";
    
    	for($k=1; $k<$j; $k++){
    	$query_desc = "la query funziona";
        $rs_desc = $mysqli->query($query_desc);
    	echo "
    	<td>
    	<a class='btn btn-default btn-xs' data-toggle='collapse' href=#pranzo_".$pranzo." role='button' aria-expanded='false' aria-controls=".$pranzo.">Mostra</a>
    	&nbsp;
    
    	<div class='row'>
      <div class='col'>
        <div class='collapse multi-collapse' id=pranzo_".$pranzo.">
          <div class='card card-body'><center>
    	  ";
    while($riga_desc=$rs_desc->fetch_assoc()){
    echo"
    <div class='contenitore_ricetta' id='".$riga_desc['id_giorno_desc']."'>
    " .$riga_desc['id_ricetta']." id ".$riga_desc['id_giorno_desc']."
    <a class='rimuovi' onclick='cancella()'><i class='fa fa-close' style='font-size:16px;color:red'></i></a>
    </div>
    ";
    }
    		echo"<br/>
    		</center>
          </div>
        </div>
      </div>
      </div>
    
    	<input type='button' name='view' value='pranzo' id=".$pranzo++." class='btn btn-default btn-xs' />
    		</td>"; 
    	}
    echo"<tr>";
    
    
    for($y=1; $y<$j; $y++){
    	$query_desc = "select * from giorno_desc where id_giorno='$cena' and tipo='cena' and elimina_giorno_desc='0' ";
        $rs_desc = $mysqli->query($query_desc);
    	echo "
    	<td>
    
    	<a class='btn btn-default btn-xs' data-toggle='collapse' href=#cena_".$cena." role='button' aria-expanded='false' aria-controls=".$cena.">Mostra</a>
    	&nbsp;
    
    	<div class='row'>
      <div class='col'>
        <div class='collapse multi-collapse' id=cena_".$cena.">
          <div class='card card-body'><center>
    	  ";
    	  while($riga_desc=$rs_desc->fetch_assoc()){
            echo $riga_desc['id_ricetta']." <i class='fa fa-close' style='font-size:16px;color:red'></i>";
    		echo"
    		<br/>";		
    		}
    		echo"
    		</center>
          </div>
        </div>
      </div>
     </div>
    	<input type='button' name='view' value='cena' id=".$cena++." class='btn btn-default btn-xs' /></td>";
    	}
    
    echo"</tr>";
    
    
    }
    ?> 
    <script>
    $(function cancella(){
    $('.contenitore_ricetta .rimuovi').click(function(){
    var idElementoRimosso = $(this).closest('.contenitore_ricetta').remove().attr('id');
    	$.ajax({ 
            type: 'POST',     
            url: 'piatto.php', 
            data: 'id='+idElementoRimosso, 
            dataType: 'JSON',
    		success: function(response){			
               $(this).closest('.contenitore_ricetta').remove();			
               							}
    	      })
    
    	})
             })
    </script> 
    </table> 
    </body>  
     </html>  


    Ho aggiunto la chiamata alla funzione cancella() per capire cosa succedeva in consolle "Uncaught ReferenceError: cancella is not defined at HTMLAnchorElement.onclick"

    Non capisco cosa succeda... Mi sai dare una dritta?

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,325
    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
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

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 © 2019 vBulletin Solutions, Inc. All rights reserved.