2012-11-05 3 views
3

Un peu compliqué, mais mal faire de mon mieux pour expliquer ma question.jQuery mise à jour de plusieurs #divs, une requête mysql

J'ai un fichier principal, dashboard.html. J'ai une fonction jQuery pour charger la mysql_query toutes les 15sec pour obtenir les 15 variables dont j'ai besoin. (Ceci est une webapp financière/commerciale ... les agents de vente veulent des mises à jour en temps quasi réel des ventes, des commandes, $ gagné..etc) qui sont affichées dans un #div avec plusieurs listitems contenues à l'intérieur. Aucun problème avec cette approche que toutes les 15sec, requête, puis div entier est mis à jour en même temps. Pour cette raison, je n'ai pas attaché un effet Jquery (à savoir fadeIn/fadeOut), car alors la div entière est en train de disparaître. Pas l'effet visuel que je voudrais, mais tel qu'il est, ça fonctionne.

Mon objectif: Être capable de faire la requête mysql toutes les 15 secondes. Prenez les variables (que je suis déjà en train de faire.) Mais maintenant, je voudrais pouvoir mettre à jour UNIQUEMENT l'élément ListItem qui a changé et attacher l'effet de fondu à cet élément, pas tout le #div dans son ensemble. Ce que j'essaie d'éviter, c'est de séparer la requête de 15 requêtes distinctes, car cela n'est évidemment pas efficace

J'espère que cela a du sens pour tout le monde. .. J'ai besoin de comprendre quelle approche j'ai besoin d'aller pour développer le code correct Merci à tous pour votre aide

EDIT: J'ajoute un peu de code pour aider à clarifier où je suis: dashboard.html

var auto_refresh = setInterval(function(){ 
$('#order_jq').load('stats_count.php') 
}, 15000); // refresh every 15 seconds 

puis dans le corps:

<div class="span8"> 
<div id="order_jq" class="centerContent"> 
Patiently loading stats ... 
</div><!-- End id="ortder_jq --> 
</div><!-- End .span8 --> 

stats_count.php se compose de (dépouillée pour plus de clarté)

<?php 
require "database/connect2.php"; 
$result = mysql_query("SELECT .... NORMAL QUERY...NOTHING FANCY HERE") 
while ($row = mysql_fetch_array($result)) 
{$orders = number_format($row['ordercount']); 
$annual_order = number_format($row['annual_order']); 
} 

et enfin contenue dans stats_count.php I inclure également les éléments de la liste:

<ul class="bigBtnIcon"> 
    <li> 
     <a href="#"> 
     <span class="icon entypo-icon-phone"></span> 
     <span class="txt">Orders</span> 
     <span class="notification"><?php echo $orders?></span> 
     </a> 
    </li> 
     <li> 
     <a href="#"> 
      <span class="icon brocco-icon-mic"></span> 
      <span class="txt">Auburn</span> 
      <span class="notification blue"><?php echo $annual_order ?></span> 
     </a> 
     </li> 
</ul> 

-D

Répondre

1

Si vous avez plusieurs divs à jour, vous devez les sélectionner avec leur classe « .class » pas id « #id » ..

Pour mysql_query créer toutes les 15 secondes, vous avez besoin pour faire setInterval (fonction(), 15000) où la fonction doit faire une requête ajax à une page où faire cette requête ..

Je peux vous conseiller d'utiliser jQuery Ajax pour ces requêtes ..

+0

J'ai donc la requête de mettre à jour l'ensemble du #div sans problèmes, toutes les 15sec. Cela fonctionne très bien. Donc, la classe. Je suppose que maintenant je suis confus. Comment associer la fonction ajax de mise à jour qui charge la chaîne de requête count.php au #div approprié dans dahsboard.html? – DakotasKustoms

0

Sans connaître plus de détails sur ce format de vos données est retourné dans sa difficile d'entrer dans les détails, mais l'approche générale serait:

  1. stocker les valeurs de courant dans un objet,
  2. créer un nouvel objet avec vos valeurs entrantes
  3. cycle de
  4. dans les propriétés de la obect comparer les valeurs entrantes aux valeurs existantes
  5. mise à jour des panneaux individuels (par classes ou id plus spécifiques de)
  6. tour les valeurs entrantes objet en valeurs actuelles objet dans preperation pour la prochaine requête SQL
0

Si je comprends bien, cela pourrait se faire comme ceci: - tous vos listitems doivent avoir un attribut de classe disons « list_items » . - après avoir obtenu des données avec Jquery vous pouvez faire un jquery.each() sur les list_items, de cette façon vous pouvez vérifier si la valeur de cet élément de la liste == la nouvelle valeur sinon vous mettez à jour votre élément de liste. J'espère que cela répond un peu à votre question.

+0

ok. Ill jeter un oeil à la fonction .each. Je n'étais pas familier avec ça jusqu'à maintenant. Mais le concept semble bon! – DakotasKustoms

Questions connexes