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

Version imprimable

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:

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:

1 2 3 4 5 6 7 <span id="nombre"> </span> <ul id="liste"> <li>123</li> <li>456</li> <li>789</li> </ul>
Merci à tous pour votre aide

03/09/2016, 09h35
NoSmoking

Bonjour,

Citation:

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>.

Ha zut...

Alors le voici.

Dans mon body :

Code:

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:

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 :-)

03/09/2016, 13h43
mathieu
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:

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

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

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

03/09/2016, 16h20
Danwan
Houlà je suis débordé.

Donc dans mon Head je met :
Code:

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:

<span id="nombreid" class="nombreids"> </span>

Alors que dans ma balise ul :
Code:

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 ?
03/09/2016, 18h58
mathieu

Citation:

Envoyé par mathieu

ensuite vous appelez cette fonction au chargement de la page et à chaque modification du nombre de li
03/09/2016, 19h15
Danwan
Donc je met ceci dans mon Head :
Code:

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:

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

mais :

Code:

<span id="nombreid"> </span>

n'affiche plus rien...

Je pense avoir tout bien fais ?

Merci de votre aide
04/09/2016, 01h38
Danwan
Bon après des heures de recherches, je n'arrive pas à mieux...
Code:

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 :roll:

Code:

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:

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.
      });
 
});

04/09/2016, 20h53
Danwan

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
04/09/2016, 23h03
Toufik83

Citation:

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.

Citation:

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.
05/09/2016, 08h04
Danwan

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:

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

Merci à tous :P
05/09/2016, 14h36
Toufik83

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

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:

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:

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());
  });
 
});

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:

<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:

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:

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.
    });
 
});

06/09/2016, 23h22
Danwan
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:

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

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

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

07/09/2016, 00h19
Danwan
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:

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

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

Code:

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

07/09/2016, 07h46
Danwan

Je copie colle seulement sans modifier ?

Car une fois copié collé, plus rien ne fonctionne :?

Merci encore
07/09/2016, 09h34
SpaceFrog

Code:

$('button#ajouter')

:koi:

Un id est unique ...

Code:

$('#ajouter')

suffit amplement !

tu garde ton code comme il est, t'ajoute juste :

Code:

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

après LA FIN de $(document).ready(), pour avoir finalement un truc du genre :

Code:

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

07/09/2016, 18h52
Danwan

Je suis désolé Toufik83, j'ai honte.... mais je comprends pas :oops:

Quoi mettre dans "ton ancien code...", si je n'ai pas de code initial ?

Je cherche justement à binder la touche entre sur le bouton ajouter quand le curseur clignote sur l'input...

Encore désolé et merci

ben après que tu nous a montré ton code complet, nous l'avons modifié je pense :

Code:

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
 
var $span = $("#nombreid"),
  $button = $("#ajouter"),
  $buttoni = $("#supprbtni"),
  $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 :" + $("#id-liens li").length + "</p>");
  } else {// le storage n'existe pas encore
    $span.html("<p>Storage non sauvegardé, Nbr li est :" + $("#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.
    });
 
})/* le keydown doit etre ici */
.keydown(function(e){
   if(e.keyCode==13){
         alert("Entrer");
         $("#ajouter").submit();//cette ligne ne donnera rien, par-ce que le bouton est de type button et pas de type submit.
     }
});

08/09/2016, 19h43
Danwan

c'est parfait. tout fonctionne parfaitement....

c'est beau...

Merci Toufik83 !
08/09/2016, 22h36
Toufik83

de rien,n'hésite pas si tu as d'autres questions.