Cordova - Jquery Mobile - Rafraîchir une page après ajouts d'éléments
Bonjour à tous.
Je boss sur un application mobile, faite en Jquery Mobile, qui sera compiler via Cordova.
Je vous explique mon problème :
J'ai une page affichant une liste de "groupes" (j'utilise pour cela une "listview"), cette liste est remplie grâce à un appel AJAX sur un serveur relié à une BDD.
Depuis cette même page je peux accéder à un autre onglet permettant de créer un nouveau groupe. Quand je crée un nouveau groupe et que je valide (bouton de type submit), cela me ramène sur la page affichant les groupes via la liste.
MAIS le nouveau groupe récemment créé n'apparait pas dans la liste. En fait, l'appel ajax n'est même pas fait de nouveau, on dirait que cela revient juste à la page d'affichage mais sans REfaire toutes les instructions.
Si je rafraîchis la page à la main (actualiser sou mon navigateur), la page se recharge bien et ma liste est alors à jour.
Donc je dois mal faire quelque chose...
Voilà le code HTML de mes deux pages (c'est une application faite en OnePage) :
Et là le code JQUERY permettant les appels ajax et le changement de page :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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<!-- PAGE AFFICHAGE GROUPE --> <div data-role="page" id="pageAffichageGroupe" data-dom-cache="true" data-theme="a"> <div data-role="header" data-theme="b"> <div data-role="navbar" data-theme="a"> <ul> <li><a href="#pageAffichageGroupe" data-icon="home" class="ui-btn-active ui-state-persist">Home</a></li> <li><a href="#pageCreerGroupe" data-icon="plus" data-transition="slidefade">Nouveau Groupe</a></li> </ul> </div> </div> <div data-role="content"> <h2>Page Affichage des groupes</h2> <h3 id="user"></h3> <ul data-role="listview" id="listGroup" data-autodividers="true" data-filter="true" data-inset="true"></ul> </div> <div data-role="footer" data-theme="b" data-position="fixed" class="center-footer"> <div>Pied de Page</div> </div> </div> <!-- PAGE CREER GROUPE --> <div data-role="page" id="pageCreerGroupe" data-theme="a"> <div data-role="header" data-theme="b"> <div data-role="navbar" data-theme="a"> <ul> <li><a href="#pageAffichageGroupe" data-icon="home" data-transition="slide" data-direction="reverse">Home</a></li> <li><a href="#pageCreerGroupe" data-icon="plus" class="ui-btn-active ui-state-persist">Nouveau Groupe</a></li> </ul> </div> </div> <div data-role="content"> <h3>Page Création de Groupe</h3> <form data-ajax="false"> <fieldset> <div class="ui-field-contain"> <label for="newGroup">Enter a Group Name :</label> <input type="text" data-clear-btn="true" value="" name="newGroup" id="newGroup"/> </div> <div class="ui-field-contain"> <label for="descGroupe">Description du Groupe :</label> <textarea name="textarea" id="descGroup"></textarea> </div> <input type="button" name="submit" id="submitNewGroup" value="Submit" data-theme="b"> </fieldset> </form> </div> <div data-role="footer" data-theme="b" data-position="fixed" class="center-footer"> <div>Pied de Page</div> </div> </div>
J'ai beaucoup recherché sur le NET mais avec mon anglais bas niveau j'ai du mal à comprendre les réponses.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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// PAGE AFFICHAGE GROUPE $(document).on('pagecreate', '#pageAffichageGroupe', function(){ $("#user").append('Welcome ' + $('#loginConnexion').val()); $.ajax({url: 'http://localhost/XXXXXXXX', data: {'action' : 'SelectGroupes' , 'MODAL' : sessionStorage['session_id']}, type: 'get', async: 'true', dataType: 'json', beforeSend: function() { $.mobile.loading('show', {theme:"a", text:"Please wait...", textonly:true, textVisible: true}); }, complete: function() { $.mobile.loading('hide'); }, success: function (result) { if(result.success) { if(result.groupes.length === 0) { alert("Pas de groupes"); } else { for(i=0; i<result.groupes.length; i++) { nomGroupe = result.groupes[i].nom; $('#listGroup').append('<li><a href=\"#pageGallery\" data-transition=\"flip\">'+result.groupes[i].nom+'</a></li>'); } $('#listGroup').listview('refresh'); } } else { alert('Erreur lors de l\'affichage des groupes ' + result.status); } }, error: function (request,error) { alert('error SelectGroupe : ' + error + ' request SelectGroupe : ' + request); } }); }); // PAGE CREATION GROUPE $(document).on('pagecreate', '#pageCreerGroupe', function(){ $(document).on('tap', '#submitNewGroup', function() { if($('#newGroup').val().length > 0 && $('#descGroup').val().length > 0){ $.ajax({url: 'http://localhost/XXXXXXXX', data: {'action' : 'CreationGroupe', 'nom': $('#newGroup').val(), 'description':$('#descGroup').val(), 'MODAL' : sessionStorage['session_id']}, type: 'get', async: 'true', dataType: 'json', beforeSend: function() { // This callback function will trigger before data is sent $.mobile.loading('show', {theme:"a", text:"Please wait...", 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.success === "success") { alert("Groupe créé : "+result.success); $.mobile.pageContainer.pagecontainer('change', $('#pageAffichageGroupe'), { transition: 'slidefade', reload : true }); } else { alert('Erreur lors de la creation du groupe : ' + result.status); } }, error: function (request,error) { // si la requête a échouché alert('error Connexion : ' + error + ' request Connexion : ' + request); } }); } else { alert("Veuillez remplir tous les champs s'il vous plait !"); } }); });
Merci à ceux qui pourront m'aider.
Cordialement
Répondre avec citation
Partager