Rafraîchir un script après un événement

**Danwan** · 03/09/2016, 01h07

Bonjour à tous

J'ai mis en place un script permettant de me comptabiliser des balises li afin de me montrer combien il y a d'articles dans une liste.

Les li sont ajoutés automatiquement, sans refresh de la page.

Et donc sans refresh, le compteur ne réalise pas qu'il y'en a des nouveaux.

Comment faire pour qu'il se mette à jour automatiquement, sans refresh ?

Dans mon head :

Code :

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

1
2
3
4
5
6
<script type="text/javascript">
window.onload=function() {
   var count=document.getElementById('liste').getElementsByTagName('li').length;
   document.getElementById('nombre').firstChild.nodeValue=' '+count+' ';
 }
</script>

Dans mon body (je vous épargne mon script d'ajout de li) :

Code html :

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

1
2
3
4
5
6
7
<span id="nombre">&nbsp;</span>
 
<ul id="liste">
<li>123</li>
<li>456</li>
<li>789</li>
</ul>

Merci à tous pour votre aide

**NoSmoking** · 03/09/2016, 09h35

Bonjour,

Dans mon body (je vous épargne mon script d'ajout de li) :

il me semble que c'est justement dans cette fonction que tu devrais ajouter la mise à jour de la quantité de <li>.

**Danwan** · 03/09/2016, 10h52

Ha zut...

Alors le voici.

Dans mon body :

Code :

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

1
2
3
<ul id="id-liens">
      </ul>
      <br /><input class="note-id" id="id-titre" placeholder="Le lien"/><br /><button class="ajouter-id" id="ajouter">Ajouter</button>

Dans le .js :

Code :

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

1
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
$(document).ready(function() {
  var $ul = $('#id-liens');
  var $title = $('#id-titre');
 
  //get items from local storage
  if(localStorage.getItem('id-abo')){
   $ul.html(localStorage.getItem('id-abo'));
  }
 
  // add nwe item
  $('#ajouter').click(function () {
 
    //add new item
    $('#id-liens').append('<li><a href="'+$title.val()+'" target="_blank">'+$title.val()+'</a><i style="margin-right: 0px;" class="fa fa-check-circle supprbtn"></i></li>');
 
    //save changes to localstorage
    localStorage.setItem('id-abo', $ul.html());
 
    //reset form
    $title.val("");
    $("#ajouter-id").slideToggle("100");
 
  });
 
  //remove item
  $("#id-liens").on('click','.supprbtn',function() {
    $(this).parent().remove();
    //save changes to localstorage
    localStorage.setItem('id-abo', $ul.html());
  });
 
});

Le souhait étant donc que quand je clique sur le bouton Ajouter, sa raffraichit le compteur de balises li.

Merci beaucoup pour l'aide :-)

**mathieu** · 03/09/2016, 13h43

vous pouvez mettre le code de comptage dans une fonction. et ensuite vous appelez cette fonction au chargement de la page et à chaque modification du nombre de li

d'ailleurs, avec jQuery le comptage peut se faire plus rapidement comme ça :

Code :

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

1
2
3
function miseAJourCompte() {
    $("#nombre").html($("#liste li").length);
}

**NoSmoking** · 03/09/2016, 14h18

Je rajouterais que puisque tu utilises jQuery autant abandonner ce style de code

Code :

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

1
2
3
4
window.onload=function() {
   var count=document.getElementById('liste').getElementsByTagName('li').length;
   document.getElementById('nombre').firstChild.nodeValue=' '+count+' ';
 }

**Danwan** · 03/09/2016, 16h20

Houlà je suis débordé.

Donc dans mon Head je met :

Code :

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

1
2
3
4
5
<script type="text/javascript">
function miseAJourCompte() {
    $("#nombreid").html($("#id-liens li").length);
}
</script>

Mais dans mon Body, comment raffraichir mon :

Code :

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

<span id="nombreid" class="nombreids">&nbsp;</span>

Alors que dans ma balise ul :

Code :

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

1
2
      <ul id="id-liens">
      </ul>

des balises li s'ajoutes et se supprimes sans refresh...

Mais comment faire interagir tout ce petit monde ?

**mathieu** · 03/09/2016, 18h58

Envoyé par mathieu

ensuite vous appelez cette fonction au chargement de la page et à chaque modification du nombre de li

**Danwan** · 03/09/2016, 19h15

Donc je met ceci dans mon Head :

Code :

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

1
2
3
4
5
<script type="text/javascript">
function miseAJourCompte() {
    $("#nombreid").html($("#id-liens li").length);
}
</script>

c'est appelé à l'ouverture et j'intègre ceci qui va appeler aussi le function :

Code :

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

<button id="ajouter" onclick"miseAJourCompte()">Ajouter</button>

mais :

Code :

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

<span id="nombreid">&nbsp;</span>

n'affiche plus rien...

Je pense avoir tout bien fais ?

Merci de votre aide

**Danwan** · 04/09/2016, 01h38

Bon après des heures de recherches, je n'arrive pas à mieux...

Code :

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

1
2
3
4
5
$(function miseAJourCompte() {
    $('#ajouter').click(function() {
        $("#nombreid").html($("ul#id-liens li").length);
    });
});

Mais le compteur n'est pas autonome et a toujours un li de retard (et n'affiche pas le zéro).

J'arrive pas à faire mieux

**Toufik83** · 04/09/2016, 12h07

Code html :

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

1
2
3
4
5
6
7
8
9
 
<span id="nombre">&nbsp;</span>
 <button>Ajouter Elements
 </button>
<ul id="liste">
<li>123</li>
<li>456</li>
<li>789</li>
</ul>

Code jQuery :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$(function(){
	var span=$("#nombre"),
             button=$("button"),
             ul=$("#liste");
 
       span.text($("#liste li").length);//initialisation au chargement.
 
       button.click(function(){
  	   ul.append("<li>"+$.now()+"</li>");
           span.text($("#liste li").length);//recalcule des li.
      });
 
});

**Danwan** · 04/09/2016, 20h53

en effet, j'étais loin de trouver cette écriture. Merci beaucoup Toufik83 pour l'avancement que tu injecte dans mon projet !

J'ai donc mis tout ca en place seulement à chaque clique sur le bouton ajouter, ca m'injecte quelque chose de type "1473014933453".

Après recherche, ce serait $.now qui s'injecte lors de l'appuie.

Y'a t'il besoin dans mon cas ?

De plus sur le coup, le compteur fait en effet son job, mais au refresh, le compteur est à zéro.

Merci beaucoup

**Toufik83** · 04/09/2016, 23h03

Envoyé par Danwan

Y'a t'il besoin dans mon cas ?

non, tu n'en a pas besoin, $.now() est une fonction qui renvoi la date sous forme de nombre.

Envoyé par Danwan

De plus sur le coup, le compteur fait en effet son job, mais au refresh, le compteur est à zéro.

normal que le compteur se remet à zéro après chaque chargement (perte de javascript).
si tu veux que cette valeur soit sauvegardé, alors ça doit être effectuer au niveau serveur (langage serveur), et pas au niveau client.
il existe la fonction Ajax.

**Danwan** · 05/09/2016, 08h04

Ok, j'ai pu contourner le problème en mettant un onLoad dans le body.

C'est parfait. Tout marche sauf une chose.

Le script va plus vite que la suppression, du coup, le compteur a toujours une unité de retard.

Est possible de réaliser un onClick puis intégrer un wait puis réaliser l'action, dans notre cas

Code :

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

$span.text($("ul#id-liens li").length);

Merci à tous

**Toufik83** · 05/09/2016, 14h36

tu peux nous montrer le code complet? (html+jquery)

**Danwan** · 05/09/2016, 20h24

Y'a rien à faire, je n'y arrive que partiellement.

L'affichage à l'arrivée fonctionnement parfaitement.

A l'appuie de Ajouter, nickel. A l'appuie du <i></i> (qui est le bouton de suppression du li dans le localstorage), rien à faire, il a toujours une unité de retard...

Merci infiniment pour l'aide.

Dans mon index.html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 
</head>
 
<body onLoad="compteID()">
<span id="nombreid" class="nombreids">&nbsp;</span>
<ul id="id-liens">
</ul>
<br /><input class="note-id" id="id-titre" placeholder="ID de l'abonné"/><br /><button class="ajouter-id" id="ajouter" onClick="compteID()">Ajouter</button>
<script src="js/index.js"></script>
</body>
</html>

Dans mon index.js :

Code :

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

1
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
 
// Compteur li
function compteID(){ 
	var $span=$("#nombreid"),
    $button=$("button#ajouter"),
	$buttoni=$("i#supprbtni"),
    $ul=$("ul#id-liens");
 
       $span.html($("ul#id-liens li").length);
 
       $buttoni.click(function(){
       $span.text($("ul#id-liens li").length);
      });
 
       $button.click(function(){
       $span.text($("ul#id-liens li").length);
      });
}
 
// Balise li local storage
$(document).ready(function() {
 
  var $ul = $('#id-liens');
  var $title = $('#id-titre');
 
  //get items from local storage
  if(localStorage.getItem('id-abo')){
   $ul.html(localStorage.getItem('id-abo'));
  }
 
  // add nwe item
  $('#ajouter').click(function () {
 
    //add new item
    $('#id-liens').append('<li><a href="'+$title.val()+'" target="_blank">'+$title.val()+'</a><i id="supprbtni" onClick="compteID()" style="margin-right: 0px;" class="fa fa-check-circle supprbtn"></i></li>');
 
    //save changes to localstorage
    localStorage.setItem('id-abo', $ul.html());
 
    //reset form
    $title.val("");
    $("#ajouter-id").slideToggle("100");
 
  });
 
  //remove item
  $("#id-liens").on('click','.supprbtn',function() {
    $(this).parent().remove();
    //save changes to localstorage
    localStorage.setItem('id-abo', $ul.html());
  });
 
});

**Toufik83** · 06/09/2016, 01h15

1- pourquoi tu met des onLoad et onClick dans l'html si tu travailles avec jQuery? $(document).ready(function(){}) est bien l'équivalente de onLoad et $.click est l'équivalente de onClick.
2- a quoi sert ton script que tu met a la fin de body?
3- après chaque ajout, tu veux que le bouton ajouter se cache dans 100 millisecondes, cela fonctionne mais il va falloir le ré-afficher pour permettre l'ajout d'autres éléments.
4-

Code html :

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

<i id="supprbtni" style="margin-right: 0px;" class="fa fa-check-circle supprbtn">Supprimer</i>

attention ici, un ID DOIT ETRE UNIQUE dans une page web.(supprime les attributs id si que tu n'utilise que la classe .supprbtn)

Code html :

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

1
2
3
4
5
6
7
8
 
<span id="nombreid" class="nombreids">&nbsp;</span>
<ul id="id-liens">
</ul>
<br />
<input class="note-id" id="id-titre" placeholder="ID de l'abonné" />
<br />
<button class="ajouter-id" id="ajouter">Ajouter</button>

Code jQuery :

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

1
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
 
var $span = $("#nombreid"),
  $button = $("button#ajouter"),
  $buttoni = $("i#supprbtni"),
  $ul = $("ul#id-liens"),
  $title = $('#id-titre');
 
function compteID() {
  if (localStorage.getItem('id-abo')) { //get items from local storage
    $ul.html(localStorage.getItem('id-abo'));
    $span.html("<p>Storage dèja sauvegardé, Nbr li est :" + $("ul#id-liens li").length + "</p>");
  } else {// le storage n'existe pas encore
    $span.html("<p>Storage non sauvegardé, Nbr li est :" + $("ul#id-liens li").length + "</p>");
  }
 
}
 
$(document).ready(function() {
  compteID();// compter les li (avec ou sans localStorage)
  // add nwe item
  $button.click(function() {
    //add new item
    $ul.append('<li><a href="' + $title.val() + '" target="_blank">' + $title.val() + '</a><i  style="margin-right: 0px;" class="fa fa-check-circle supprbtn">Supprimer</i></li>');
    $span.text("Nbr li dans #id-liens APRES ajout est :" + $("ul#id-liens li").length);
    //save changes to localstorage
    localStorage.setItem('id-abo', $ul.html());
 
    //reset form
    $title.val("");
    $(this).slideToggle(100); // .ajouter-id et pas #ajouter-id, ou tu peux mettre tout simplement $(this), vu qu'on est sous la fonction $button.click().
                                        // mais il va falloir ré-afficher ce bouton pour permettre l'ajout des autres li...
  });
 
  //remove item
  $ul
    .on('click', '.supprbtn', function() {
      $(this).parents("li").remove();
      //save changes to localstorage
      localStorage.setItem('id-abo', $ul.html());
      compteID(); // on recompte les li après suppression.
    })
    .on("click", "li a", function() {
      alert($(this).attr("href"));
      return false; // empêcher le navigateur de suivre le href.
    });
 
});

**Danwan** · 06/09/2016, 23h22

Ca marche superbement bien.

Merci beaucoup Toufik83.

J'ai finalisé beaucoup de chose et rajouter des choses. Par contre, chose que je ne trouve pas c'est le moyen de Binder la touche Entrer pour reproduire l'action du bouton Ajouter.

Possible ?

J'ai essayé ceci, trouvé sur un site, mais ca ne marche pas :

Code :

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

1
2
3
4
5
$('input#id-titre').keydown(function(e) {
    if (e.keyCode == 13) {
        $('button#ajouter').submit();
    }
});

**Toufik83** · 06/09/2016, 23h54

le keydown se passe sur le document et pas sur l'input, dans ton cas ta fonction doit être définie comme ça :

Code jQuery :

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

1
2
3
4
5
6
 
$(document).keydown(function(e) {
    if (e.keyCode == 13) {
        console.log("appuie sur ENTRER");
        $('button#ajouter').submit();
    }

**Danwan** · 07/09/2016, 00h19

Rien. Je tape quelque chose dans l'input, appuie sur entrée. Pas de réaction.

J'avais une erreur, je crois avoir bien fais en rajouter une parenthèse et accolade.

J'ai :

Code :

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

1
2
3
4
5
$(document).keydown(function(e) {
    if (e.keyCode == 13) {
        $('button#ajouter').submit();
    }
})

**Toufik83** · 07/09/2016, 00h42

apparemment tu as mis la fonction dans $(document).ready(function(){...}), il faut la mettre comme ça :

Code jQuery :

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

1
2
3
4
5
6
7
$(document)
     .ready(function(){...})
     .keydown(function(e){
        if (e.keyCode == 13) {
           $('button#ajouter').submit();
        }
     });

Rafraîchir un script après un événement

jQuery

Discussions similaires

Partager

Partager