Fonctions qui ne se lancent pas en AJAX

Version imprimable

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:

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 ?

22/05/2019, 08h26
SpaceFrog
regarde plutot la syntaxe de $.ajax :

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

1 2 jQuery.ajax( url [, settings ] )
La tienne n'est pas correcte
Code:

1 2 $.ajax({ url: "pages/accueil.html",
tu as mis l'url dans ton json de paramètres ...

merci pour ta réponse

je regarde la doc et je trouve cette syntaxe :

Code:

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:

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:

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.

22/05/2019, 09h50
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.
22/05/2019, 10h02
sebgac

merci pour ta réponse

placer le

Code:

$('#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 ...
24/05/2019, 15h37
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?

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

Code:

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