CSS avec JQuery Mobile

Version imprimable

08/07/2012, 10h02
SkyWalker

CSS avec JQuery Mobile

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:

$("#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:

$("#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
08/07/2012, 11h23
fab256

Tu utilise seulement jquery ou bien jquery Mobile?
08/07/2012, 12h29
SkyWalker

Citation:

Envoyé par fab256

Tu utilise seulement jquery ou bien jquery Mobile?

J'utilise jQuery mobile
08/07/2012, 13h20
fab256

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

Code:

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

Citation:

Envoyé par fab256

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

Code:

$('#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:

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:

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

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

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:

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:

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>