Discussion :

[Danwan]

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]

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]

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]

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]

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]

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]

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

[Danwan]

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