11548 sujets

JavaScript, DOM et API Web HTML5

Jquery - everyTime / load

Salut,

J'ai une page dans laquelle je veux requêter régulierement mon serveur
sans rechargement de la page, et faire apparaitre des messages à l'utilisateur si il y en a.
L'utilisateur pourra alors ignorer la notification, et elle ne lui sera plus jamais affichée.
Donc une page html avec une requête ajax lancée toutes les 10 secondes
faisant appel à une page php qui demande à MySQL si il y a des notifications à afficher.

Voila mon HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <script language="JavaScript" type="text/javascript" src="../javascript/jquery-1.3.2.min.js"></script>
  <script language="JavaScript" type="text/javascript" src="../javascript/jquery.timers-1.1.3.js"></script>
  <script language="JavaScript" type="text/javascript">
$(document).everyTime(5000, function() {
  $('#notifier').load('test.php');
});
function interact() {
  $(this).removeClass('interact');
  if ($(this).hasClass('ignore')) {
    $('#notifier').load('test.php', {'action': 'ignore', 'id': $(this).parent().attr('id')});
  }
}
$('.interact').click(interact());
  </script>
</head>
<body>
<div id="notifier"></div>
</body>


et voila mon php
<?php
ini_set('include_path', '/home/httpd/html/default/v8/mod_report/include');
include('mini_db.php');

if ($action) {
  echo ('<pre>');
  print_r($_REQUEST);
  echo ('</pre>');
  die();
}

$v8 = new mini_db();
$sql = 'SELECT
  id
, message
FROM notification
;';
$v8->query($sql);

foreach ($v8->arr_result as $row) { // <- ca c'est l'array avec le dataset renvoyé par MySQL
?>
  <div id="<?php echo($row['id']) ?>">
    <span class="interact ignore">ignore</span>
  | <?php echo ($row['message']) ?>
  </div>
<?php
}

?>

Mon javascript n'observe pas la classe 'interact'
M'y prends-je de la bonne manière ?
Modifié par Glide (15 Sep 2009 - 17:13)
Salut,

Pourquoi avoir mis 
$('.interact').click(interact());


au lieu de :
$('.interact.ignore').click(interact());


C'est peut être parce qu'il n'arrive pas à trouer ton élément que l'action ne se fait pas. Je dirais même de mettre un id à ton élément en plus de la classe que se soit gérable plus facilement Smiley cligne
C'est pasque j'ai simplifié. J'ai 2 boutons en réalité. "ignore" et "accept".
Bon j'ai changé le JS

$(document).everyTime(5000, function() {
  $('#notifier').load('test.php');
});
$('.accept').click(function () {
  $(this).removeClass('accept');
  $('#notifier').load('test.php', {'action': 'accept', 'id': $(this).parent().attr('id')});
});
$('.ignore').click(function () {
  $(this).removeClass('ignore');
    $('#notifier').load('test.php', {'action': 'ignore', 'id': $(this).parent().attr('id')});
});

Voila le HTML renvoyé par ma requete Ajax

<div id="notifier">
<!-- HTML injecté - Start -->
  <div id="24">
    <span class="accept">accept</span>
  | <span class="ignore">ignore</span>
  | Message 1
  </div>
  <div id="25">
    <span class="accept">accept</span>
  | <span class="ignore">ignore</span>
  | Message 2
  </div>
<!-- HTML injecté - End -->
</div>


Comme ca c'est plus simple.
Mais ca ne surveille aucun des 2 boutons.
Je pense que c'est parce qu'ils sont générés après la déclaration de surveillance.
(comme c'est ajax qui crée les 2 boutons avec chaque message)
Mais comment faire pour qu'ils le soient toujours ?
Modifié par Glide (15 Sep 2009 - 17:47)
Bonjour,
et comme ça :
En déclarant les évenements dans le callback de la pétition ajax :


jQuery(function(){
$(document).everyTime(5000, function() { 
  $('#notifier').load('test.php',function(){
    interact();
  }); 
}); 
})

function interact(){
  $('.accept').click(function () { 
    $(this).removeClass('accept'); 
    $('#notifier').load('test.php', {'action': 'accept', 'id': $(this).parent().attr('id')}); 
  }); 
  $('.ignore').click(function () { 
    $(this).removeClass('ignore'); 
    $('#notifier').load('test.php', {'action': 'ignore', 'id': $(this).parent().attr('id')}); 
  }); 
}


ou si tu utilises jQuery >= 1.3, la méthode live rend l'évenement actif sur tous les éléments déclarés, même s'ils ne sont pas encore dans la page.


  $('.accept').live("click",function () { 
    $(this).removeClass('accept'); 
    $('#notifier').load('test.php', {'action': 'accept', 'id': $(this).parent().attr('id')}); 
  }); 
  $('.ignore').live("click", function () { 
    $(this).removeClass('ignore'); 
    $('#notifier').load('test.php', {'action': 'ignore', 'id': $(this).parent().attr('id')}); 
  });

Modifié par loicbcn (15 Sep 2009 - 18:37)
Cool ! Ca fonctionne avec live()
Je ne connaissais pas cette fonction et j'avais bien Jquery 1.3
Par contre j'avais déjà essayé en "En déclarant les évenements dans le callback de la pétition ajax"
Le everyTime() enlève les observation juste après les avoir déclarées.

Merci !!!!!
Sujet clos
Aller à