Imprimer la Page

Forum-webmaster

Technique - programmation => Javascript / DOM / Ajax => Message commencé par: dimi3 le le 18-12-2011 a 10:51:43

Titre: Exemples dans "Jquery" de Microsoft Application
Posté par: dimi3 le le 18-12-2011 a 10:51:43

Bonjour,

J'ai acheté le livre "Jquery - le guide complet" édité chez MicroApplication. Dans les exemples donnés, je n'arrive pas à faire fonctionner la barre de progression ainsi que le menu accordéon.
1. la barre de progression s'affiche, mais on ne voit aucune progression s'activer !
2. Le menu accordéon s'affiche, mais il reste indéfiniment déployé.
3. Quant au calendrier, la présentation n'est pas identique à l'illustration du livre.

Si vous connaissez ce livre et si vous avez testé ces scripts, voudriez-vous me dire si vous êtes parvenus à les faire fonctionner. Pour savoir si je dois encore me bagarrer avec les scripts ou si ceux-ci sont bogués.

Je vous remercie.

Titre: Re:Exemples dans "Jquery" de Microsoft Application
Posté par: Twirl le le 20-12-2011 a 09:53:40

Bonjour,

Est-ce que vous pouvez poster le code que vous utilisez (plus simple pour voir d’où vient le problème).

Titre: Re:Exemples dans "Jquery" de Microsoft Application
Posté par: dimi3 le le 20-12-2011 a 12:51:51

merci de l'attention que vous avez portée à ma question.
Voici le script concernant la barre de progression :

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Barre de progression</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="txt/css" rel="stylesheet" media="screen">

<style type="text/css">
.progressbar {
position: absolute;
top: 0px;
right: 0px;
width: 50px;
height: 10px;
}
</style>

<SCRIPT TYPE="text/javascript">
$(function() {
function CreationBarreDeProgression() {
$( "#progressbar" ).progressbar({
value: 0,
complete: function(event, ui) {
$( "#progressbar" ).progressbar("destroy")
}
});
}

$("#btnRequete").bind("click", function() {
CreationBarreDeProgression();
$.ajax({
url: "traitement.php",
beforeSend : function(data){
$("#progressbar").progressbar({value: 20});
},
dataFilter : function(data){
$("#progressbar").progressbar({value: 50});
},
success : function(data){
$("#progressbar").progressbar({value: 80});
},
error : function(data){
$("#progressbar").progressbar({value: 80});
},
complete: function(data){
$("#progressbar").progressbar({value: 100});
}
});
});
});
</script>
</head>

<body>
<center>
<input id="btnRequete" type="button" value="Requete Ajax"><br><br>
<div id="progressbar" class="progressbar"></div><br>
</center>
</font>
</BODY>
</HTML>

Titre: Re:Exemples dans "Jquery" de Microsoft Application
Posté par: dimi3 le le 20-12-2011 a 19:17:56

Du nouveau : le script ci-dessus fonctionne dans Google Chrome mais ne fonctionne pas dans Firefox dont je me servais pour tester.

Maintenant je souhaite soumettre les données du formulaire à un fichier de traitement PHP. Le résultat est que la barre de progression s'affiche (sous Google Chrome bien sûr, pas dans Firefox) mais que les données du formulaire ne sont pas traitées. Voici le script :

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Barre de progression</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="txt/css" rel="stylesheet" media="screen">

<style type="text/css">
.progressbar {
width: 50px;
height: 10px;
}
</style>

<SCRIPT TYPE="text/javascript">

$(function() {
function CreationBarreDeProgression() {
$( "#progressbar" ).progressbar({
value: 0,
});
}

$("form#test").submit(function() {
CreationBarreDeProgression();
s = $(this).serialize();
$.ajax({
url: "traitement.php",
type: "POST",
dataType: "html",
data : s,
success: function(retour) {
$("#msg").html(retour);
},
beforeSend : function(data){
$("#progressbar").progressbar({value: 20});
},
dataFilter : function(data){
$("#progressbar").progressbar({value: 50});
},
success : function(data){
$("#progressbar").progressbar({value: 80});
},
error : function(data){
$("#progressbar").progressbar({value: 80});
},
complete: function(data){
$("#progressbar").progressbar({value: 100});
}
});
});
});

</script>
</head>

<body>
<center>
<form name="test" id="test" method="post">
<input type = "text" size = 50 name = "donnee1" ID="donnee1"><br>
<input type="hidden" name="donnee2" id="donnee2" value="1">
<input id="btnRequete" type="submit" value="Requete Ajax"><br>
</form>
<div id="progressbar" class="progressbar"></div><br>
<div id="msg">résultat</div><br>
</center>
</font>
</BODY>
</HTML>

Je vous remercie si vous pouvez m'aider à trouver la ou les erreurs.

Titre: Re:Exemples dans "Jquery" de Microsoft Application
Posté par: Twirl le le 20-12-2011 a 21:10:46

Le fichier CSS n'est pas inclu correctement :
1) "txt./css" au lieu de "text/css"
2) la balise n'est pas fermée

Cela donne donc :
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" media="screen" />

Je teste le problème du POST demain quand j'aurai un serveur web sous la main ;)

Titre: Re:Exemples dans "Jquery" de Microsoft Application
Posté par: Twirl le le 20-12-2011 a 22:00:20

Je viens de regarder le deuxième script: le problème vient du fait qu'il y a une requête AJAX POST ET un form POST.

Pour garder le POST du formulaire dans le cas où le JS est désactivé, et ne pas l'avoir lorsque le JS est activé, il faut ajouter "return false" à la fin du submit :

Code:

$("form#test").submit(function() {
...
return false;
});

Titre: Re:Exemples dans "Jquery" de Microsoft Application
Posté par: dimi3 le le 21-12-2011 a 10:33:35

Bonjour et merci pour votre amabilité.
J'ai corrigé le link et ajouté "return false;" à cet endroit :

Code:

.....
complete: function(data){
$("#progressbar").progressbar({value: 100});
}
});
return false;
});
});

.....

Je ne pense pas m'être trompé. La barre de progression fonctionne bien sous Google Chrome et Firefox. Firebug ne détecte pas d'erreur. Internet Explorer détecte une erreur à la ligne 23 : "Identificateur, chaine ou nombre attendu à la ligne 23 ; code : 0". La ligne 23 serait la suivante :

Code:

function CreationBarreDeProgression() {
$( "#progressbar" ).progressbar({
value: 0,
}); <------ LIGNE 23
}

Sur les 3 navigateurs, je n'obtiens dans le div "msg" aucun retour du traitement par le fichier "traitement.php" appelé.

Merci encore pour votre temps.

Titre: Re:Exemples dans "Jquery" de Microsoft Application
Posté par: Twirl le le 21-12-2011 a 11:15:30

Bonjour,

Il faut mettre le "return false" dans la fonction submit() et non dans le progressbar()
$("form#test").submit(function() {
...
return false;
});

Pour l'erreur dans IE, je suppose que le problème vient du JSON de progressbar: il y a une virgule en trop après: "value: 0"

BON

Code:

$( "#progressbar" ).progressbar({
value: 0
});

MAUVAIS

Code:

$( "#progressbar" ).progressbar({
value: 0,
});

Titre: Re:Exemples dans "Jquery" de Microsoft Application
Posté par: dimi3 le le 21-12-2011 a 11:33:46

La suppression de la virgule a solutionné l'erreur d'Internet explorer. Merci à vous.
Une vérification des parenthèses et accolades me conduit à repérer la fermeture du submit comme indiqué en rouge. Je me trompe ?

Code:

$(function() {
function CreationBarreDeProgression() {
$( "#progressbar" ).progressbar({
value: 0,
});
}

$("form#test").submit{
CreationBarreDeProgression();
s = $(this).serialize();
$.ajax({
url: "traitement.php",
type: "POST",
dataType: "html",
data : s,
success: function(retour) {
$("#msg").html(retour);
},
beforeSend : function(data){
$("#progressbar").progressbar({value: 20});
},
dataFilter : function(data){
$("#progressbar").progressbar({value: 50});
},
success : function(data){
$("#progressbar").progressbar({value: 80});
},
error : function(data){
$("#progressbar").progressbar({value: 80});
},
complete: function(data){
$("#progressbar").progressbar({value: 100});
}
});
return false;
});
});

Titre: Re:Exemples dans "Jquery" de Microsoft Application
Posté par: Twirl le le 21-12-2011 a 11:38:30

> Une vérification des parenthèses et accolades me conduit à repérer la fermeture du
> submit comme indiqué en rouge. Je me trompe ?
oui, ça semble être ça.

Qd on code, il faut bien mettre les tabulations (pour ne pas les perdre sur ce forum, il faut utiliser les balises [ code] et [ /code] - sans l'espace ;)). Les éditeurs comme UltraEdit aident également pour trouver les parenthèses (et accolades) en colorant la parenthèse correspondante.

Titre: Re:Exemples dans "Jquery" de Microsoft Application
Posté par: dimi3 le le 21-12-2011 a 12:30:58

J'utilise Notepad++ qui colore aussi les parenthèses et les accolades.
Il reste donc le retour dans le div "msg" du traitement des données du formulaire qui n'a pas lieu. Une alert() m'indique pourtant que les données du formulaire sont bien envoyées lors de la soumission. Et lorsque je teste sans la barre de progression, le retour se fait bien.
Mes tests montrent que c'est le script :

Code:

dataFilter : function(data){
$("#progressbar").progressbar({value: 50});
},

qui empêche le retour du traitement et son affichage dans la div.

Titre: Re:Exemples dans "Jquery" de Microsoft Application
Posté par: Twirl le le 21-12-2011 a 18:17:22

La fonction success est définie deux fois. Il faut un seul exemplaire :

Code:

success: function(data) {
   $("#msg").html(data);
   $("#progressbar").progressbar({
      value: 80
   });
}

La fonction dataFilter est mal définie. Le plus simple est de la virer. La doc de jQuery :

Citation:

dataFilter(data, type)
A function to be used to handle the raw response data of XMLHttpRequest.This is a pre-filtering function to sanitize the response. You should return the sanitized data. The function accepts two arguments: The raw data returned from the server and the 'dataType' parameter.

http://api.jquery.com/jQuery.ajax/

Dans Firefox, la fonction console.log() est assez utile pour faire du débogage basic (par exemple, vérifier qu'une fonction de retour est bien appelée, vérifier la valeur des paramètre, etc).

Titre: Re:Exemples dans "Jquery" de Microsoft Application
Posté par: dimi3 le le 21-12-2011 a 19:20:24

Tout marche bien maintenant. J'aurais aimé conserver dataFilter pour que la barre de progression avance en 4 sauts. Cela aurait été moins saccadé.
Je vous remercie encore mille fois pour vos interventions qui m'ont encouragé à persévérer.