J'essaye de refactoriser mon compte en créant des fonctions mais cela ne fonctionne pas ... Avez-vous une petite idée pourquoi ?
les fonctions suivantes ne se lancent pas dans l'appel ajax, pourquoi ?
/* 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();
}
});
Non, tu n'as pas compris, ce qui est commenté dans ton code, ne fait à aucun moment, appel à une quelconque fonction, ce n'est donc pas étonnant que la fonction appelAjax ne soit jamais exécutée.
- Edité par Lartak 22 mai 2019 à 13:33:57
Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.
il n'y a pas de problème avec la fonction appelAjax qui fonctionne nickel, je l'appelle plus tard dans le code avec appelAjax();
a vrai dire, la fonction appel ajax est en plus, je pourrais très bien l'enlever, je voulais faire un test avec.
c'est avec les fonctions loadingInit(); et loadingEnd que j'en ai un
, celles qui sont mis en commentaires.
le script complet :
(function ($) {
$(function () {
/* debut du script */
// fonction qui permet de faire passer une partie du titre dans le liseret en small devices mode paysage
function ajouterTitre() {
// On coupe le selecteur .titre h2 à partir ce qui vient après le dernier espace recensé
var titrePage = $('.titre h2').text().slice($('.titre h2').text().lastIndexOf(' ') + 1);
if (window.matchMedia("(max-width: 850px) and (orientation: landscape)").matches) {
//on commence par retirer la span puis on ajoute la nouvelle span avec la var titrePage
$('#portfolio span').remove().promise().done(function () {
$('#portfolio p').append('<span> - ' + titrePage + '</span>');
});
//redimensionner la hauteur du caroussel pour ne pas dépasser l'overflow
$(document).on('fotorama:ready', function (e, fotorama) {
fotorama.resize({
maxheight: '85%'
});
});
}
}
// FIXME: les fonctions suivantes ne se lancent pas dans l'appel ajax, pourquoi ?
/* 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.php", 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();
}
});
// ensuite, on charge les pages suite clic sur les liens correspondants (à peaufiner pour éviter répétition de code)
$('a#accueil').on('click', function () {
$.ajax({
url: "pages/accueil.php", success: function (result) {
$('#loader').fadeIn();
$('section').html(result);
$('section').css('opacity', '0');
$('.fotorama').on('fotorama:ready', function () {
$('#loader').fadeOut();
$('section').fadeTo(500, 1);
});
ajouterTitre();
}
});
});
$('a#street').on('click', function () {
$.ajax({
url: "pages/street.php", success: function (result) {
$('#loader').fadeIn();
$('section').html(result);
$('section').css('opacity', '0');
$('.fotorama').on('fotorama:ready', function () {
$('#loader').fadeOut();
$('section').fadeTo(500, 1);
});
ajouterTitre();
}
});
});
$('a#architecture').on('click', function () {
$.ajax({
url: "pages/architecture.php", success: function (result) {
$('#loader').fadeIn();
$('section').html(result);
$('section').css('opacity', '0');
$('.fotorama').on('fotorama:ready', function () {
$('#loader').fadeOut();
$('section').fadeTo(500, 1);
});
ajouterTitre();
}
});
});
$('a#portrait').on('click', function () {
$.ajax({
url: "pages/portrait.php", success: function (result) {
$('#loader').fadeIn();
$('section').html(result);
$('section').css('opacity', '0');
$('.fotorama').on('fotorama:ready', function () {
$('#loader').fadeOut();
$('section').fadeTo(500, 1);
});
ajouterTitre();
}
});
});
$('a#mariage').on('click', function () {
var motDePasse = prompt("Veuillez indiquer le mot de passe");
if (motDePasse == "weddingpics") {
$.ajax({
url: "pages/mariage.php", success: function (result) {
$('#loader').fadeIn();
$('section').html(result);
$('section').css('opacity', '0');
$('.fotorama').on('fotorama:ready', function () {
$('#loader').fadeOut();
$('section').fadeTo(500, 1);
});
ajouterTitre();
}
});
} else {
$.ajax({
url: "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();
}
});
}
});
// pour les liens de #about, je fais un translate(0) pour que le menu ne coulisse pas au clic
$('a#moi').on('click', function () {
$.ajax({
url: "pages/moi.html", success: function (result) {
$('section').html(result);
$('section .titre, section #caroussel').css('transform', 'translate(0)');
if (window.matchMedia("(max-width: 850px) and (orientation: landscape)").matches) {
$('#portfolio span').remove().promise().done(function () {
$('#portfolio p').append('<span> - Sur moi </span>');
});
}
}
});
});
$('a#contact').on('click', function () {
$.ajax({
url: "pages/contact.html", success: function (result) {
$('section').html(result);
$('section .titre, section #caroussel').css('transform', 'translate(0)');
if (window.matchMedia("(max-width: 850px) and (orientation: landscape)").matches) {
$('#portfolio span').remove().promise().done(function () {
$('#portfolio p').append('<span> - Contact</span>');
});
}
}
});
});
$('a#livre').on('click', function () {
$.ajax({
url: "pages/livre.html", success: function (result) {
$('section').html(result);
$('section .titre, section #caroussel').css('transform', 'translate(0)');
if (window.matchMedia("(max-width: 850px) and (orientation: landscape)").matches) {
$('#portfolio span').remove().promise().done(function () {
$('#portfolio p').append('<span> - Livre d\'or</span>');
});
}
// Gérer la hauteur de la fenetre pour affichage du livre d'or
if (window.matchMedia("(min-width: 851px)").matches) {
var hauteurFenetre = $(window).height();
var hauteurTitre = $('section .titre').height();
var hauteur = hauteurFenetre - hauteurTitre - 50;
$('section form').css('height', '' + hauteur + 'px');
}
if (window.matchMedia("(max-width: 850px)").matches) {
var hauteurFenetre = $(window).height();
var hauteurTitre = $('section .titre').height();
var hauteur = hauteurFenetre - hauteurTitre - 100;
$('#myFrame').css('height', '' + hauteur + 'px');
}
}
});
});
}
// script chargée au lancement de la page index
appelAjax();
// script rechargé à chaque resize de l'écran
$(document).on('resize', function () {
appelAjax();
});
// TODO: essai pour recharger le script en resize ou orientation change
/*$(window).resize(function () {
alert ('OK');
});*/
/* $(window).on('orientationchange', function () {
appelAjax();
}); */
/* fin du script */
});
})(jQuery);
Pour information, il est inutile de définir à quelle balise correspond un id en tant que sélecteur, étant donné qu'un id doit être unique sur une page.
Donc, si tu as mis tout le script correspondant à ton sujet, étant donné que les fonctions basées sur ton problème sont commentées, elles ne peuvent donc pas être utilisées, et même si elles n'étaient pas commentées, vu que tu ne fais appel à aucune d'entre elles, c'est normal qu'elles ne fonctionnent pas.
Je ne vois pas ce que tu voudrais que l'on te dise de plus.
Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.
bon, et bien, voilà, je les décommente (je les avais mis en commentaires parce que cela ne fonctionnait pas, tout comme mes appels de fonctions que j'ai maintenant décommenté
je définis ma fonction, puis je l'appelle avec loadingInit();
Je ne vois pas pourquoi tu me dis que je n'appelle pas mes fonctions.
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.php", 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();
}
});
Déjà tu as un soucis de conception de ton script et surtout un gros défaut de performance si le mec resize sa fenêtre car tu ajoute à chaque fois les events click qui sont dans ta fonction appel ajax. En plus de ça tu va faire des dizaines de call ajax (par user) et le serveur va pas apprécier surtout si c'est inutile.
Dans les optimisations aussi à faire, ne pas sélectionner l'élément à chaque fois comme pour $('.titre h2') car à chaque fois il doit parcourir tout le dom et c'est vraiment pas bon.
Voici un exemple :
$(function () {
// Déclaration des variables pour y stoquer les éléments jQuery
const $loader = $('#loader')
const $section = $('section')
// Suppression de ajouterTitre() qui peut surement être fait en CSS
function loadingStart(result) {
$loader.fadeIn()
$section.html(result).css('opacity', '0')
}
function loadingFinish() {
$loader.fadeOut()
$section.fadeTo(500, 1)
}
function callHome () {
$.ajax({
method: 'GET',
url: 'pages/accueil.php',
success (result) {
loadingStart(result)
$('.fotorama').on('fotorama:ready', function () {
loadingFinish()
})
}
})
}
callHome()
})
Après peut-être pourrais-tu nous dire ce que tu essaye de faire car en regardant le code j'ai l'impression que tu essaye de faire une sorte de Single Page Application.
merci pour ta réponse et ton conseil concernant const $loader = $('#loader')
j'ai finalement avec l'aide d'un ami, je n'avais pas mis d'argument dans la fonction, ça fonctionne mnt
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 loadingAbout(result) {
$('section').html(result);
$('section .titre, section #caroussel').css('transform', 'translate(0)');
if (window.matchMedia("(max-width: 850px) and (orientation: landscape)").matches) {
$('#portfolio span').remove().promise().done(function () {
$('#portfolio p').append('<span> - Sur moi </span>');
});
}
}
/* function appelAjax() { */
// Chargement de la page appelé avec index.html
$.ajax({
url: "pages/accueil.php", success: function (result) {
loadingPage(result);
ajouterTitre();
}
});
- Edité par Sebastien- 27 mai 2019 à 12:33:43
Fonctions qui ne chargent pas en AJAX
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.
Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.
Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.
My website : Mon serveur discord, Se demerder tout seul, Faille XSS et SQL