AJAX BESOIN D'AIDE

[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
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

 

[spout]

Tu as un exemple plus complet ? En ligne ?

 

[Momodughetts]

Alors je suis encore en local donc pas en ligne.. Je te montre mes bout de code :
Ma page phtml qui affiche mon calendrier :
<td id="evenement">
<div class="relative">
<div class="day"><?= $day; ?></div>
</div>
<div class="daytitle" name="daytitle">
<?= $date->days[$week-1] ?> <?= $day; ?> <?= $date->months[$month-1]; ?>
</div>
<ul class="events">
<?php if(isset($events[$time])): foreach($events[$time] as $e): ?>
<li><?php echo $e; ?></li>
<?php endforeach; endif; ?>
</ul>
</td>
ma page javascript pour l'affichage du formulaire :
'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;
})
})
// on fait appel a AJX pour charger le formulaire au click
function onClickDate(event){
$('.reservation').load("formulaireajax.html");
var daytitle = document.getElementsByClassName('daytitle').innerText;
var textContent = document.getElementById('textcontent').innerText;
textContent = daytitle + textContent;
textContent = xhr.responseText;
}

// on ajoute un écouteur d'evenement au td et on boucle grâce à une boucle pour assigner le
// même écouteur d'evenement à chaque case
for (var index = 0; index < caseDates.length; index++) {
caseDate = caseDates[index];
caseDate.addEventListener('click', onClickDate);
}
Et mon formulaire tout simple qui s'affiche au click sur la date du calendrier en AJAX :
<section class="formulaireajax">
<p id="textcontent">Vous avez choisi le</p>
<form method="post" action="">
<fieldset>
<legend>Prendre rendez-vous</legend>
<ul>
<li>
<label for="ajax-name">Votre nom : </label>
<input type="text" name="name"class="name">
</li>
<li>
<label for="ajax-emmail">Votre email : </label>
<input type="text" name="mail"class="mail">
</li>
<li>
<label for="ajax-number">Votre téléphone : </label>
<input type="number" name="number"class="number">
</li>
<li>
<label for="ajax-time">Heure : </label>
<input type="time" name="wakeup">
</li>
<li>
<label for="ajax-message">Votre message : </label>
<textarea colspan="3"></textarea>
</li>
<li>
<input type="submit" value="Envoyer" name="submit"class="submit">
</li>
</ul>
</fieldset>
</form>
<script src="js/reservation.js"></script>
</section>
Et donc j'aimerais que ma date du td s'affiche dans le p de ma page formulaire ajax, j'arrive pas

 

[rick38]

Le code peut être plus simple en tirant partie de jQuery sans avoir à mettre des écouteurs d'événements.
Je n'ai pas lu tout le code mais je ferais plus quelque chose comme :

$('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
  });
 
});

 

[Momodughetts]

Alors c'est exactement ça merci beaucoup ! Mais j'ai une petite subtilité qui fait que mon td est composer en deux partie (je trouver ça plus esthétique) <td> <div> <div> </td> et j'aimerais récupérer seulement la deuxième div hors que this me retourne les deux.. Je chipote un peu mais j'aimerais vraiment savoir comment faire je maitrise pas assez le jqueery ni le javascript en formation je les ai appris que deux semaines..

 

[Momodughetts]

Et aussi j'ai cette erreur dans la console "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

 

[Momodughetts]

Alors j'ai trouver pour la div ! Merci beaucoup !! Mais pour l'erreur xhr par contre ?

 

[rick38]

Je ne sais pas parce qu'il n'y a pas d'ajax synchrone dans ce code, si c'est le load() qui l'embête tu peux remplacer par la fonction $.ajax(...) mais ça revient à faire la même chose, il y a dedans un paramètre "async" true ou false pour paramétrer si synchrone ou non, mais normalement load est asynchrone donc je ne vois pas...

 

[Momodughetts]

Bizarrement l'erreur a disparu merci beaucoup ! Par contre je suis dans la vérification de formulaire en javascript, et j'ai un soucis : Mes fonctions de vérification marche très bien, mais ma grosse fonction qui empêche l'envoie du formulaire si il y a une erreur parmi les plusieurs champs ne marche pas et s'envoie quand même même si un champ est vide. Une idée ?

function verifNumero(){
    var number = this.value;
    if(number === "" || this.value.length != 10){
      afficheErreur(this, true);
      return false;
    }else{
        afficheErreur(this, false);
        return true;
    }
}
function verifMessage(){
    var message = this.value;
    if(message === "" || this.value.length <= 5){
      afficheErreur(this, true);
      return false;
    }else{
        afficheErreur(this, false);
        return true;
    }
}
function verifForm(event){
   var nomOk = verifNom.bind(this.nom);
   var mailOk = verifMail.bind(this.mail);
   var numeroOk = verifNumero.bind(this.number);
   var messageOk = verifMessage.bind(this.message);
   if(!nomOk || !mailOk || !numeroOk || !messageOk){
    event.preventDefault();
    return false;
   }
}
console.log(verifForm)
$(function(){
$('#messageForm').submit(verifForm);
$('[name="nom"]').blur(verifNom);
$('[name="mail"]').blur(verifMail);
$('[name="message"]').blur(verifMessage);
$('[name="number"]').blur(verifNumero);
});

 

[spout]

Je dirais qu'il faut faire le event.preventDefault(); au début de verifForm.

 

[Momodughetts]

Si je le fait au début il s'envoie jamais lol même si je ne fait pas d'erreur

 

[spout]

OK. Pas facile de debug avec juste le code

 

[Momodughetts]

Oui je sais bien mais j'ai même pas d'erreur qui s'affiche, juste l'envoie du formulaire alors que un champ est vide. Surement ma condition qui déconne mais j'ai beau la changer ça passe pas