Introduction pour débutant à Jquery et Ajax


Je présente dans ce billet 3 courts morceaux de code qui permettront aux débutants de s’initier à la syntaxe de Jquery et Ajax. Les trois codes travail avec des événements simples comme des éléments de type « lien » ou des « formulaires » que je détail dans les commentaires. Le premier code déclenche un événement sur un clique d’un élément de type « lien ». Les deux autres codes utilise des formulaires, pour retranscrire un message dans une DIV sans rechargement de page, ou lors d’un submit de formulaire.

ajax jquery laintimes

Continuer la lecture de Introduction pour débutant à Jquery et Ajax

Validation de Formulaires Multiples avec Ajax et Jquery

Ajax et Jquery permettent de traiter une « section » de votre page Web sans recharger l’intégralité du contenu. Ainsi comme dans l’exemple qui va suivre vous pouvez valider individuellement des formulaires et afficher le résultat en conservant le reste du contenu de votre page Web.

Ce billet propose une source de code en PHP/Jquery/HTML permettant de valider un formulaire précis sur un page contenant 5, 10 ou le nombre de formulaire dont vous avez besoin sur une page Web.

Pour ce TP, vous devez posséder WAMP, et un éditeur de coloration syntaxique qui vous simplifiera la lecture de votre code. Vous pouvez consulter cet article qui vous fournira les liens de téléchargement vers différents logiciels « libre » : Meilleurs Logiciels libre sous licence GNU et GPL

resultat jquery laintimes

Continuer la lecture de Validation de Formulaires Multiples avec Ajax et Jquery

Manipuler des DIV en Javascript – Exercice Tutorial

Comme beaucoup en cours d’étude, j’ai ce matin mis sur pieds ce script qui permet de bien comprendre la manipulation de JavaScript (Ici à travers Jquery).

Le script est bien entendu non exhaustif il existe d’autres possibilités de script tout aussi Amusant.

Imaginons d’abord une paage HTML Simple avec ceux DIV ou sont contenue du Texte.

<html>
<head>
<title> Manipuler Javascript </title>
</head>

<body>

        <div id="container" value="container">
        container0
        </div>

<div id="container1" value="container1">
Container1
</div>

    </body>
    </html>

La manipulation nécessite l’appel à Jquery on insère donc le script depuis la Bibliothèque Google.

Le code générale nous donne donc ceci

<html>
<head>
<strong><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></strong>
</head>
<body>
        <div id="container" value="container">
        container0
        </div>
<div id="container1" value="container1">
Container1
</div>

    </body>
    </html>

La but de ce premier code va être de remplacer le contenue d’une DIV à l’affichage, le code ci dessous exécute parfaitement cette mission.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
        <div id="container" value="container">
        container0
        </div>
<div id="container1" value="container1">
Container1
</div>
<strong><script>
$("#container").html('Je change le contenue du DIV');
var moncontenu = $("#container").html();
window.alert(moncontenu);
document.write.(moncontenu);
</script></strong>
    </body>
    </html>

Ce sont ces deux lignes qui sont chargé du changement de contenue d’une DIV, le contenue de la DIV « container » qui est en actuellement container0 sera transformé en « xday ».

Amusez vous à changer la valeur ‘xday’ pour voir le résultat.

$("#container").html(‘xday’);
var moncontenu = $("#container").html();