Exemples dans "Jquery" de Microsoft Application - Forum Javascript / DOM / Ajax

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  Javascript / DOM / Ajax (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Exemples dans "Jquery" de Microsoft Application

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Exemples dans "Jquery" de Microsoft Application (Lu 4036 fois)

Exemples dans "Jquery" de Microsoft Application
« sur: le 18-12-2011 a 10:51:43 »

dimi3
Membre récent

Hors-Ligne

Messages: 24

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.

« Dernière Édition: le 19-12-2011 a 13:10:55 par dimi3 »

Rapporter au modérateur

Re:Exemples dans "Jquery" de Microsoft Application
« Répondre #1 sur: le 20-12-2011 a 09:53:40 »

Twirl
Membre récent

Hors-Ligne

Messages: 6

Bonjour,

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

Rapporter au modérateur

Re:Exemples dans "Jquery" de Microsoft Application
« Répondre #2 sur: le 20-12-2011 a 12:51:51 »

dimi3
Membre récent

Hors-Ligne

Messages: 24

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>

« Dernière Édition: le 21-12-2011 a 12:33:30 par dimi3 »

Rapporter au modérateur

Re:Exemples dans "Jquery" de Microsoft Application
« Répondre #3 sur: le 20-12-2011 a 19:17:56 »

dimi3
Membre récent

Hors-Ligne

Messages: 24

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.

« Dernière Édition: le 21-12-2011 a 12:34:09 par dimi3 »

Rapporter au modérateur

Re:Exemples dans "Jquery" de Microsoft Application
« Répondre #4 sur: le 20-12-2011 a 21:10:46 »

Twirl
Membre récent

Hors-Ligne

Messages: 6

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

« Dernière Édition: le 20-12-2011 a 21:12:02 par Twirl »

Rapporter au modérateur

Re:Exemples dans "Jquery" de Microsoft Application
« Répondre #5 sur: le 20-12-2011 a 22:00:20 »

Twirl
Membre récent

Hors-Ligne

Messages: 6

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;
});

Rapporter au modérateur

Re:Exemples dans "Jquery" de Microsoft Application
« Répondre #6 sur: le 21-12-2011 a 10:33:35 »

dimi3
Membre récent

Hors-Ligne

Messages: 24

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.

« Dernière Édition: le 21-12-2011 a 12:35:15 par dimi3 »

Rapporter au modérateur

Re:Exemples dans "Jquery" de Microsoft Application
« Répondre #7 sur: le 21-12-2011 a 11:15:30 »

Twirl
Membre récent

Hors-Ligne

Messages: 6

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,
});

Rapporter au modérateur

Re:Exemples dans "Jquery" de Microsoft Application
« Répondre #8 sur: le 21-12-2011 a 11:33:46 »

dimi3
Membre récent

Hors-Ligne

Messages: 24

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[color=Red]([/color]function() [color=Red]{[/color]
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;
[color=Red]});[/color]
});

« Dernière Édition: le 21-12-2011 a 12:32:20 par dimi3 »

Rapporter au modérateur

Re:Exemples dans "Jquery" de Microsoft Application
« Répondre #9 sur: le 21-12-2011 a 11:38:30 »

Twirl
Membre récent

Hors-Ligne

Messages: 6

> 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.

Rapporter au modérateur

Re:Exemples dans "Jquery" de Microsoft Application
« Répondre #10 sur: le 21-12-2011 a 12:30:58 »

dimi3
Membre récent

Hors-Ligne

Messages: 24

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.

« Dernière Édition: le 21-12-2011 a 16:57:07 par dimi3 »

Rapporter au modérateur

Re:Exemples dans "Jquery" de Microsoft Application
« Répondre #11 sur: le 21-12-2011 a 18:17:22 »

Twirl
Membre récent

Hors-Ligne

Messages: 6

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).

« Dernière Édition: le 21-12-2011 a 18:17:59 par Twirl »

Rapporter au modérateur

Re:Exemples dans "Jquery" de Microsoft Application
« Répondre #12 sur: le 21-12-2011 a 19:20:24 »

dimi3
Membre récent

Hors-Ligne

Messages: 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.

Rapporter au modérateur