Discussion :

[clem166]

Bonsoir à tous !

En développant un petit formulaire avec différents modules, je me rend compte, qu'en ajoutant des fonctions, d'autres marchent plus.. Etant étudiant, je ne maîtrise pas tout les langages a fond..


Dans mon code, j'ai une partie

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript"></script>

, qui contient l'intégralité de mes fonctions.

Je ne comprend pas certaines fonctions formatées comme ceci par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$(function () {
        $('#datetimepicker3').datetimepicker({
            pickDate: false,
            pickSeconds: false,         // disables seconds in the time picker
            pick12HourFormat: false,   // enables the 12-hour format time picker
        });
    });

Quand est-ce que ces fonctions s'éxécutent ? Comment sont elles appelées ?
C'est ces fonctions qui me posent problème, puis-je les définir comme des fonctions Javascript normales ? :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function test(){}

Pouvez vous m'éclaircir ?..

[SylvainPV]

Ce sont des fonctions Javascript normales.

Ce bout de code est spécifique à jQuery. Quand tu passes une fonction en argument à la fonction $ (qui est un alias pour la fonction jQuery), celle-ci est exécutée au "domReady" ; c'est à dire lorsque le DOM (le HTML) de ta page a été chargé et interprété. Cet évènement survient avant le window.onload, qui lui est appelé lorsque tout est chargé (images, CSS etc...). Tu peux voir ça comme un window.onload optimisé.

Plus d'infos ici : http://api.jquery.com/ready/

[mainContainer]

Si ton code est inclus dans le head de ta page le code s'exécute à l'ouverture de ta page.
> une bonne pratique serait d'inclure ton code dans des fichiers externes
> une autre bonne pratique serait de faire appel à des gestionnaires d'événements: http://api.jquery.com/category/events/document-loading/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
//s'exécute lorsque la page et ses éléments sont entièrement chargés
$(window).load(function () {
  // code
});
 
//s'éxécute dès que la structure de la page et le fichier de script est chargé
$(document).ready(function() {
  // code
});

Ces fonctions utilisent jQuery donc oui il est possible de les faire en pur javascript mais si tu bloques ici je ne te le conseille pas à moins que ce soit dans un but d'étude.

Décortiquons:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
$(function () {
$('#datetimepicker3').datetimepicker({
pickDate: false,
pickSeconds: false, // disables seconds in the time picker
pick12HourFormat: false, // enables the 12-hour format time picker
});
});

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(function () {
 
});

equivaut à:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
jQuery(function () {
 
});

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#datetimepicker3')

équivaut à:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

jQuery('#datetimepicker3')

c'est un selecteur qui va rechercher l'id datetimepicker3 dans la page et lorsqu'il le rencontre il lui applique la méthode:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
datetimepicker({
pickDate: false,
pickSeconds: false, // disables seconds in the time picker
pick12HourFormat: false, // enables the 12-hour format time picker
});

dont on défini les variables pour ajuster les paramètres.

Difficile de t'aider d'avantage, j'espère que tu y verras plus clair.
N'hésite pas à mettre le nez dans la doc:
http://api.jquery.com/
http://jquery.developpeur-web2.com/documentation.php (FR)

[clem166]

C'est déjà plus clair !
J'essaye de modifier ces fonctions demain.
Je posterai le résultat du travail
Merci !

[clem166]

A propos de l’exécution de ces fonctions, si j'ai bien comprit, elles s’exécutent qu'une seule fois (lors de la fin du chargement) ?
Si c'est cas, comment peut on faire pour les rappeler ?
J'ai un peu de mal avec la logique JQuery

[SylvainPV]

Facile, il suffit de déclarer la fonction et de l'appeler quand tu le souhaites

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function test(){
$('#datetimepicker3').datetimepicker({
pickDate: false,
pickSeconds: false, // disables seconds in the time picker
pick12HourFormat: false, // enables the 12-hour format time picker
});
}
 
test(); //exécuté immédiatement
 
$(test); //exécuté au domready
 
setTimeout(test, 10000); //exécuté après 10 secondes

[Bovino]

Si c'est cas, comment peut on faire pour les rappeler ?

Ce que tu nous montres, ce sont des appels à des plugins jQuery, tu n'as normalement aucun besoin de les rappeler !