[UI Mobile] Requête ajax exécutée exponentiellement à chaque clic

Requête ajax exécutée exponentiellement à chaque clic

Bonjour,

J'ai un problème avec une requête AJAX qui s'exécute exponentiellement à chaque clic. Je m'explique :
Je réalise une application mobile (HTML5, javascript, jquery mobile) et un webservice soap en php/mysql.
J'ai une page d'accueil menu sous forme d'icones cliquables.
Je clique sur une icone qui ouvre une nouvelle page (recherche) avec une listview contenant un champ de recherche qui affiche la liste au bout de 3 caractères saisis.
La requête ajax est envoyée à chaque modification du champ recherche (cela évite d'affiche une liste trop grosse).
Jusque là cela fonctionne bien.
Le problème survient lorsque je clique sur le bouton back pour revenir à la page d'accueil et que je reclique sur l'icone pour revenir à la page recherche. La requête ajax est exécutée 2 fois (facile à vérifier il affiche 2 fois le même message dans une boite alert()).
Si je refais la même manipulation, clic bouton back puis clic sur icone pour revenir à la page recherche, la requête ajax est exécutée 3 fois et ainsi de suite.

Mes questions :
Est ce que quelqu'un a déjà eu ce problème et si oui existe -t-il une solution ?
J'ai essayé d'utiliser abort() pour arrêter la requête mais cela ne change rien.

Voici mon code :
index.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
 
<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
 
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" href="jquery/jquery.mobile.theme-1.4.5.min.css" />
        <link rel="stylesheet" href="jquery/jquery.mobile.structure-1.4.5.min.css" />
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Application</title>
    </head>
    <body>
 
    <div data-url="accueil" data-role="page" data-theme="b" id="accueil" class="my-page">
    <div data-role="header">
        <h1>Accueil </h1>
    </div><!-- /header -->
    <div role="main" class="ui-content">
 
            <div id="btn_ligne1" class="btn_menu">
                <a href="#listStruct" class="ui-btn ui-btn-inline"><img src="img/structure.png" >
                        <h2>Structure</h2>
                       </a>
                 <a href="#listPersonne" class="ui-btn ui-btn-inline"><img src="img/personne.png" >
                        <h2>Personne</h2>
                       </a>
            </div>
 
 
     </div><!-- /content -->
</div><!--page-->
 
 
<!-- Liste de toutes les structures  -->
<div id="listStruct" data-role="page" data-theme="b">
 
    <div data-role="header">
    <div class="ui-btn-left">
      <a href="#accueil" data-role="button" data-inline="true" data-icon="back" data-iconpos="notext" >Retour</a>
    </div>
    <h1>Liste des structures</h1>
    </div>
 
  <div data-role="content"> 
 
    <form class="ui-filterable">
        <input id="inputListStruct" data-type="search" placeholder="Tapez les 3 premières lettres de la structure...">
    </form>
    <ul id="structureList" data-role="listview" data-inset="true" data-filter="true"  data-input="#inputListStruct">
 
    </ul>
 
  </div>
 
</div>
 
<!-- Liste de toutes les personnes -->
<div id="listPersonne" data-role="page" data-theme="b">
 
    <div data-role="header">
    <div class="ui-btn-left">
      <a href="#" data-role="button" data-inline="true" data-icon="back" data-iconpos="notext" data-rel="back">Retour</a>
    </div>
    <h1>Liste des personnes</h1>
    </div>
 
  <div data-role="content"> 
 
    <form class="ui-filterable">
        <input id="list_personne" data-type="search" placeholder="Chercher un nom...">
    </form>
    <ul data-role="listview" data-inset="true" data-filter="true"  data-input="#list_personne">
 
    </ul>
 
  </div>
 
</div>
 
 
        <script src="jquery/jquery-1.11.3.min.js"></script>
        <script src="jquery/jquery.mobile-1.4.5.min.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
       <script src="js/btnligne1.js"></script>
    </body>
</html>

Code JavaScript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
//$("#btn_ligne1").on('click',"a", function(e){
$("#btn_ligne1 a").click(function(event){
	idBtn=$(this).attr("href");
 
	if(idBtn=="#listStruct") {
		if(!connectOffline){
             //clear le champ de recherche du filtre   
			$('input[data-type="search"]').val("");
			 $('#structureList li').remove();
			$( "#structureList" ).on( "listviewbeforefilter", function ( e, data ) {
 
				tokenMobile= localStorage.getItem("TokenKey");
				keyConnect= localStorage.getItem("KeyConnect");
 
				var $ul = $( this ),
					$input = $( data.input ),
					value = $input.val(),
					html = "";
				$ul.html( "" );
				if ( value && value.length > 2 ) {
					$ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
					$ul.listview( "refresh" );
						tmpAjax = $.ajax({url: urlWebservice,
	                    type: 'post', 
	                    data: {tokenMobile: tokenMobile, keyConnect:keyConnect, methode:'getListeStructure', etat:'filter', saisie: $input.val()},                                
	                    async: 'true',
	                    dataType: 'json',
	                    beforeSend: function() {
	                        // This callback function will trigger before data is sent
	                        $.mobile.loading('show', {theme:"a", text:"Veuillez patienter...", textonly:true, textVisible: true}); // This will show ajax spinner
	                    },
	                   complete: function() {
	                        // This callback function will trigger on data sent/received complete
	                        $.mobile.loading('hide'); // This will hide ajax spinner
 
 
	                    },
	                    success: function (result) {
	                       if(result.status) {
 
	                          if(result.resultat){  
 
	                           	afficheListeStructure(result.resultat);
	                            localStorage.setItem('TokenKey', result.tokenmsg);                           
 
 
	                            }
	                            else{
 
 
	                            	alert("Renouvellement de votre autorisation d'accès !");
	                              //Initialisation du token dans le localstorage en effaçant	                                                      
	                              localStorage.removeItem("TokenKey");
	                              tokenMobile= localStorage.getItem("TokenKey");
	                              keyConnect= localStorage.getItem("KeyConnect");
 
	                            }
	                        } else
	                           {
	                           	//initialisation des clés d autorisation à l'application
                                        localStorage.removeItem("TokenKey");
                                        localStorage.removeItem("KeyConnect");
                                        creerNewTokenFirst(urlWebservice, tokenMobile, keyConnect); 
	                            alert('4- Echec de connexion avec ce login/mot de passe!');
	                            }
	                    },
	                    error: function (request,error) {
	                                    // This callback function will trigger on unsuccessful action      
	                                  alert("4- Une erreur de Réseau s'est produite, merci de ré-essayer ! ");        
 
	                    }
 
	                }); 
 
					$('#boutonRet a').click(function(event) {  alert('arreter tmpAjax');
 
	tmpAjax.abort();
 
 
 });
 
				}
			});
 
	        }else{
	              alert("afficher données locale bdd direct");
 
 
	        }
 
 
	}
 
 
 
});
 
 
/*$('#boutonRet a').click(function() {  alert('arreter tmpAjax');
 
	tmpAjax.abort();
 });*/

Merci d'avance pour votre aide. :D

Bonjour,
peux tu mettre une page en ligne pour mieux appréhender le problème ?

Bonjour,

Je ne peux pas mettre en ligne car il s'agit d'une application mobile et pour des raisons de confidentialité des données.
Mais j'ai réussi à corriger le problème en rajoutant :
Code:

1 2 3 $("#btn_ligne1 a").click(function(event){ $("#btn_ligne1 a").off("click");
Ce qui n'empêche pas le clic sur le bouton mais neutralise le lancement d'une nouvelle requête Ajax, en plus de celle déjà lancée.

Merci qd même pour votre réponse.

l'élément qui prend le click est une balise a => il faut inhiber le href
Code:

1 2 3 4 $("#btn_ligne1 a").click(function(e){ e.preventDefault() .../...

si je mets un e.preventDefault() cela bloque mon clic et dans mon cas le clic doit toujours être actif sans que l'ajax soit relancé. D'où mon utilisation du .off.

merci pour votre proposition de solution.