Discussion :

[SkyWalker]

Bonjour,

Ayant récemment découvert jQuery, j'essaye de convertir un vieux site pour avoir une version adaptée au appareils mobile.

Dans le site je charge à un moment les résultat d'une requête.
Je souhaite charger les résultats par paquets de 25.
A la fin de la liste, j'ai donc un lien permettant de charger les 25 résultats suivants.
Lors du clic sur ce lien, je souhaite ajouter les 25 résultats à la page en cours.
Pour cela j'utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#mondiv").append(html);

Le code de la page php est bien exécutée et insérer au bon endroit,
MAIS, les styles sont incorrects ( on dirait que la feuille de style n'est pas respectée)

J'ai également le même problème avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#mondiv").replaceWith(html);

Je ne comprend pas pourquoi les styles de la page chargée ne sont pas correctement appliqués ....

Merci d'avance pour votre aide

[fab256]

Tu utilise seulement jquery ou bien jquery Mobile?

[SkyWalker]

Tu utilise seulement jquery ou bien jquery Mobile?

J'utilise jQuery mobile

[fab256]

Tu doit faire appel a refresh si ton div est une listview:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#mondiv').listview('refresh');

[SkyWalker]

Tu doit faire appel a refresh si ton div est une listview:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#mondiv').listview('refresh');

Je n'arrive à rien de plus avec le refresh....
C'est surement parce que je ne l'appelle pas au bon moment ?
Je me permet de te glisser un extrait du code que j'utilise...

Je fais le chargement avec le code suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$(document).ready(function() {      
    $('#loadtestli').click(function() { 
      $.ajax({
        url: "load.php?lastid=10",
        success: function(html){
          if(html){
            $('#suiteli').replaceWith(html);
            $('#idul').listview('refresh');
         }
      });
      return false;
    });

le source html/php est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<ul id="idul" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true" data-role="listview">
    <?php
      // Affichage des 25 premiers résultats de la requête
      // <li> .....</li>
      // Lien vers la suite
        echo '<li id="suiteli" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c" 
                data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" 
                data-icon="arrow-r" data-iconpos="right" data-theme="c">
                <a id="loadtestli" data-role="button" data-theme="c" href="#">25 cocktails de plus</a>
            </li>';   
    ?>
</ul>

D'avance merci pour ton aide

[fab256]

Utilise .before pour inserer des elements avant le lien suite...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {      
    $('#loadtestli').click(function(e) {
      e.preventDefault();
      $.ajax({
        url: "load.php?lastid=10",
        success: function(html){
          if(html){
            $(this).before(html);
            $('#idul').listview('refresh');
         }
      });
      return false;
    });

en supposant que load.php génére des liste de type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<li>text1</li>
<li>text2</li>
<li>text3</li>
...

Ce n'est pas la peine d'ajouter les classes de JQM à chaque fois, juste data-role="listview" suffit. utilise data pour paramaterer ta liste comme dans la documentation officielle.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<ul id="idul" data-inset="true" data-role="listview">
    <li> text1</li>
    <li> text2</li>
....
    <li id="loadtestli"> Suite... </li>
</ul>