Discussion :

[sebgac]

J'essaye de refactoriser mon code, mais les fonctions en commentaires ne fonctionnent pas :

les fonctions suivantes ne se lancent pas dans l'appel ajax, pourquoi ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
        /* function loadingInit() {
            $('#loader').fadeIn();
            $('section').html(result);
            $('section').css('opacity', '0');
        } */
 
        /* function loadingEnd() {
            $('#loader').fadeOut();
            $('section').fadeTo(500, 1);
        } */
 
        function appelAjax() {
 
            // Chargement de la page appelé avec index.html
 
            $.ajax({
                url: "pages/accueil.html", success: function (result) {
                    // on affiche le loader et commence le chargement des photos en le cachant
                    $('#loader').fadeIn();
                    $('section').html(result);
                    $('section').css('opacity', '0');
                    /* loadingInit(); */
                    // lorsque le chargement des photos est terminé, on cache le gif et modifie l'opacité de la section pour afficher les photos
                    $('.fotorama').on('fotorama:ready', function () {
                        $('#loader').fadeOut();
                        $('section').fadeTo(500, 1);
                        /* loadingEnd(); */
                    });
                    ajouterTitre();
                }
            });

vous avez une idée pourquoi ?

[SpaceFrog]

regarde plutot la syntaxe de $.ajax :

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

Code :

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

1
2
 
jQuery.ajax( url [, settings ] )

La tienne n'est pas correcte

Code :

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

1
2
 $.ajax({
                url: "pages/accueil.html",

tu as mis l'url dans ton json de paramètres ...

[sebgac]

merci pour ta réponse

je regarde la doc et je trouve cette syntaxe :

Code :

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

1
2
3
4
5
6
$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $( this ).addClass( "done" );
});

sur un autre doc je trouve ça :

Code :

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

1
2
3
4
5
$.ajax('index.html', {
  success: function(response) {
    $('.hello-world').html(response);
  }
});

ce qui correspond plus à ma construction. En effet, je pourrais écrire comme ça, je vais tester

Code :

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

1
2
3
4
5
6
7
8
9
10
 $.ajax(
                    "pages/accueil.html", {success: function (result) {
                        $('#loader').fadeIn();
                        $('section').html(result);
                        $('section').css('opacity', '0');
                        $('.fotorama').on('fotorama:ready', function () {
                            $('#loader').fadeOut();
                            $('section').fadeTo(500, 1);
                        });
                        ajouterTitre();

Cependant, mon code fonctionnait super jusqu'à présent, pourquoi il fonctionnait si ma syntaxe était fausse ? C'était juste la refactorisation qui m'était impossible, mais le code initial me chargeait ce que je voulais : je veux insérer dans la balise section de ma page index le contenu de accueil.html dans ma balise section.

[NoSmoking]

Bonjour,
la technique Ajax est par défaut asynchrone, donc il ne te faut pas mettre $('#loader').fadeIn() à l'intérieur de celle-ci mais avant.
Dans le même esprit, ton appel $('#loader').fadeOut() est à mettre dans le always de la requête.

[sebgac]

merci pour ta réponse

placer le

Code :

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

$('#loader').fadeIn()

à l'intérieur de l'AJAX me permet justement de faire ce fadeIn au moment où le code html que je souhaite est bien chargé par ajax. Je trouve cela assez pratique. j'avoue que je ne comprends pas bien ta réponse, le concept asynchrone et de "always". je vais faire plus de recherches ...

[NoSmoking]

En regardant rapidement ton site, donnée dans ton autre discussion, il semblerait que tu ais résolu ton problème, ou que je n'ai pas vu où il se situé.
Quand est-il?

[sebgac]

Oui, désolé, le sujet est résolu, voici ce que j'ai fait

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
        function loadingPage(result) {
            // on affiche le loader et commence le chargement des photos en le cachant
            $('#loader').fadeIn();
            $('section').html(result);
            $('section').css('opacity', '0');
            // lorsque le chargement des photos est terminé, on cache le gif et modifie l'opacité de la section pour afficher les photos
            $('.fotorama').on('fotorama:ready', function () {
                $('#loader').fadeOut();
                $('section').fadeTo(500, 1);
            });
        }
 
 
        /* function appelAjax() { */
 
        // Chargement de la page appelé avec index.html
 
        $.ajax({
            url: "pages/accueil.php", success: function (result) {
                loadingPage(result);
                ajouterTitre();
            }
        });

il me manquait l'argument à passer dans la fonction