1. ⭐⭐⭐ Grosse PROMO en cours sur ma plateforme SEO My Ranking Metrics
    Rejeter la notice

AJAX BESOIN D'AIDE

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Momodughetts, 2 Juin 2018.

  1. Momodughetts
    Momodughetts Nouveau WRInaute
    Inscrit:
    2 Juin 2018
    Messages:
    8
    J'aime reçus:
    0
    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
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 760
    J'aime reçus:
    234
    Tu as un exemple plus complet ? En ligne ?
     
  3. Momodughetts
    Momodughetts Nouveau WRInaute
    Inscrit:
    2 Juin 2018
    Messages:
    8
    J'aime reçus:
    0
    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 :(
     
  4. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 117
    J'aime reçus:
    122
    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 :

    Code:
    
    $('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 et spout aiment ça.
  5. Momodughetts
    Momodughetts Nouveau WRInaute
    Inscrit:
    2 Juin 2018
    Messages:
    8
    J'aime reçus:
    0
    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.. :(
     
  6. Momodughetts
    Momodughetts Nouveau WRInaute
    Inscrit:
    2 Juin 2018
    Messages:
    8
    J'aime reçus:
    0
    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
     
  7. Momodughetts
    Momodughetts Nouveau WRInaute
    Inscrit:
    2 Juin 2018
    Messages:
    8
    J'aime reçus:
    0
    Alors j'ai trouver pour la div ! Merci beaucoup !! Mais pour l'erreur xhr par contre ?
     
  8. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 117
    J'aime reçus:
    122
    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...
     
  9. Momodughetts
    Momodughetts Nouveau WRInaute
    Inscrit:
    2 Juin 2018
    Messages:
    8
    J'aime reçus:
    0
    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 ?
    Code:
    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);
    });
     
  10. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 760
    J'aime reçus:
    234
    Je dirais qu'il faut faire le event.preventDefault(); au début de verifForm.
     
  11. Momodughetts
    Momodughetts Nouveau WRInaute
    Inscrit:
    2 Juin 2018
    Messages:
    8
    J'aime reçus:
    0
    Si je le fait au début il s'envoie jamais lol même si je ne fait pas d'erreur
     
  12. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 760
    J'aime reçus:
    234
    OK. Pas facile de debug avec juste le code ;)
     
  13. Momodughetts
    Momodughetts Nouveau WRInaute
    Inscrit:
    2 Juin 2018
    Messages:
    8
    J'aime reçus:
    0
    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
     
Chargement...
Similar Threads - AJAX BESOIN AIDE Forum Date
Besoin d'un script ajax svp! Développement d'un site Web ou d'une appli mobile 28 Mai 2012
JS Ajax PHP e-MAIL Développement d'un site Web ou d'une appli mobile 17 Juin 2019
Comment stopper l'exécution de script ajax Développement d'un site Web ou d'une appli mobile 21 Avril 2019
Ajax et duplicate content (Single Page Application) Crawl et indexation Google, sitemaps 1 Mars 2019
Supprimer ajax d'une petite fonction JS Développement d'un site Web ou d'une appli mobile 29 Novembre 2018
Google ne reconnaît pas Ajax !? Référencement Google 30 Août 2018
Indexation et ranking de sites en AJAX Référencement Google 28 Mars 2018
Fonction Ajax qui bug parfois Développement d'un site Web ou d'une appli mobile 11 Mars 2018
En 2018, Google n'utilisera plus la méthode de crawl AJAX basée sur _escaped_fragment_ Référencement Google 5 Décembre 2017
Recherche 2 Scripts - Loader Ajax & Switch CSS Développement d'un site Web ou d'une appli mobile 21 Mai 2017
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice