Discussion :

[Momodughetts]

Bonjour j'ai fait un calendrier en PHP. Donc mes dates sont dans des TD qui ont était créer avec un for each.
Dans mes TD j'ai une DIV avec une class "daytitle" qui correspond à la date entière "1janvier1999".

Au clique sur les TD je charge un formulaire en AJAX avec une fonction toute simple

Code :

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

1
2
3
function onClickDate(event){
        $('.reservation').load("formulaireajax.html");
}

J'ai essayer mainte et mainte solution mais je n'y arrive toujours pas.
J'aimerais qu'au clique sur mes TD, je récupere le contenu de ma DIV "daytitle" donc la date entière, et qu'elle s'affiche dans la page du formulaire dans un p déjà créer avec l'id "textcontent".

Quelqu'un pourrait m'aider ??
Ca fait trois jours que je bloque je commence à déprimée

[psychadelic]

Quleque chose dans ce genre ?

Code JavaScript :

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

1
2
3
4
5
6
$('body').on( "click", "td", function(e) {
  let $_InDateTD = $(this).find('.daytitle');
  if ($_InDateTD.length > 0) {                      // il existe
    $('#textcontent').text( $_InDateTD.text() );
  }
}

[Invité]

Bonjour,

Si la table est créé via Ajax, elle n'existait pas dans le DOM au chargement.
Les td non plus.

Il faut "raccrocher" l'événement à un élément présent au départ.
Par exemple :

Code :

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

1
2
$('body').on( "click", "td", function(e) {
...

[Momodughetts]

Quleque chose dans ce genre ?

Code JavaScript :

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

1
2
3
4
5
6
$('body').on( "click", "td", function(e) {
  let $_InDateTD = $(this).find('.daytitle');
  if ($_InDateTD.length > 0) {                      // il existe
    $('#textcontent').text( $_InDateTD.text() );
  }
}

Alors je pense que ça doit être quelque chose comme ça mais ça me fait une erreur en fin de fichier ") attendu" n'importe ou ou je le place je comprend pas pourquoi. Franchement j'ai fait une formation de 3mois qui était plus axer sur le php; j'ai du mal avec jQuery et javascript c'est horrible
Sinon non les td sont bien présente dans le DOM puisque généré en php sur une page phtml

[psychadelic]

c'est qu'il te manque une parenthèse fermante quelque part dans ton script.

Utilise la coloration syntaxique ansi que Beautify, et Lint dans ton EDI, ça permet d'éviter ce genre d'erreur en codant.

Si tu n'utilise pas d'EDI télécharge un EDI commeVisual Studio Code, ça simplifie pas mal l'écriture de code.

[Momodughetts]

Je code justement avec Visual Studio !
Ben non franchement je vois pas ou il me manque une fermeture :

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
'use strict';
var caseDates = document.querySelectorAll("td");
var caseDate;
//on récupere la date entiere "1er janvier 1999"
 
// on utilise jQuery pour afficher le mois correspond à chaque click et cacher les autres, on commence par afficher le premier mois
  jQuery(function($){
            $('.month-relative').hide();
            $('.month-relative:first').show();
            var current = 1;
            $('.mois a').click(function(){
                var month = $(this).attr('id').replace('linkMonth','');
                if(month != current){
                    $('#month'+ current).slideUp();
                    $('#month'+ month).slideDown();
                    $('.month a#linkMonth'+month);
                    current= month;
                }
                return false;
            })
            })
 
            $('body').on( "click", "td", function(e) {
                let $_InDateTD = $(this).find('.daytitle');
                if ($_InDateTD.length > 0) {                      // il existe
                  $('#textcontent').text( $_InDateTD.text() );
                }
            }

Par contre on m'as donner cette solution qui fait presque ce que je veux :

Code :

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

1
2
3
4
5
6
$('td').on('click', function() {
  var value = $(this).text(); // On récupère la date de la cellule
 
  $('.reservation').load('formulaireajax.html', function() {
    $('.reservation #textcontent').text('Vous avez choisi le ' + value); // Une fois le formulaire chargé, on remplace le contenu de textcontent
  });

Qui sur le coup me fait enlever les ecouteur d'evement et la boucle pour les répeter, et j'ai réussi a selectionner ma div toute seule (oui ! ) donc c'est génial.

Par contre j'ai cette erreur xhr qui s'affiche dans la console et sincèrement c'est pas de mon domaine encore lol

"L’utilisation d’XMLHttpRequest de façon synchrone sur le fil d’exécution principal est obsolète à cause de son impact négatif sur la navigation de l’utilisateur final. Consulter http://xhr.spec.whatwg.org/ pour plus d’informations."

Et sincèrement je sais pas du tout comment la résoudre

[psychadelic]

stp utilise la balise CODE=JavaScript ou CODE=html c'est le symbole # sur l'interface de saisie ici, parce que ton code est dur à lire...

sinon il manquait vraiment une parenthèses à la fin.

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
25
26
27
28
29
30
31
jQuery(function ($) { // commande pour attendre que la page HTML et la librairie jQuery soientt chargées
 
  'use strict';
  var caseDates = document.querySelectorAll("td");
  var caseDate;
  //on récupere la date entiere "1er janvier 1999"
 
  // on utilise jQuery pour afficher le mois correspond à chaque click et cacher les autres, on commence par afficher le premier mois
 
  $('.month-relative').hide();
  $('.month-relative:first').show();
  var current = 1;
  $('.mois a').click(function () {
    var month = $(this).attr('id').replace('linkMonth', '');
    if (month != current) {
      $('#month' + current).slideUp();
      $('#month' + month).slideDown();
      $('.month a#linkMonth' + month);
      current = month;
    }
    return false;
  })
 
  $('body').on("click", "td", function (e) {
    let $_InDateTD = $(this).find('.daytitle');
    if ($_InDateTD.length > 0) { // il existe
      $('#textcontent').text($_InDateTD.text());
    }
  });
 
});

[bonjourajax]

Tout a la fin il manque une parenthese
Et en use strict faut pas oublier de point virgules il en manque aussi

Conseil apprend les base du js en premier

[Momodughetts]

Désolé pour le #Code j'avais pas vue je débarque sur le forum ! Et pour la parenthèse aussi vraiment je commence a fatiguée j'avais vraiment pas vue, les bases du js je les connais après je débute à peine j'ai fait du js que deux semaines en formation intensive et c'est vrai que j'ai beaucoup plus de mal qu'avec le php. Merci en tout cas

[bonjourajax]

De rien.
Pourquoi tu veux a tout prix utiliser le mode strict, surtout si tu débutes, ça va t'amener à faire des erreurs sur un script qui aurait fonctionner sans ce mode?

[Momodughetts]

Ahah parce que justement c'est mon prof qui nous l'a conseillé pour qu'a force justement ces erreurs on les fasse plus et qu'on maîtrise la syntaxe. Je trouve que c'est une bonne technique de mémorisation alors j'essaie de m'y faire

[Momodughetts]

"L’utilisation d’XMLHttpRequest de façon synchrone sur le fil d’exécution principal est obsolète à cause de son impact négatif sur la navigation de l’utilisateur final. Consulter http://xhr.spec.whatwg.org/ pour plus d’informations."

Par contre pour ça, j'ai pas de solution lol si tu peut m'éclairer

[bonjourajax]

Le "prof" aurait du te dire alors qu'il faut utiliser le mode script par function en premier et non dans le script entier sinon c'est compliqué de trouver des erreurs de syntaxes
de mon point de vue vaut mieux ne pas l'utiliser au début, pour la seule raison que le script fonctionnera tout aussi bien que ce soit un script simple ou plux complexe
Pour répondre a ta question, fais voir ta requête ajax?

[Momodughetts]

Ben tu vois tu m'en apprend une belle parce que nous en cours on la toujours fait comme ça !

Code :

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

$('.reservation').load('formulaireajax.html', function()

C'est la plus simple requête ajax possible vraiment je l'ai pas assez vue pour me lancer dans des trucs fou lol

[bonjourajax]

Ce que tu me montres n'est pas une requête ajax ca permet juste de charger le contenu de ton fichier dans ta div

Comment tu as pu avoir cette erreur en écrivant cela

[Momodughetts]

Ben franchement je sais pas mais je l'ai mdr. En tout cas mon formulaire ce charge comme ça "XHR GET formulaireajax.html" et juste en dessous j'ai bien cette erreur ou avertissement

L’utilisation d’XMLHttpRequest de façon synchrone sur le fil d’exécution principal est obsolète à cause de son impact négatif sur la navigation de l’utilisateur final. Consulter http://xhr.spec.whatwg.org/ pour plus d’informations.

[Momodughetts]

Qui pointe sur jquery-3.3.1.min.js:2:79417

[bonjourajax]

Et ca charge correctement?

[Momodughetts]

Ben ouais rien de bizarre j'ai ma page qui s'affiche normalement ect, après je suis encore en local donc c'est peu être pour ça? Je sais pas mais ça m'inquiète un peu

[bonjourajax]

Ca dit juste que quelque part t'a fais une requête xmlhttprequest synchrone.