Programmation

Charger un texte avec jQuery

,

Dans cet article, vous trouverez un petit script qui peut être adapté à volonté pour modifier un texte dans un bloc d’une page web en seul seul clique. Ce n’est pas de l’Ajax avec jQuery, mais ça s’en rapproche.

html jquery en un clique Pour que cela fonctionne , il faut utiliser jQuery. Si jQuery n'est pas présent sur la page, il faut ajouter le petit lein suivant : 
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

1. Démonstration du script jQuery

En cliquant sur les liens, le texte doit changer dans le cadre rouge :

Ceci et le texte initial
Modifier le texte -- Modifier avec un autre texte

2. Description des bouts de code (snippets)

  • Tout d’abord, la fonction javascript à placer au début :
1
2
3
4
5
<script type="text/javascript">
function changerTexte(texte) {
$('.cadre_texte').html(texte);
}
</script>

  • Ensuite le code HTML, qui définit le cadre rouge :

    1
    <div class="cadre_texte" style="width: 400px; height: 30px; border: 1px solid #dd0909; text-align: center; font-size: 24px; padding: 20px;">Ceci et le texte initial</div>

  • Enfin, les liens à cliquer faisant appel à la fonction changerTexte pour modifier le contenu du cadre :

    1
    2
    3
    <a href="javascript:changerTexte('Ceci est le texte modifié');"> Modifier le texte </a>
    <a href="javascript:changerTexte('Ceci est un autre texte modifié');"> 
    Modifier avec un autre texte </a>

Voilà c’est tout pour le moment.

N’hésitez pas à partager…

Partager