11521 sujets

JavaScript, DOM et API Web HTML5

Problème de mise à jour Ajax/jQuery

Bonjour,

je débute dans le HTML dynamique (ajax avec jquery) et j'ai un problème d'interception de changement de valeur.

J'ai un sélecteur de date (avec une date par défaut) qui met une valeur dans un 'input text'. A l'ouverture de la page, je prends la valeur du sélecteur et je charge une page paramétrée avec la date choisie dans une <div>

Mon problème est que je n'arrive pas à modifier ma date via le sélecteur, lorsque je clique pour choisir (c'est un calendrier pop-up), ma zone d'input text n'est pas mise à jour (et du coup ma <div> non plus). Si par contre, je tape à la main une date dans ma zone, le script détecte le changement (j'ai un popup qui me le dit) mais rien n'est fait au niveau d'ajax pour me récupérer la bonne page (contenu.php) paramétrée comme il faut. Et en plus, il me remet dans la zone ma date par défaut !

Une explication (et un remède) m'aideraient bien.

Merci d'avance.

Voici à quoi ressemble mon bout de code :

<body>
<div class="container flex">
    <div class="item">
        TB
    </div>
    <div class="item">
        <div class="cal">
        <form method="post" id="choix_date" action="">
            <?php
            date_default_timezone_set('Europe/Paris');
            echo '<input type="text" id="datepicker" value="'.date("d/m/Y", strtotime( '-1 days' ) ).'"/>';
            ?>
        </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    var foopicker = new FooPicker({
      id: 'datepicker',
      dateFormat: 'dd/MM/yyyy',
    });
</script>
<br>

<div id="affichage"></div>

<script>
$('#datepicker').change(function(){
  alert("date changée");
}); 
</script>

<script type="text/javascript">
$(document).ready(function() { 
            var val_date = $('#datepicker').val(); 
            alert(val_date);
            $.ajax({
                type        : 'post',  
                url     : 'contenu.php', 
                data        : 'date='+val_date,
                success : function(txthtml) {
                    $('#affichage').html( txthtml ); 
                }
            });
    })
</script>

</body>

Modifié par blux (10 Jan 2020 - 10:48)
Voici le début, le reste n'a que peu d'importance :

<!DOCTYPE html>
<html>

<head>
<meta charset=utf-8>
<link rel="stylesheet" type="text/css" href="tabs.css">
<link rel="icon" type="image/png" href="favicon.png">

<?php
    $vConn = pg_connect("host='**' port='**' dbname='**' user='**' password='**'")
    or die('Connexion impossible !');
    echo $_POST['date'];
?>

A noter que ma date ne change pas lorsque je la sélectionne depuis mon calendrier...
Modifié par blux (13 Jan 2020 - 10:05)
Modérateur
Bonjour,

c'est parce que l'event «change» sur l'input n'est lancé que lorsque l'on perd le focus sur l'input. Changer le contenu par javascript ne déclenche pas l'évènement.

Tu pourrais déclencher manuellement l'event ( $('#datepicker').change() ) au retour du datepicker, si celui-ci te le permet.

Sinon, en 2020, pourquoi ne pas utiliser un champ date?
Meilleure solution
Parce que je débute et que je ne sais pas forcément comment faire !
Je souhaite un sélecteur de date simple et sympa pour les utilisateurs...

<edit>
Je viens de regarder le champ de type date, ça m'a l'air intéressant. Il faut juste que je voie comment mettre une date par défaut...

<reddit>
C'est tout bon...
Modifié par blux (13 Jan 2020 - 11:07)
Sujet clos
Aller à