Affichage d'une date après un load()

Sujet résolu

5 octobre 2023 à 12:12:44

Bonjour,

Voilà, j'ai un petit soucis, je charge dynamiquement des pages (pour ne pas recharger la page à chaque fois) et je n'arrive pas à afficher mon âge dans ma balise <span />:

Mon index.html :

<!DOCTYPE html>
<html soucis

<head>
  <meta charset="utf-8">
  <title>CV Nicolas DEROO</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="shortcut icon" href="">
</head>

<body>

  <div role="navigation" id="navig" class="nav-collapse">
    <ul>
      <li class="categorie active" id="accueil"><a href="#">CV en bref</a></li>
      <li class="categorie" id="experience"><a href="#">Expériences</a></li>
      <li class="categorie" id="formation"><a href="#">Formation</a></li>
    </ul>
  </div>

  <div role="main" class="main">
    <div id="contenu"></div>
  </div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/navigation.js"></script>

</body>

</html>

Mon accueil.html qui est chargé :

<div id="accueil">
	<div id="identite">	
		<div>
			<h1>Nicolas Deroo</h1>
			294, rue Victor Hugo<br />
			59430 Saint Pol sur Mer<br />
			<img class="contact_img" src="/cv/img/tel.ico" /><a class="contact" href="tel:00 00 00 00 00 " >00 00 00 00 00</a>
			<img class="contact_img" src="/cv/img/mail.ico" /><a class="contact" href="mailto:monmail@gmail.com">monmail@gmail.com</a><br/>
			Né le 17/03/1987 - <span id="age"></span> ans
		</div>
<!-- ..... -->

Et mon code jQuery, qui ne rempliit pas ma balise <span /> avec mon $('#age').text(getAge()) :

$(function () {
  $('#contenu').load('accueil.html')

  // Gestion du clic
  $(".categorie").click(function () {

    // On ne met plus en relief la categorie courante
    $('li').each(function () {
      $(this).removeClass('active')
    })

    // On met en relief la categorie cliquée
    $(this).addClass('active')
    // On change le .html voulu grave à son id
    $('#contenu').load($(this).attr('id') + '.html')

  })

  $('#age').text(getAge())

})

function getAge() {
  birthDay = new Date(87, 2, 17)
  const diff = Date.now() - birthDay.getTime();
  const age = new Date(diff); 
  return Math.abs(age.getUTCFullYear() - 1970);
}

Quelqu'un aurait-il une idée pour pallier à ce problème ?

Merci d'avance et bonne journée

-
Edité par Ninicocolalas 5 octobre 2023 à 12:37:47

FredLass

5 octobre 2023 à 14:41:40

Salut,

Ouvre le debugger (F12) et mets un point d'arret à la première ligne de getAge déjà.

Ninicocolalas

5 octobre 2023 à 15:03:23

Merci pour ta réponse.

La fonction ne pose pas de problème :

Lors du premier chargement, je récupère bien mon âge avec l'ajout de :

// Ajouter l'age au span
$(window).on("load", function () {
  $('#age').text(getAge())
});

En revanche, lorsque je reviens sur la page d'accueil, l'âge disparaît... :euh:

Mon code jQuery :

$(function () {
  $('#contenu').load('accueil.html')

  // Gestion du clic
  $(".categorie").click(function () {

    // On ne met plus en relief la categorie courante
    $('li').each(function () {
      $(this).removeClass('active')
    })

    // On met en relief la categorie cliquée
    $(this).addClass('active')
    // On change le .html voulu grave à son id
    $('#contenu').load($(this).attr('id') + '.html')

    $('#age').text(getAge())

  })

})

// Ajouter l'age au span
$(window).on("load", function () {
  $('#age').text(getAge())
});

// Récupèrer l'age
function getAge() {
  birthDay = new Date(87, 2, 17)
  const diff = Date.now() - birthDay.getTime();
  const age = new Date(diff);
  const effectiveAge = Math.abs(age.getUTCFullYear() - 1970)
  return effectiveAge;
}

Merci encore

-
Edité par Ninicocolalas 5 octobre 2023 à 15:09:48

FredLass

5 octobre 2023 à 17:47:07

Pas sûr que tu passes dans ton getAge lorsque tu cliques, si ? Tu passes dans le point d'arrêt quand tu cliques sur la catégorie ?

Ninicocolalas

5 octobre 2023 à 22:13:43

Effectivement, je n'y passe pas et je ne vois pas vraiment pourquoi... Je creuse....

EDIT :

Bonjour,

Je m'étais trompé de point d'arrêt, je passe bien par getAge(). L'âge apparaît seulement au chargement de la page, grâce à la fonction que j'ai ajoutée :

$(window).on('load', function () {
  $('#age').text(getAge())
})

La capture d'écran de l'arrêt, lorsque je clique sur une section :

Je ne comprends pas ce comportement.

EDIT 2 :

Lorsque j'ajoute un alert() après $('#age').text(age), je vois bien l'âge qui apparaît puis disparaît ensuite. J'ai essayé avec un event.stopPropagation() mais cela ne change rien :euh:

EDIT 3 :

J'y suis parvenu avec la méthode suivante :

$('#contenu').load($(this).attr('id') + '.html', function() {
  $('#age').text(getAge())
})

-
Edité par Ninicocolalas 6 octobre 2023 à 11:28:46