IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

FullCalendar Add Evenement Ajax


Sujet :

jQuery

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    817
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 817
    Points : 49
    Points
    49
    Par défaut FullCalendar Add Evenement Ajax
    Bonjour à tous,

    j'ai créé sur page chez champs (titre/description/dateheure debut/dateheure de fin) + affiche Calendar (fullcalendar)

    Depuis mes champs input en Ajax j'arrive à enregistrer dans ma base de données un evenement pour Calendar.

    par contre je ne sais comment faire pour afficher en directe dans le calendar

    Pourriez-vous m'aiguiller pour la démarche ?

    Merci par avance pour vos explication

    guigui69

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 430
    Points : 4 916
    Points
    4 916
    Par défaut
    Bonjour,

    Montrez nous le code JS que vous avez utilisé lors de l'affichage et aussi l'enregistrement dans la base de donnée...

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    817
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 817
    Points : 49
    Points
    49
    Par défaut
    Bonjour,

    voici mon code calendar:
    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
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
    			themeSystem: 'bootstrap5',
    			events:  $.ajax({
        url :"ajax/list_evenement_calendrier.php",
            success: function(response) { 
                return response.data; }
    			}),
    			buttonText: {
        today:    'Aujourd\'hui',
        month:    'Mois',
        week:     'Semaine',
        day:      'Jour',
        list:     'Liste'
    },
    			locale: 'fr',
    			firstDay:1,
    			businessHours: true,
    			businessHours: {
      // days of week. an array of zero-based day of week integers (0=Sunday)
      daysOfWeek: [ 1, 2, 3, 4 ,5], // Monday - Thursday
     
      startTime: '8:00', // a start time (10am in this example)
      endTime: '18:00', // an end time (6pm in this example)
    },
    allDayDefault: false,
    minTime:'7:00',
              initialView: 'timeGridWeek',
    		    headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        }
     
            });
            calendar.render();
          });
    la page php pour enregistrer en BDD:
    Code php : 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
    <?php session_start();
     
    	if(isset($_POST["ajouter"]) && isset($_POST["start_datetime"]) && isset($_POST["end_datetime"]) )
    	{
    		echo "22222222";
    include ("../php/fonction.bdd.php"); 
    $mysqli=	connexion_mysql();
     
    if ($nb == null){
     
    $queryinsert = mysqli_query($mysqli,"INSERT INTO `calendrier_data` (title ,description,start_datetime,end_datetime) values ('".$_POST['ajouter']."','".$_POST['ajouter']."','".$_POST['start_datetime']."','".$_POST['end_datetime']."')");
     
    } else {
     
     
    }
     
    }
     
     
     
    ?>
    Les données dans la base de données:
    Nom : calendar2.PNG
Affichages : 138
Taille : 12,1 Ko

    J'ai aussi le probleme pour afficher dans le calendrier quand j'arrive dessus ceci:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    		events:  $.ajax({
        url :"ajax/list_evenement_calendrier.php",
            success: function(response) { 
                return response.data; }
    			}),
    pour aller chercher les données du calendrier avec "list_evenement_calendrier.php" donc voici le code
    Code php : 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
     <?php
    include ("../php/fonction.bdd.php"); 
    $mysqli=	connexion_mysql();
    $query = mysqli_query($mysqli,"SELECT `id_cd`,`title` as title,`description`,`start_datetime`,`end_datetime` FROM `calendrier_data`");
    $rows = mysqli_fetch_all($query, MYSQLI_ASSOC);
    foreach ($rows as $row) {
     
    	     $data[] = array(
      'id'   => $row["id_cd"],
      'title'   => $row["title"],
      'start'   => $row["start_datetime"],
      'end'   => $row["end_datetime"]);
    }
     
     
     
    echo json_encode($data);
    ?>

    voici les données que retourne:
    Nom : calendar.PNG
Affichages : 140
Taille : 12,6 Ko

    pourtant rien ne s'affiche, il doit me manquer un élément mais je bloque

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 430
    Points : 4 916
    Points
    4 916
    Par défaut
    Bonjour,

    Après l'initialisation du plugin, vous devriez appeler la méthode render(); pour afficher les événements :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     var calendar = new FullCalendar.Calendar(calendarEl, {/* les options.....*/});
    calendar.render();//obligatoire, sinon rien ne s'affiche.
    Citation Envoyé par guigui69 Voir le message
    J'ai aussi le probleme pour afficher dans le calendrier quand j'arrive dessus ceci:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    		events:  $.ajax({
        url :"ajax/list_evenement_calendrier.php",
            success: function(response) { 
                return response.data; }
    			}),
    Si tu veux récupérer les événements avec ajax, il faudrait l'appeler via une fonction de rappelle (callback) comme ça :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    events: function(info, successCallback, failureCallback) {
      $.ajax({
          "url":...,
          "dataType":"json",
          success:function(response){
              successCallback(response); // utilisez le paramètre callback défini plus haut. 
          }
      });
    }

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    817
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 817
    Points : 49
    Points
    49
    Par défaut
    Bonjour,

    j'ai modifier mon code (ligne 5) comme ceci: au niveau de events pour afficher les événements quand je charge ma page calendrier.
    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
    29
    30
    31
    32
    33
    34
         document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
    			themeSystem: 'bootstrap5',
    			events: "ajax/list_evenement_calendrier.php" ,
    			buttonText: {
        today:    'Aujourd\'hui',
        month:    'Mois',
        week:     'Semaine',
        day:      'Jour',
        list:     'Liste'
    },
    			locale: 'fr',
    			firstDay:1,
    			businessHours: true,
    			businessHours: {
      // days of week. an array of zero-based day of week integers (0=Sunday)
      daysOfWeek: [ 1, 2, 3, 4 ,5], // Monday - Thursday
     
      startTime: '8:00', // a start time (10am in this example)
      endTime: '18:00', // an end time (6pm in this example)
    },
    allDayDefault: false,
    minTime:'7:00',
              initialView: 'timeGridWeek',
    		    headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        }
     
            });
            calendar.render();
          });
    Par contre je bloque pour pour afficher événement tout de suite créé. Sur ma page ou j'ai mon calendrier, j'ai un petit pavé pour ajouter un événement (dans une BDD) et donc dans le calendrier. La partie (fait en ajax) enregistrement BDD c'est OK (car si je fait F5 cela affiche bien ) par contre je ne sais pas faire pour lui dire de l'afficher de suite dans la calendrier sans faire de F5.

    Est-ce possible? Vers quelle function, code je dois regarder?

  6. #6
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 287
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 287
    Points : 15 603
    Points
    15 603
    Par défaut
    vous utilisez une bibliothèque que vous n'avez pas développée vous même pour gérer le calendrier.
    vous devrez donc chercher dans la documentation de cette bibliothèque pour savoir si cet ajout d'un évènement est possible sans rafraichissement.

  7. #7
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 430
    Points : 4 916
    Points
    4 916
    Par défaut
    calendar.refetchEvents(), Lis la Doc ...

    Si tu ajoutes l'événement avec ajax, tu n'a qu'à faire appel à cette méthode à l'intérieur de l'option success .

  8. #8
    Membre du Club
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    817
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 817
    Points : 49
    Points
    49
    Par défaut
    Bonjour,

    justement j'avais trouvé l'option "calendar.refetchEvents()" mais par contre j'ai cette erreur comme ci il ne voit pas calendar:

    Uncaught TypeError: calendar.refetchEvents is not a function
    success action2.js:51
    jQuery 6
    add_evenement action2.js:45
    onclick calendrier.php:1
    Alors que dans mon code:
    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
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
       <script>
    //var calendar;
          document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
    			themeSystem: 'bootstrap5',
    			events: "ajax/list_evenement_calendrier.php" ,
    			buttonText: {
        today:    'Aujourd\'hui',
        month:    'Mois',
        week:     'Semaine',
        day:      'Jour',
        list:     'Liste'
    },
    			locale: 'fr',
    			firstDay:1,
    			businessHours: true,
    			businessHours: {
      // days of week. an array of zero-based day of week integers (0=Sunday)
      daysOfWeek: [ 1, 2, 3, 4 ,5], // Monday - Thursday
     
      startTime: '8:00', // a start time (10am in this example)
      endTime: '18:00', // an end time (6pm in this example)
    },
    allDayDefault: false,
    minTime:'7:00',
              initialView: 'timeGridWeek',
    		    headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        }
     
            });
            calendar.render();
          });
     
        </script>
    <script type="text/javascript" src="j/action2.js"> </script>
    J'ai bien le code Calandar avec mon fichier action2.js

    contenue de action2.js:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
      function add_evenement()
     
      {
    	//////// alert("ok"+$('input[type=radio][name=estceunvo]:checked').val());
       $.ajax({
       type: "POST",
       url: "./ajax/add_evenement_calendrier.php",
       data: "ajouter="+$("#ajouter").val()+"&start_datetime="+$("#start_datetime").val()+"&end_datetime="+$("#end_datetime").val(),
       success: function(html){
        $("#add_evenement").html(html);
    	calendar.refetchEvents();
      }
    });
      }
    Il manque un élement dans mon code javascript pour pouvoir rappeler mon Calendar?

    merci d'avance pour vos explications

    guigui69

  9. #9
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 430
    Points : 4 916
    Points
    4 916
    Par défaut
    Citation Envoyé par guigui69 Voir le message
    ...mais par contre j'ai cette erreur comme ci il ne voit pas calendar:
    Apparemment le 2éme script est exécuté avant le premier, car il n'est pas dans un contexte DOMContentLoaded comme le premier script.

    Il existe aussi une autre manière pour faire appel aux méthodes de fullCalendar comme par exemple $('#calendar').fullCalendar('refetchEvents');.

    Vous utilisez quelle version de fullCalendar ? j'ai fait mes testes avec la V6 (la nouvelle version).

  10. #10
    Membre du Club
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    817
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 817
    Points : 49
    Points
    49
    Par défaut
    Bonjour,

    c'est cette version que j'utilise: <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js'></script>


    J'ai ma modification dans mon fichier action2.js

    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
        function add_evenement()
     
      {
    	//////// alert("ok"+$('input[type=radio][name=estceunvo]:checked').val());
       $.ajax({
       type: "POST",
       url: "./ajax/add_evenement_calendrier.php",
       data: "ajouter="+$("#ajouter").val()+"&start_datetime="+$("#start_datetime").val()+"&end_datetime="+$("#end_datetime").val(),
       success: function(html){
        $("#add_evenement").html(html);
    	//calendar.refetchEvents();
    	$('#calendar').fullCalendar('refetchEvents');
      }
    });
      }
    mais j'ai toujours:
    Uncaught TypeError: $(...).fullCalendar is not a function
    C'est DOMContentLoaded qui pose problème ? Le placement de ma ligne action2.js est mal placé?

  11. #11
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 430
    Points : 4 916
    Points
    4 916
    Par défaut
    Bonjour,

    Le problème est au niveau de la déclaration de var calendar (Portée de variable) à l'intérieur de DOMContentLoaded, il faudrait la déclarer avant, puis après l'initialiser à l'intérieur comme ça :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    var calendar;//ici d'abord
    document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            //et l'initialisation sans le mot var :
            calendar = new FullCalendar.Calendar(calendarEl, {.......});
    Comme ça la variable sera reconnue par tous les scripts de la même page et aussi ceux à l'extérieur.

    Pour mieux t'expliquer ce qui se passe, l'événement DOMContentLoaded n'est pris en considération qu'après que le document soit chargé (html + css et JS sauf les scripts n'existant pas dans DOMContentLoaded), et donc puisque le 2éme script est chargé directement, pour lui la variable calendar n'a pas encore été définie, et à ce moment là JS croit qu'il doit chercher un élément HTML ayant l'id calendar, ce qui vaut à l'élément HTML id='calendar', et c'est pour ça que l'erreur est déclenchée lorsque tu essaies d'appliquer la méthode refreshEvent() sur un élément HTML.

Discussions similaires

  1. Evenement : Ajax search api
    Par schizophrenia dans le forum APIs Google
    Réponses: 0
    Dernier message: 22/04/2010, 19h21
  2. Réponses: 1
    Dernier message: 02/11/2007, 14h06
  3. [AJAX] les evenement sur un liens
    Par ghost-x dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 12/02/2007, 22h41
  4. [AJAX] Ajax et Google Adds
    Par LeSkaMan dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 12/01/2007, 12h47
  5. [AJAX] [php] appel de fonction php dans evenement
    Par nicerico dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 20/11/2006, 12h01

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo