18008 sujets

Questions générales et questions de débutants

[Résolu] Comportement étrange sur tablette

Pages :
Bonjour à tous
Je rencontre un problème que je n'arrive pas à comprendre (et donc encore moins à corriger!) sir la page https://www.alma-musica.net/html/cal.php
Si je l'affiche sur mon PC sous Firefox, quand on clique sur Programme, ligne du "Lun. 3 19;00" on voit apparaitre la liste des œuvres qui seront travaillées lors de la répétition.
Sur iPad, j'obtiens un cadre vide de très petite taille.

La techno consiste à appeler un script php en AJAX pour remplir la liste quand on clique sur Programme.
Quelqu'un aurait il une piste à me recommander pour essayer de diagnostiquer ce qui ne va pas?
Merci de votre aide.
Safari, c'est le navigateur par défaut d l'iPad.
Tu as raison, je vais voir ce que ça donne avec un autre navigateur.
Toujours vérifier ça. J'ai codé un site de streaming (reproduit deezer), il ne fonctionnait pas sur machine apple à cause de Safari qui ne reconnait pas des choses que Mozilla ou Chrome reconnaisse.

Installe Brackets comme éditeur de texte si tu fais essentiellement du web-dev. Ca permet d'avoir un aperçu par machine/navigateur. C'est le bonheur
C'est du bon JS tout simple, pas de BDD

Je vais essayer (demain) de voir ce que ça donne avec le l'AJAX syncrhone.
Je sais bien que c'est considéré comme "proscrit", mais si ça marche sur Safari, c'est sans doute que le code AJAX asynchrone qui marche bien sur les autres navigateurs a un problème sur Safari.
Code actuel

function DataInclude(target, url){
	var xhr = new XMLHttpRequest();
	target.style.display = 'none';
	xhr.target = target;
	xhr.onreadystatechange = function() {
		if(this.readyState == 4 && this.status == 200) {
			this.target.innerHTML = this.responseText;
			this.target.style.display = '';
		}
	}
	xhr.open('GET', url);
	xhr.send(null);
}

Explication de ce code qui marche très bien avec les autres navigateurs:
je mets dans l'objet xhr, qui est un objet XMLHttpRequest une propriété "target" qui contient l'élément dans lequel inclure ce qu'on a reçu du serveur.
D'ici à ce que Safari n'accepte pas qu'on ajoute des propriétés à un objet XMLHttpRequest...
Il y a bien sûr plein d'autres façons de faire la même chose.
Je verrai demain.
Tu as essayé avec JQuery?

Un exemple rapide :
<form id="test" method="POST">
<input type="text" id="name" required minlength="5" name="name"/>
<input type="password"  id="pw" required name="pw"/>
<input id ="sub" type="submit"/>
</form>
<ul id="answer"></ul>
</body>
<script>

  $("#sub").click(function(event){
        event.preventDefault();
        query = $.post({
            url : 'check_ajax.php',
            data : {'name': $('input[name=name]').val(), 'pw': $('#pw').val()},
        });
        query.done(function(response){
            $('#answer').html(response);
        });
    });

</script>
Bonjour

Comme je le disais hier soir, j'ai modifié le code pour utiliser AJAX en synchrone, et ça marche sur Safari.
Cela ne signifie pas bien entendu que Safari ne supporte pas AJAX asynchrone (ça se saurait depuis longtemps), mais sans doute c'est la façon dont j'ai écrit le code qui pose problème, et très vraisemblablement l'ajout d'une propriété à un objet XMLHttpRequest.
Je vais investiguer davantage.

Si je regarde le code jQuery, je vois que l'id de l'élément est fixe, c'est à dire que s'il y a 12 éléments à remplir je dois avoir 12 fonctions similaires.
C'est justement pour éviter cela que mon code associe l'élément à l'objet XMLHttpRequest, ce qui permet à la fonction de rappel de le retrouver.
Après avoir essayé d'utiliser jQuery pendant un certain temps, je me suis rendu compte que ma connaissance de JavaScript était suffisante pour que je n'aie pas à utiliser cette extension, qui de plus nécessite de prendre de nouvelles habitudes de codage.
Modifié par PapyJP (29 Aug 2018 - 11:02)
Je n'ai aucun problème de display, la preuve étant que si j'utilise AJAX synchrone ça fonctionne, avec le display identique
Oh j'avais pas compris que le synchrone avait réglé le problème. Donc Safari bloque les requêtes asynchrones? Sécurité Apple je suppose (les relous...)
Athos_is_coding a écrit :
Oh j'avais pas compris que le synchrone avait réglé le problème. Donc Safari bloque les requêtes asynchrones? Sécurité Apple je suppose (les relous...)

Pas sûr: je crois que c'est le fait d'ajouter une propriété "étrangère" dans un objet XMLHttpRequest qui lui pose problème.
En fait, je n'ai jamais trouvé sur Internet un exemple similaire à ce que je veux faire: une fonction

function DataInclude(target, url){
    ...........................
}

Tous les exemples que je trouve sont dédiés à mettre le contenu d'une requête dans UNE balise prédéterminée, connue du programme de rappel. Ça peut aller quand on en a quelques unes, mais s'il y en a plusieurs, ça veut dire faire autant de fonction que de balises à remplir.
Mon mécanisme me permet de faire ça de façon plus pratique, mais comme il ne fonctionne pas avec Safari sur tablette, il va falloir que je trouve autre chose, et je ne vois pas très bien quoi. Si on veut faire en sorte que onreadystatechange fasse le remplissage d'une balise variable, il faut bien lui dire quelque part où est cette balise variable, c'est à dire passer un paramètre à onreadystatechange, ce qui n'est pas possible directement. Le mettre dans une propriété de l'objet XMLHttpRequest était une solution pratique à ce problème.
La seule solution que je vois pour le moment serait que ce que retourne la fonction appelée sur le serveur contienne de quoi identifier la balise à remplir, pas très pratique!
Modifié par PapyJP (29 Aug 2018 - 12:22)
La balise a une class?

var liste_elements = document.getElementsByClassName(nom_classe);


Ca récup une liste avec toutes les balises partageant cette classe auxquelles tu peux appliquer un .textContent

Ainsi tu peux avoir autant d'élèments n d'une classe et appliquer ce que tu souhaites dessus dans ta fonction
Modifié par Athos_is_coding (29 Aug 2018 - 12:22)
Si j'ai la liste des balises potentiellement remplissables, ça ne me dis pas laquelle.
Pour faire un appendChild, il faut avoir le parentNode de cette balise, même problème, il faut passer une info.
On peut mettre la balise target dans une variable globale, mais si je fais ça je ne peux pas lancer plusieurs requêtes en parallèles: à quoi cela sert il d'avoir de l'asynchrone si on ne peut pas paralléliser les requêtes?
Pages :
Sujet clos
Aller à