jquery ajax manda richieste in quantità arbitraria

MarcoGrazia

Utente Attivo
15 Dic 2009
813
18
18
60
Udine
www.stilisticamente.com
Ciao,
ho un problema che non riesco a comprendere, mi spiego: tramite PHP/MySQL creo una tabella con i dati di alcuni record di un database, cosa abbastanza banale in se; poi tramite jquery/javascript controllo se l'utente fa click ( double click ) su una cella della tabella, nel caso apro un box con una textarea di editing.
Un po' come fa phpmyadmin per permettere di modificare un campo di record del database.
Tramite un banale tasto SALVA ( invece che cliccare fuori dal campo di editing ) mando una richiesta ajax ad una pagina remota che mi salva ( update ) il dato contenuto nel database.
Fino a qui tutto bene, solo che la prima volta va bene, poi con la seconda cella, lo fa mandando due richieste via ajax, poi tre, poi... insomma non comprendo perché fa così.
Ora il codice incriminato:
HTML:
<table>
  <tbody>
     <tr>
       <td>27</td>
       <td class="click" id="titolo_sito-28">TOKIO-GHOUL News Article<br>- GameSamba</td>
       <td class="click" id="didascalia-28" >TOKIO-GHOUL il nuovo<br>gioco che arriverà nel<br>2016</td>
       <td class="click" id="url-28" >http://gamesamba.net/announcem</td>
       <td class="click" id="lingua-28">en</td>
       <td class="click" id="argomento--28">Blog a tema giochi</td>
     </tr>
     <tr>
       <td>28</td>
       <td class="click" id="titolo_sito-29">The latest and funniest<br>webgames---All in<br>Game321.com</td>
       <td class="click" id="didascalia-29" >Dragons Spear is inspired<br>by western dragon<br>mythologies. It is a<br>MMOARPG that based on a<br>virtual world Dragaeri.</td>
       <td class="click" id="url-29" >http://spear.game321.com/</td>
       <td class="click" id="lingua-29">en</td>
       <td class="click" id="argomento--29">Siti di giochi in Flash &reg;</td>
     </tr>
  </tbody>
</table>
<div class="edit" style="display:none">
  <textarea style="display:none" id="contenuto"></textarea>
  <input type="text" id="lingua" value="" style="display:none">
  <select style="display:none" id="argomento">
    <option value="1">Siti di giochi in Flash &reg;</option>
    <option value="2">siti di giochi online</option>
    <option value="3">Siti di giochi offline</option>
    <option value="4">Siti di giochi per mobile</option>
    <option value="5">Forum ai siti di giochi</option>
    <option value="6">Siti di giochi Hot</option>
    <option value="7">Directory autori</option>
    <option value="8">Blog a tema giochi</option>
    <option value="9">Riviste tematiche sui giochi</option>
  </select>
  <p class="button-group">
    <button type="button" class="btn btn-default" id="annulla">Annulla</button>
    <button type="button" class="btn btn-danger" id="salva">Salva</button>
  </p>
</div>
<script>
$( document ).ready( function(){

  function chiudi() {
    $( '.edit textarea' ).hide();
    $( '.edit select' ).hide();
    $( '.edit input' ).hide();
    $( '.edit' ).hide(); 
  };

  $( 'td' ).on( 'dblclick', function() {
    var pos = $( this ).position(),
      x = pos.left, y = pos.top,
      idCampo = $( this ).attr( 'id' ),
      nomeCampo = idCampo.split( '-' )[0];

    $( '.edit' ).css( {'top': y + 'px', 'left': x + 'px'} );

    //  Mostra il giusto campo in funzione della richiesta di editing
    switch ( nomeCampo ) {
      case 'argomento': $( '.edit select' ).show(); break;
      case 'lingua':
        $( '.edit input' ).val( $( this ).text() );
        $( '.edit input' ).show();
      break;
      default:
        $( '.edit textarea' ).text( $( this ).text() );
        $( '.edit textarea' ).show();
    }
    $( '.edit' ).show();
    $( '#annulla' ).click(  function() {
       chiudi();
    });
    $( '#salva' ).click( function() {
       var contenuto = '';
       switch ( nomeCampo ) {
         case 'argomento': contenuto = $( '#argomento' ).val(); break;
         case 'lingua': contenuto = $( '#lingua' ).val(); break;
         default: contenuto = $( '#contenuto' ).val(); break;
       }
       $.ajax({
          url: 'setupSchedaSito.php',
          type: 'POST',
          dataType: 'json',
          data: {
            id: idCampo.split( '-' )[1],
            nomeCampo: nomeCampo,
            contenuto: contenuto
          },
          success: function( json ) {},
          complete: function(){
            chiudi();
          }
        });
      });
    });                                        
  });
</script>
Ovviamente la tabella è più grande, ho reso solo alcune righe ma la sostanza non cambia, anche se fosse nua sola fa la stessa cosa.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
soluzione :
togli le funzioni click dall'interno della funzione dbclick e rendi pubbliche le variabili che ti servono
spiegazione :
boh ! :crying: sono più pratico che tecnico
prova fatta :
HTML:
<table border="1">
    <tbody>
        <tr>
            <td>27</td>
            <td class="click" id="titolo_sito-28">TOKIO-GHOUL News Article<br>- GameSamba</td>
            <td class="click" id="didascalia-28" >TOKIO-GHOUL il nuovo<br>gioco che arriverà nel<br>2016</td>
            <td class="click" id="url-28" >http://gamesamba.net/announcem</td>
            <td class="click" id="lingua-28">en</td>
            <td class="click" id="argomento--28">Blog a tema giochi</td>
        </tr>
        <tr>
            <td>28</td>
            <td class="click" id="titolo_sito-29">The latest and funniest<br>webgames---All in<br>Game321.com</td>
            <td class="click" id="didascalia-29" >Dragons Spear is inspired<br>by western dragon<br>mythologies. It is a<br>MMOARPG that based on a<br>virtual world Dragaeri.</td>
            <td class="click" id="url-29" >http://spear.game321.com/</td>
            <td class="click" id="lingua-29">en</td>
            <td class="click" id="argomento--29">Siti di giochi in Flash &reg;</td>
        </tr>
    </tbody>
</table>
<div class="edit" style="display:none">
    <textarea style="display:none" id="contenuto"></textarea>
    <input type="text" id="lingua" value="" style="display:none">
    <select style="display:none" id="argomento">
        <option value="1">Siti di giochi in Flash &reg;</option>
        <option value="2">siti di giochi online</option>
        <option value="3">Siti di giochi offline</option>
        <option value="4">Siti di giochi per mobile</option>
        <option value="5">Forum ai siti di giochi</option>
        <option value="6">Siti di giochi Hot</option>
        <option value="7">Directory autori</option>
        <option value="8">Blog a tema giochi</option>
        <option value="9">Riviste tematiche sui giochi</option>
    </select>
    <p class="button-group">
        <button type="button" class="btn btn-default" id="annulla">Annulla</button>
        <button type="button" class="btn btn-danger" id="salva">Salva</button>
    </p>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        var idCampo, nomeCampo;

        $('td').on('dblclick', function () {
            var pos = $(this).position(),
                    x = pos.left, y = pos.top;
            idCampo = $(this).attr('id');
            nomeCampo = idCampo.split('-')[0];

            $('.edit').css({'top': y + 'px', 'left': x + 'px'});

            //  Mostra il giusto campo in funzione della richiesta di editing
            switch (nomeCampo) {
                case 'argomento':
                    $('.edit select').show();
                    break;
                case 'lingua':
                    $('.edit input').val($(this).text());
                    $('.edit input').show();
                    break;
                default:
                    $('.edit textarea').text($(this).text());
                    $('.edit textarea').show();
            }
            $('.edit').show();

        });
        $('#annulla').click(function () {
            chiudi();
        });
        $('#salva').click(function () {
            alert("click");
            var contenuto = '';
            switch (nomeCampo) {
                case 'argomento':
                    contenuto = $('#argomento').val();
                    break;
                case 'lingua':
                    contenuto = $('#lingua').val();
                    break;
                default:
                    contenuto = $('#contenuto').val();
                    break;
            }
            $.ajax({
                url: 'setupSchedaSito.php',
                type: 'POST',
                data: {
                    id: idCampo.split('-')[1],
                    nomeCampo: nomeCampo,
                    contenuto: contenuto
                },
                success: function (json) {
                    $("#response").html(json);
                },
                complete: function () {

                    chiudi();
                }
            });
        });
    });
    function chiudi() {
        $('.edit textarea').hide();
        $('.edit select').hide();
        $('.edit input').hide();
        $('.edit').hide();
    }
    ;
</script>
<div id="response"></div>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
provando questo esempio
HTML:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $("#doppioclick").dblclick(function () {
            $("#click").click(function () {
                $("#test").append("<p>cliccato</p>");
            });
        });
    });
</script>
<input type="button" value="doppioclick" id="doppioclick"/>
<input type="button" value="click" id="click"/>
<div id="test"></div>
deduco che ad ogni evento dblclick viene assegnato all'elemento $("#click") un nuovo evento click, di conseguenza gli eventi incrementano di volta in volta. e quindi con un click in realtà ne lanci di più. Vabbe non mi sono capito nemmeno io.
 
Discussioni simili
Autore Titolo Forum Risposte Data
R Aggiornare record mysql con Ajax, jQuery e php Ajax 2
P Funzione jQuery Ajax invio file a php jQuery 1
L Problema jQuery validation AJAX (PHP 7) PHP 6
M leggere con jquery/ajax in una function javascript record di database sql server Javascript 0
A [Javascript] Ajax, Jquery e PHP Javascript 1
X Problema con jquery e ajax jQuery 2
localhost.nicola [AJAX-JQUERY] Ritornare true||false in base alla risposta ricevuta da success: di $.ajax() Ajax 1
F Jquery Ajax Datatable jQuery 1
S Eseguire funzione jquery all'interno della risposta ajax Ajax 0
E Richiamare funzione Jquery dopo aggiornamento parziale di pagina tramite ajax jQuery 0
C autologin jquery ajax Javascript 0
W Jquery ajax non funziona jQuery 1
G Invio caratteri speciali tramite jquery/ajax Javascript 1
G Invio caratteri speciali tramite jquery/ajax Ajax 1
B jQuery mobile e più form ajax jQuery 1
P php jquery ajax per modificare valore in un databe Ajax 1
G jquery ajax e variabili Ajax 0
felino [Ajax/Jquery] Z-index su loading-image Ajax 1
S multi request ajax con jquery jQuery 2
P [RISOLTO] Passaggio parametri in JQuery/Ajax Ajax 4
F gallery jquery-ajax Javascript 0
S Gallery con Tag foto: problema doppia chiamata ajax con JQuery jQuery 2
L verifica mail in db con jquery e ajax. Aiuto jQuery 9
Emix Problema nel concatenare jquery ed ajax nella stessa pagina Javascript 15
P Tornare indietro con Ajax Jquery Ajax 4
P Ajax jquery inserire un loader per motore di ricerca Ajax 2
P problema validazione form con ajax e jquery Ajax 0
T Problema con Jquery ajax jQuery 4
D Problema nella validazione di un form con JQUERY ed AjAX jQuery 4
G jQuery ajax complete jQuery 1
S problemi jquery ajax chiamare una pagina php Ajax 5
P problema jQuery/ajax Ajax 4
I Eseguire funz. Javascript caricata tramite la funzione Ajax di JQuery in onChange Javascript 0
I Eseguire funz. Javascript caricata tramite la funzione Ajax di JQuery in onChange Javascript 0
P [Ajax, python e JS] Redirect dopo una POST con jquery jQuery 0
L Da Jquery 1.4 a 1.5/1.6 funzione ajax jQuery 1
M Mappa interattiva con jquery ajax e php. jQuery 0
J How to create AJAX Notifications with jQuery jQuery 0
V [JQuery] Aiuto per funzione Ajax jQuery 0
lukeonweb Corso Corsi javascript, jquery e ajax Javascript 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
MarcoGrazia Validazione remota tramite plugin (jquery validate) Snippet Javascript 0
M Come selezionare e deselezionare radiobutton con jquery jQuery 1
M Come validare textarea con jquery jQuery 0
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
MarcoGrazia jquery validate() controllo checkbox jQuery 2
D assegnare risultato di una jquery ad una text Javascript 2
felino [JQuery] Append dopo ultimo ul li del primo livello jQuery 2
A php metodo post jquery non da mai errore jQuery 4

Discussioni simili