jQuery Girl
  1. jQuery Girl
  3. Les événements de calendrier Framework7 se chargent avec AJAX onMonthAdd
Intereting Posts
Obtenir un élément cliqué dans un événement délégué avec jQuery fonction document.ready appelée à nouveau après le bouton d’envoi? Utilisation de jQuery pour modifier une réponse AJAX Décider de la structure du plugin Jquery Afficher la saisie semi-automatique de Jquery UI uniquement lorsqu’une touche spéciale est enfoncée Jquery – Simple Array, poussant l’élément si ce n’est pas déjà fait, supprimant l’élément s’il y est wrapper de syntaxe du plugin jquery Django utilisant AJAX avec des formulaires, des vues La fonction ajaxTransport personnalisée sans type de données spécifié ne se déclenche pas (TOUT!) JQPlot – Graphique à secteurs – Obtenir la couleur de la tranche cliquée jQuery: recherche le pour une valeur sélectionnée dans un élément Pourquoi cette fonction ne se charge-t-elle pas après un appel ajax réussi dans jQuery? (mis à jour) curseur de mise à jour en utilisant les valeurs de la liste de sélection toujours déclencher «change» -event pour , même si l’option select2 sélectionnée est déjà sélectionnée stopPropagation de jQuery ne fonctionne pas comme prévu

Les événements de calendrier Framework7 se chargent avec AJAX onMonthAdd

Une question similaire, mais qui me semble toujours unique: Framework7 datepicker modifie les événements après l’initialisation

J’ai un calendrier en ligne avec des événements qui se chargent à partir d’un script AJAX et je peux le faire fonctionner, mais des centaines d’événements dureront de nombreuses années. Ce dont j’ai besoin, c’est d’un moyen de charger uniquement les événements du mois et de les append si nécessaire. Je pensais que cela pourrait être fait avec onMonthAdd, mais le problème que je rencontre est que, lorsque j’applique un nouvel élément à p.events, le nouvel événement n’est chargé que lorsque le mois est supprimé de l’élément et lu.

Par exemple: onMonthAdd pour janvier J’ajoute un événement pour le 11 janvier. Ensuite, lorsque janvier est affiché, l’événement ne s’affiche pas. Mais lorsque je reviens en décembre, puis en novembre, le calendrier du mois de janvier est supprimé du DOM. Ensuite, vous retournez au mois de janvier, qui recrée le mois dans le DOM, puis affiche l’événement.

La question principale est de savoir comment il est possible d’append des événements juste avant la création de l’élément dans le DOM si onMonthAdd semble être déclenché après l’ajout du mois au DOM . Je n’ai trouvé aucune référence à une fonction beforeMonthAdd.

AJAX n’est pas pertinent et je peux le faire fonctionner, si je pouvais trouver un moyen d’append simplement un événement (sans AJAX) à un mois ajouté.

Voici du code que j’ai essayé (excluant AJAX) mais il ne fonctionne pas car il a créé le calendrier mais ne met pas à jour les nouvelles dates jusqu’à ce que le mois dans DOM soit recréé: 

... var calendarInline = myApp.calendar({ container: '#calendar-inline-container', weekHeader: true, firstDay: 0, events: [ new Date(2017,7,1), new Date(2017,7,31), new Date(2017,8,1), new Date(2017,8,30), new Date(2017,9,1), new Date(2017,9,31), new Date(2017,10,1), new Date(2017,10,30), new Date(2017,11,1), new Date(2017,11,31) ], onMonthAdd: function(p,monthContainer){ var thisYear = $(monthContainer).find('picker-calendar-month').context.atsortingbutes['data-year'].value; var thisMonth = $(monthContainer).find('picker-calendar-month').context.atsortingbutes['data-month'].value; if(thisMonth==0){ p.params.events.push(new Date(thisYear,thisMonth,11)); } }, }); ...

J’ai trouvé un moyen détourné d’y parvenir en exécutant setYearMonth en utilisant l’année et le mois en cours pour «recharger» le calendrier, mais le problème est que lors du changement d’année, il créera une boucle sans fin. Voici le code correspondant. cette: 

  ... onMonthAdd: function(p,monthContainer){ var thisYear = $(monthContainer).find('picker-calendar-month').context.atsortingbutes['data-year'].value; var thisMonth = $(monthContainer).find('picker-calendar-month').context.atsortingbutes['data-month'].value; if(thisMonth==0){ p.params.events.push(new Date(thisYear,thisMonth,11)); p.setYearMonth(p.currentYear, p.currentMonth, 1); } }, ...

Certaines de mes découvertes sur framework7 et object calendar:

  • Les mois sont chargés trois au démarrage (précédent, actuel et suivant)
  • Les événements ne sont pas supprimés après leur ajout et restnt dans l’object calendrier même après la suppression de ce mois du DOM.
  • Plusieurs événements pour la même date n’ont pas d’effet mis à part le ralentissement du script.
  • Il n’y a pas de rappel pour avant le mois append seulement après
  • Le DOM peut être rechargé en appelant setYearMonth et en réglant la durée sur 1 milliseconde pour ne pas effectuer de transition visible.

Voici le correctif, je ne publie pas tout le code, mais juste le processus

  1. Créez une variable de tableau pour stocker les dates traitées et les événements extraits d’AJAX pour éviter tout travail supplémentaire et toute boucle sans fin.
  2. Avant de traiter l’appel ajax, vérifiez si le mois et l’année sont déjà dans le tableau des mois traités
  3. Si ce n’est pas dans array, append à array et récupérer les événements avec AJAX
  4. Une fois AJAX terminé et les données valides, ajoutez-les à p.param.events et rechargez le calendrier dans DOM à l’aide de setYearMonth.

Cela fonctionne très bien pour mon projet et l’interaction de l’utilisateur est fluide et rapide.