Проблема с отображением сообщения об ошибке в модальном режиме [закрыто] ⇐ Jquery

[Anonymous]

Здравствуйте!
У меня проблема с отображением сообщения об ошибке в модальном окне. Я не могу отобразить сообщение об ошибке, хотя программа находится в таком состоянии.
Я не знаю, куда поместить этот код:

Код: Выделить всё

toogleModal('modificationModal')

чтобы дать пользователю время поместить сообщение об ошибке в модальное окно, если кто-то не заполнил поле «сводка», и перед нажатием кнопки редактирования.
Если у кого-то есть идеи, буду признателен.
С уважением,

Код: Выделить всё

if (numEtat === true){
console.log('erreur champs synthèse');
$('#erreur').html('Champs manquants: champs synthèse');
return false;
}

А вот остальная часть кода, из которого взят этот код:

Код: Выделить всё

{{-- MODAL HEADER --}}

{{-- FORMULAIRE --}}`your text`


{{-- Synthese --}}
Synthèse


{{-- Erreur --}}




Modifier








//#####################################################################
//######################## Fonctions ##################################
//#####################################################################

//function rendre required "synthese" si changement en état terminé
function change_c_etat(){
if ( document.getElementById("extendedProps-c_etat").value == '10' ) {
document.getElementById("extendedProps-c_synthese").required = true;
}else{
document.getElementById("extendedProps-c_synthese").required = false;
}
//alert(document.getElementById("extendedProps-c_synthese").required);
}
function change_m_etat(){
if ( document.getElementById("extendedProps-m_etat").value == '10' ) {
document.getElementById("extendedProps-m_synthese").required = true;
}else{
document.getElementById("extendedProps-m_synthese").required = false;
}
//alert(document.getElementById("extendedProps-m_synthese").required);
}

//Active ou desactive la modal désigné en argument
function toogleModal(modal) {
console.log('toogleModal');
var bookingModal = $('#' + modal); // Recupération de la modal
//console.log(bookingModal);
bookingModal.modal('toggle'); // Apparition/disparition de la fenêtre modal
bookingModal.on('shown.bs.modal', function() {

$('#erreur').empty();
})

};

function verifChampModal(modal) {
console.log('verifChampModal');
// Vérifier si les champs requis sont remplis
var test = $("#" + modal);
// console.log(test);

//Récupère l'id de l'état de l'événement et teste si il vaut 10 pour mettre une synthèse
numEtat = false;
var testFindEtat = test.find('select[id="extendedProps-m_etat"]').filter(function() {
console.log($(this).val());
if( $(this).val() == 10) {
numEtat = true;
//console.log('Champs manquants: champs synthèse');
}
else{
numEtat = false;
}
});

if (numEtat === true){
console.log('erreur champs synthèse');
$('#erreur').html('Champs manquants: champs synthèse');
return false;
}

var champsManquants = test.find('input[required], textarea[required], select[required]').filter(function() {
//console.log($(this).val());
return $(this).val() === '';
});

nameChampsManquants = Object.values(champsManquants);
//console.log(nameChampsManquants);
var titleChampsManquants = nameChampsManquants[0].title;
//console.log(titleChampsManquants);

// Afficher une erreur si des champs sont manquants
if (champsManquants.length > 0) {
//console.log('err champ manquant');
console.log(titleChampsManquants);
;
$('#erreur').html('Champs manquants :'  + titleChampsManquants); // Affichage d'un message d'erreur
return false; // Arrêter l'exécution de la fonction
}
return true;
}

//#####################################################################
//########################Définition calendrier########################
//#####################################################################
document.addEventListener('DOMContentLoaded', function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});

//Preparations des données pour la transmission au calendrier
var events = [
// Vos événements ici
@foreach ($evenements as $evenement)
{
id: '{{ $evenement->id }}',
title: '{{ $evenement->nomclient }}',
start: '{{ $evenement->date_debut }}',
end: '{{ $evenement->date_fin }}',
allDay: {{ $evenement->jourComplet }},
borderColor : '{{ $evenement->couleurrdv }}',
backgroundColor : '{{ $evenement->couleurrdv }}',
display : '{{ $evenement->displayrdv }}',
extendedProps: {
description: '{{  str_replace(array("\r", "\n"), '\r',$evenement->description) }}',
code_cli_pro: '{{ $evenement->code_client }}',
user_id: '{{ $evenement->user_id }}',
type_evenement: '{{ $evenement->type_evenement }}',
etat: '{{ $evenement->etat }}',
synthese: '{{ str_replace(array("\r", "\n"), '\r',$evenement->synthese) }}',
nom_cli_pro: '{{ $evenement->objet }}'
},
// Autres propriétés d'événement si nécessaire
},
@endforeach
];
//console.log('evenement : '+events);
var calendarEl = document.getElementById('calendrier');  // Récupère l'element dans lequel on va construire le calendrier
// Définition des paramètre du calendrier
var calendrier = new FullCalendar.Calendar(calendarEl, {
events: events, // Source des évènement au chargement de celui ci
handleWindowResize: true,
aspectRatio: 2,
firstDay:1,
hiddenDays:[0],
eventColor: 'red',
eventBackgroundColor: 'indigo',
eventBorderColor: 'indigo',
eventTextColor: 'white',
navLinks: true,
navLinkDayClick: function(date, jsEvent) {
send_mail(date.toLocaleString('fr-FR', { timeZone: 'Europe/Paris' }));
},
locale: 'fr',
//Définis le contenu du header du calendrier
headerToolbar: {
start: 'prevYear,prev dayGridMonth,timeGridWeek',
/* multiMonthYear,timeGridDay */
center: 'title',
end: 'today next,nextYear'
},
// Changement du contenu textuel des boutons
buttonText: {
today: 'Aujourd\'hui',
month: 'Mois',
week: 'Semaine',
day: 'Jour',
list: 'Liste',
multiMonthYear: 'Années',
},
selectable: true, // Active la selection pour les evenement
// selectMirror: false,
displayEventTime: true, // Affiche l'heure sur les evenement

//Change le format de l'heure
eventTimeFormat: {
hour: 'numeric',
minute: '2-digit',
meridiem: false
},
// Fonction qui se déclenche au clique sur un jour
select: function(start, allDays) {
console.log('click new');
//console.log('user_id : '+document.getElementById('select_utilisateur').value);
user_id = document.getElementById('select_utilisateur').value;
//console.log(user_id);
//alert('clicknew');
var dataForm
var typeChamp = ['title', 'extendedProps', 'heure_debut', 'heure_fin', 'end', 'allDay', 'start'];
toogleModal('bookingModal'); // Fait apparaitre la modal
videChampModal('bookingModal'); // Vide les champs de la modal a son apparition
autocompleteHeure('c_heure_debut', 'c_heure_fin'); // Complète l'heure de fin a partir de l'heure de debut

$('#saveBtn').on('click', function() {
console.log('save bouton cliqué');
recuperationDataForm('bookingModal', 'saveBtn', start, false, typeChamp)
.then((retour) => {
console.log('Résultat:', retour);  // Utilisation du résultat en cas de réussite
dataForm = retour;
console.log('dataform : ', dataForm);
$.ajax({
url: "{{ route('evenement-calendrier.store') }}",
type: "POST",
dataType: 'json',
data: dataForm,
success: function(response) {
//Si la requête est un succès on stocke la réponse pour créer un nouvel évenement pout l'afficher ensuite
// Ajout des evenements au calendrier
//console.log('response : ', response);

//Changement de la couleur selon etat_id
monetatid = response.extendedProps['etat_id'];
console.log(monetatid);

switch (monetatid) {
case 16 : macouleur = 'red';
break;
case 17 : macouleur = 'orange';
break;
case 20 : macouleur = 'green';
break;
case 25 : macouleur = 'black';
break;
default :   macouleur = 'red';
break;
}
console.log(macouleur);
;
//Changement affichage selon etat
mondisplay = response.extendedProps['etat'];
if (mondisplay == 10){
mondisplay = 'list-item';
}else{
mondisplay = 'block';
}

//AJOUT EVENEMENT DANS LE CALDENDRIER
var newEvent = {
title: response.title,
start: response.start,
end: response.end,
allDay: response.jourComplet,
borderColor : macouleur,
backgroundColor : macouleur,
display : mondisplay,
id: response.id,
extendedProps: {
description: response.extendedProps['description'],
code_cli_pro: response.extendedProps['code_cli_pro'],
user_id: response.extendedProps['user_id'],
type_evenement: response.extendedProps['type_evenement'],
etat: response.extendedProps['etat'],
synthese: response.extendedProps['synthese'],
nom_cli_pro:  response.extendedProps['objet'],

},
}
calendrier.addEvent(newEvent);

/*var evenement = calendrier.getEventById(response.id);

evenement.setProp('title', response.title);
evenement.setProp('allDay', response.jourComplet);
evenement.setExtendedProp('description', response.extendedProps['description']);
evenement.setExtendedProp('code_cli_pro', response.extendedProps['code_cli_pro']);
evenement.setExtendedProp('nom_cli_pro', response.extendedProps['nom_cli_pro']);
evenement.setExtendedProp('user_id', response.extendedProps['user_id']);
evenement.setExtendedProp('type_evenement', response.extendedProps['type_evenement']);
evenement.setExtendedProp('etat', response.extendedProps['etat']);
evenement.setExtendedProp('synthese', response.extendedProps['synthese']);
*/
// $('#calendrier').empty();
// $('#calendrier').children().remove();

// $('#calendrier').html(response);
console.log('Ajouté');

//REFRESH PAGE EN ATTENDANT DE CORRIGER LE BUG AUTOCOMPLETE
// (qui ne fontionne pas après fermeture d'un modal)
//location.reload();
},
error: function(error) {}
});
})
.catch((error) => {
console.error('Erreur:', error); // Gestion des erreurs
});
//Requête Ajax pour envoyer l'evenement sur 'evenement.store'

});
// Attend que la fermeture de la modal soit complète
$("#bookingModal").on("hidden.bs.modal", function() {
$('#erreur').empty(); // Vide le message d'erreur
});
//console.log('FIN ???');
},

eventClick: function(event) {
var start = event.event.start;
var dataForm
var typeChamp = ['title', 'extendedProps', 'heure_debut', 'heure_fin', 'end', 'allDay', 'start'];
toogleModal('modificationModal'); // Fait apparaitre la modal

//videChampModal('modificationModal'); // Vide les champs de la modal a son apparition
autoCompleteEvent(event.event, typeChamp, 'modificationModal');

$('#modifBtn').on('click', function() {
console.log('modification bouton cliqué');
//toogleModal('modificationModal');
var id = event.event.id;
recuperationDataForm('modificationModal', 'modifBtn', start, false, typeChamp)
.then((retour) => {
console.log(retour);
$.ajax({
url: "{{ route('evenement-calendrier.update', '') }}"  + '/' + id,
type: "PUT",
dataType: 'json',
data: retour,
success: function(response) {
var evenement = calendrier.getEventById(response.id);
//console.log(response.start)
//console.log('response.start : '+response.start)
response.start = response.start.replaceAll("/", "-");
console.log(response.start)
console.log("REPONSE:::"+response.extendedProps['description']);
console.log(response.extendedProps['etat']);
evenement.setProp('id', response.id);
evenement.setProp('title', response.title);
evenement.setStart(response.start);
evenement.setEnd(response.end);
evenement.setProp('allDay', response.jourComplet);
evenement.setExtendedProp('description', response.extendedProps['description']);
evenement.setExtendedProp('code_cli_pro', response.extendedProps['code_cli_pro']);
evenement.setExtendedProp('nom_cli_pro', response.extendedProps['nom_cli_pro']);
evenement.setExtendedProp('user_id', response.extendedProps['user_id']);
evenement.setExtendedProp('type_evenement', response.extendedProps['type_evenement']);
evenement.setExtendedProp('etat', response.extendedProps['etat']);
evenement.setExtendedProp('synthese', response.extendedProps['synthese']);
console.log('event modifié')
//REFRESH PAGE EN ATTENDANT DE CORRIGER LE BUG AUTOCOMPLETE
// (qui ne fontionne pas après fermeture d'un modal)
//location.reload();
//toogleModal('modificationModal');
},
error: function(error) {
console.log(error)
},
});
console.log(event.event.etat);
})
.catch((error) => {
console.error('Erreur:', error); // Gestion des erreurs
});
//toogleModal('modificationModal');
});
},
});
});

Я попытался переместить эту строку кода ниже, которая уже находится в «календарной» части:

Код: Выделить всё

toogleModal('modificationModal')

из этой строки:

Код: Выделить всё

 $('#modifBtn').on('click', function()

Но это ничего не изменило, поскольку сообщение об ошибке все равно не отображается.
Cdt

Подробнее здесь: https://stackoverflow.com/questions/785 ... une-modale