JS - perte d'une variable apres l'appel d'un modal (materialize)

Par Sàyn, il y a 9 ans

Javascript

Bonjour,

J'ai un petit problème, j'utilise FullCalendar, je souhaite remplacer le modal de base :
var title = prompt('Event Title:');
par le modal materialize, en revanche je perds la variable title apres la fermeture du modal et rien a faire je ne comprends pas pourquoi,
quelqu'un aurait la solution?
j'ai commencé plus bas où le problème se pose

Merci d'avance !

HTML / CSS

<div id="calendar"> </div> <div id="modal1" class="modal modal-fixed-footer"> <div class="modal-content"> <h4>Modal Header</h4> <p>A bunch of text</p> <input type="text" name="title"> </div> <div class="modal-footer"> <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a> </div> </div> <input type="hidden" name="_token" value="{{ csrf_token() }}">

JAVASCRIPT / PHP (blade)

$(document).ready(function () { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var calendar = $('#calendar').fullCalendar({ header: { left: 'today prev,next', center: 'title', right: 'month,agendaWeek,agendaDay' }, weekends:false, defaultView:'agendaWeek', firstDay: 1, locale: "fr", selectable: true, selectHelper: true, minTime: '08:00:00', maxTime: '20:00:00', select: function (start, end, allDay) { //INITIALISATION DE TITLE var title = null; $('#modal1').openModal({ dismissible: true, complete: function() { title = $('input[name=title]').val(); //ICI ON RECUPERE BIEN LA VALEUR DE LA VARIABLE (j'ai fait un test avec alert) } }); //VARIABLE detruite - fin de la fonction if (title) { calendar.fullCalendar('renderEvent', { title: title, start: start, end: end, }, true // make the event "stick" ); $.ajax({ url: '{{url("evenements/store")}}', type: 'POST', dataType: 'json', data: { title: title, start: start.format(), end: end.format(), '_token': $('input[name=_token]').val() }, success: function (res, statut) { if(res.message){ Materialize.toast("<i class='material-icons left green-text'>done</i>"+ res.message, 5000); } }, }); } calendar.fullCalendar('unselect'); }, editable: true, events: [ @foreach (Auth::user()->planning as $planning) { title: '{{$planning->title}}', start: '{{$planning->start}}', end : '{{$planning->end}}', }, @endforeach ] }); });

1 réponse

Maenhyr, il y a 9 ans

Bonjour,

c'est normal, que ta variable soit nulle lors du if. Si on transcrit le code en Français, tu dis.
1) Définis une variable title avec la valeur nulle.
2) Quand le modal est prêt, title doit avoir la valeur de l'input avec le name title.
3) Est ce que ma variable est définie ?

Le problème c'est que ton point 2 se fait APRES ton point 3.

Pour corriger ca, il te faut mettre tout le code dans ton complete.