Azione non compiuta

[xares]

Buongiorno

in una struttura dove mostro una serie di immagini e ognuna di esse è impostata con una struttura simile

<div class="contenitore">
  <img src=... />
  <div class="azione"></div>
</div> 

Quando si posiziona il mouse sopra viene reso visibile il div interno che copre per intero l'immagine. Al click su di essa parte una richiesta AJAX e al termine della stessa, se tutto è andato a buon fine, vorrei che venisse eliminato l'intero div contenitore.

Ora se faccio così (uso la libreria jQuery)

$('#contenitore div').click(function(){
  var elem = $(this).parent();
  elem.remove();
});

funziona e il div viene eliminato.

Se invece proseguo con la chiamata ajax così

$('#contenitore div').click(function(){
   var elem = $(this).parent();
   
   $.ajax({
      [...]
      success: function(data) {
         if(data == 'OK') {
            elem.remove();
         }
   });

Pur essendosi correttamente conclusa la chiamata AJAX, l'elemento non viene eliminato.

Suggerimenti?

[KillerWorm]

Ciao, le indicazioni che hai fornito sono imprecise e poco dettagliate; il problema può dipendere da vari fattori. Non vedendo l'esatto script e il contesto in cui adoperi questa roba è difficile darti dei suggerimenti mirati.

Intanto noto un errore: hai usato class="contenitore" sul codice html, mentre nel selettore jQuery lo hai indicato come un id (#contenitore). Posso pensare che sia giusto un tuo errore di trascrizione qui sul forum, dal momento che il primo script ti funziona come hai indicato, ma capisci che più impreciso sei nelle tue richieste, meno aiuto ti potrai aspettare.

Provo a spararla: se per caso hai impostato la proprietà datatype, sull'oggetto AJAX, verifica che abbia valore "text", altri valori potrebbero generare degli errori nella ricezione dei dati.

Se non fosse questo, posta il resto del codice in esame (facendo attenzione a riportarlo in modo corretto sul forum) oppure, meglio, posta un link alla pagina pubblica dove è possibile esaminare il problema.

[xares]

Ciao, le indicazioni che hai fornito sono imprecise e poco dettagliate; il problema può dipendere da vari fattori. Non vedendo l'esatto script e il contesto in cui adoperi questa roba è difficile darti dei suggerimenti mirati.

Intanto noto un errore: hai usato class="contenitore" sul codice html, mentre nel selettore jQuery lo hai indicato come un id (#contenitore). Posso pensare che sia giusto un tuo errore di trascrizione qui sul forum, dal momento che il primo script ti funziona come hai indicato, ma capisci che più impreciso sei nelle tue richieste, meno aiuto ti potrai aspettare.

Provo a spararla: se per caso hai impostato la proprietà datatype, sull'oggetto AJAX, verifica che abbia valore "text", altri valori potrebbero generare degli errori nella ricezione dei dati.

Se non fosse questo, posta il resto del codice in esame (facendo attenzione a riportarlo in modo corretto sul forum) oppure, meglio, posta un link alla pagina pubblica dove è possibile esaminare il problema.

OK per la confusione class/id derivante, come hai ben detto, dal trascrivere qui sul forum essendo esattamente così

<div id=contenitore>
  <div>
    <img src... />
    <div class="azione"></div>
  </div>

  <div>
    <img src... />
    <div class="azione"></div>
  </div>
  ...
  <div>
    <img src... />
    <div class="azione"></div>
  </div>
</div>

Il meccanismo è questo.
-il div "interno", con class=azione inizialmente è nascosto e videne reso visibile, e copre per intero il div "genitore", e quindi l'immagine.
- al clic su questo, adesso visibile ed in primo piano, parte l'azione, che come detto funziona senza la chiamata ajax, mentre se uso la chiamata asincrona, mentre vengono eseguite le azioni lato server, lato client, l'elemento non viene eliminato e rimane visibile.

Per il resto non capisco come potrebbe influenzare la url richiamata, i parametri passati e il method impostato (solo questi sono i parametri impostati).

Infatti oltre al fatto che se al posto della chiamata ajax, come detto, faccio

$('#contenitore div').click(function(){
  var elem = $(this).parent();
  elem.remove();
});

funziona e il div viene elimiminato.

Inoltre se faccio

$('#contenitore div').click(function(){
   var elem = $(this).parent();
   
   $.ajax({
      [...]
      success: function(data) {
         if(data == 'OK') {
            alert('messaggio');
         }
   });

funziona, e appare il messaggio in alert, quindi anche la risposta viene correttamente rilevata.
se invece voglio eliminare l'intero div non accade nulla.

Perchè senza la chiamata ajax funziona e dentro no?

PS. Le pagine non sono ancora online.

[KillerWorm]

Bene, hai aggiunto qualche dettaglio ma la cosa continua a non essere troppo chiara. Ripeto, non vedendo l'intero contesto è difficile capire dove può risiedere il problema, si può solo tirare a caso tra vari possibili cause.

Ok per l'alert che ottieni in risposta, prendo per buono quanto hai indicato anche se ho delle perplessità, ma già questo dovrebbe restringe le possibili cause. Non era chiaro inizialmente, per questo il mio appunto di verificare la proprietà datatype, che ora è invece risulta una verifica irrilevante dal momento che, come hai specificato, viene vista la condizione dentro il success.

Verifica intanto se ricevi eventuali errori sullo script. Non ho idea se tu sappia utilizzare la console web del tuo browser. Nel caso, apri il tuo browser, apri la pagina in questione, premi F12 per aprire la console (sfruguglia un po' per visualizzare log, script, registro o quello che è a seconda del tuo browser) e verifica se non ti salta fuori qualche errore rilevante relativo allo script (nel caso ricarica la pagina se serve, F5 da tastiera).

Il selettore '#contenitore div', che poteva andare bene per il codice html postato sul primo post, ora invece potrebbe dare dei problemi perché dentro #contenitore ci sono due div discendenti e, in questo caso, ad entrambi sarà assegnato l'evento click. Meglio specificare il selettore con una cosa del genere '#contenitore div.azione'.

Assicurati che la variabile elem (a cui assegni $(this).parent();) e la chiamata AJAX siano dentro lo stesso scope (il contesto di visibilità delle variabili), o comunque che la variabile sia vista correttamente nel success e che non sia utilizzata e sovrascritta da qualche altra parte in quel contesto. Fai un alert di tale variabile dentro quella condizione e verifica che si riferisca esattamente a quell'elemento. Meglio se fai un log con document.log(elem); (l'output sarà restituito nella console web). Ho l'impressione che venga perso da qualche parte quel riferimento.

[xares]

Grazie.
Mi hai indicato come risolvere. Il problema era proprio lo scope della variabile elem.
Non so per quale motivo ma dopo la chiamata ajax veniva perso il riferimento all'elemento. Dopo il tuo suggerimento ho spostato lo scope di elem da locale a globale e lo script ha funzionto a dovere, come previsto.
Grazie ancora.