Latest Thoughts 
→ @delphiki
Syndication
Screencast : Prévisualisation en Ajax à l'aide de jQuery
Je me suis essayé au screencast, et voilà ce que ça donne :
Ce n'était pas sur ce sujet que je voulais faire mon screencast au début, mais ça m'a fait un échauffement.
Vous m'excuserez les bafouillages et autres petits couacs, mais l'exercice n'est pas facile !
Si vous avez des questions, n'hésitez pas.
MAJ : une petite modification par rapport au screencast.
Au lieu d'utiliser :
$('#preview p').append(data);
Pour insérer les données dans le paragraphe, il est plus pratique d'utiliser ceci :
$('#preview p').html(data);
Qui évite d'avoir à "vider" le paragraphe à chaque appel de la fonction, donc d'utiliser cette ligne :
$('#preview p').empty();
Voici donc le script final :
$(function(){
// lorsque l'on clique sur Prévisualiser
$('#b_preview').click(function(){
var mess = $('#message').val();
$.post("preview.php",
{
message: mess
},
function(data){
$('#preview p').html(data);
}
);
});
// lorsque l'on clique sur Effacer
$('#clear_preview').click(function(){
$('#preview p').empty();
return false;
});
});
Commentaires :
# Kelthalas, le mercredi 13 mai 2009 à 23:32:21 # delphiki, le jeudi 14 mai 2009 à 07:13:04
Merci ^^
Pour les prochains, on verra, parce que ça prend du temps à faire ces choses là, surtout vu le nombre de fois où j'ai recommencé depuis le début parce que je me plantais :p
Pas mal,
Sa me permet en tous cas de découvrir un peu JQuery que j'ai négligé jusque là
Par contre j'ai une question :
Peut-on réaliser un système afin d'avoir plusieurs prévisualisation dans une même page ?
Peut-on récupérer pour plusieurs bouton de même ID mais ayant l'attribut "name" différent afin de savoir quelle prévisualisation l'utilisateur demande.
Donc récupérer l'attribut "name" lorsque l'on click sur un "button".
Cependant, peut-on utiliser le même ID ou doit-on utiliser un ID différent ?
Merci d'avance.
Salut,
Alors oui, c'est possible, par exemple :
var name = $('#lala').attr("name");
Sinon, donner le meme ID à différentes balises, ce n'est pas du tout une bonne idée, un ID est toujours unique.
Oui j'avoue ^_^
Je suis passé une une fonction JS tout à fait banale qui intègre les sélecteurs CSS.
Fonction avec 2 paramètres (texte à récupérer et la zone où afficher la prévisualisation)
Soit :
function preview_text(DocumentId, DocumentPreview){
$(function(){
open_load();
var message = $('#' + DocumentId).val();
$.post("ajax.php", {
s: 'preview',
mess: message
},
function(data){
$('#' + DocumentPreview).html(data);
close_load();
});
});
}
Avec 2 fonctions externes pour activer ou désactiver la mini fenêtre qui indique si un traitement ajax est en cours ou pas.
Ah bah oui, il est tout à fait possible de faire comme ça aussi, plutôt que d'avoir du code qui se répète. ^^
Là ça marche sur Opéra mais est-ce que ça marche sous linux ?
Ahah, référence, quand tu nous tiens :D
Pas mal, tu expliques bien ! Ça permettra à pas mal de gens de s'initier à quelques notions d'Ajax (même si l'utilisation de jQuery pour ça me semble inutile mais bon =° ).
Bref, beau travail !
Merci Nes' !
Le but est en effet d'aborder une mise en place simple de l'utilisation d'Ajax avec jQuery :)
Oui, je comprends, c'est vrai que c'est plus simple de montrer du jQuery en vidéo plutôt que de l'Ajax pur et dur. D'autant plus que ceux qui regardent ta vidéo peuvent aller regarder la doc qui est complète pour plus d'infos.
Au passage, grâce à toi j'ai découvert Aptana. Pour le moment je ne l'ai que vaguement survolé mais ça ne m'a pas l'air mal. Et puis ça me donnera l'occasion de changer d'éditeur si ça finit par me plaire (je suis sous Notepad2 depuis plusieurs années =p ).
Au fait, avec quoi tu as fait tes vidéos ?
J'ai moi-même découvert Aptana depuis quelques mois, et je ne m'en passe plus, bien configuré, c'est génial !
Sinon, pour les vidéos, j'utilise Camtasia ;)
Merci =D
Y'a pas de quoi ^^
Salut,
Bravo pour ce tuto vidéo !
Je rencontre un problème.. En voulant l'insérer dans une édition de news pour mon CMS quand je clique sur prévisualiser cela me met undefined index contenu in preview.php.
Or ds preview g bien renommé contenu a la place de message et "contenu" est bien le nom et l'id de mon textarea ! Donc je ne vois pas pourquoi ça me met ce message d'erreur?!! J'utilise déjà la variable $contenu dans ma requete sql qui est ds la page d'édition de la news est-ce que cela pourrait être la cause de mon malheur??
Merci d'avance si tu peux me sauver !!
Salut,
Suivant les configurations des serveurs, en effet, les variables $_POST['contenu'] et $contenu peuvent être interprétées comme étant les mêmes, mais ce genre de cas reste rare.
Tu as essayé en changeant les noms (sur ton formulaire et dans le fichier preview.php) ?
Il en va de la femme la plus éhontée de cette ville a jamais vu
Vraiment sympa, c'est très clair, moi qui suis un novice en JS, j'ai tout compris ^^. J'ai même pas remarquer de bafouillage ou autre donc nikel ;) .
Ah et merci de m'avoir fait découvrir Aptana, il est bien sympa cet IDE web :D .
En espérant que t'en fasse d'autres :D .