Modal Bootstrap refreshing data FullCalendar-CodePudding

So I can see the info of a user in a FullCalendar that is opened in a modal but when I try to open another the modal it doesn`t refresh. I tried all the solutions I found here on Stackoverflow but it didn't work. If I refresh the page then it works if I click in a diferent id.

Code where I bring the id of user to my function cale():

<button id="cal" onclick="cale('.$row["idutilizador"].')  data-toggle="modal" href="#calendario"><i ></i></button>

My calendar modal Bootstrap:

<div  id="calendario" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div  role="document">
    <div >
      <div >
        <h5  id="exampleModalLabel">Calendario</h5>
        <button type="button"  data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div >
        <br />
        <h2 align="center"><a href="#">Calendario</a></h2>
        <br />
        <div >
          <div id="calendar"></div>
        </div>
      </div>
    </div>
  </div>
</div>

My function that loads the information from database with the id I got when I click:

function cale(uti){
    var calendar = $('#calendar').fullCalendar({
        editable:true,
        header:{
            left:'prev,next today',
            center:'title',
            right:'month,agendaWeek,agendaDay'
        },
        events: {    
            url:'../Components/calendar/load.php',
            type: 'POST',
            data: function() { 
                return {
                    id: uti      
                };    
            }
        },
        ...

CodePudding user response：

Your code currently reinitialises the calendar every time you click a button. You should only initialise the calendar once, and then change the data it displays. To do that, you need to first remove the previous event source, add the new one, and then get the new events.

A suggestion: convention is that POST is for changing data (eg making a purchase, updating a record), while GET is for reading data. Here your event source is just loading event data to display, that really should be a GET request. Changing that also makes the code a bit simpler. I've changed to GET here, if you want to do this you need to change your PHP to respond to GET instead of POST.

Another suggestion: AFAICT you are using multiple non-unique HTML IDs on the same page. Your code suggests that the button is inside a loop, so you have buttons for multiple users, but your buttons all have the same ID:

<button id="cal" ...

The code you've shown does not use that ID, but if you try to, it won't work. IDs must be unique, if they are not and you try to use them, only the first one will work.

So, restructuring your code a bit, so that we initialise the calendar just once, on page load, and use GET to load events:

var calendar = $('#calendar').fullCalendar({
    editable:true,
    header:{
        left:'prev,next today',
        center:'title',
        right:'month,agendaWeek,agendaDay'
    },
    // no events initially
};

// The base URL where your events are
var sourceURL = '../Components/calendar/load.php';

function cale(uti) {
    // First get the current event sources
    // https://fullcalendar.io/docs/Calendar-getEventSources
    var events = calendar.getEventSources();

    // Now remove that event source.  Note the first time through there
    // are no events, I'm not sure if FullCalendar will throw an error
    // in that case ... to be safe I'm testing if events exists before
    // trying to remove them.
    // https://fullcalendar.io/docs/EventSource-remove
    if (events instanceof Array) {
        events.remove();
    }

    // Now add your new source, generating the URL from the new ID -
    // note this will use a GET request to retrieve events.  The new
    // events will be immediately fetched and displayed.
    // https://fullcalendar.io/docs/Calendar-addEventSource
    calendar.addEventSource(sourceURL   '?id='   uti);
}

Another suggestion: it is generally considered best to separate your JS and your HTML, so instead of using inline onclick, use a separate event handler. You'll need to add the user ID to the button somehow, maybe with a data attribute:

<button data-id="' . $row["idutilizador"] . '" ...

And then instead of onclick() on that button, add an event handler in your JS:

$('button').on('click', function(e) {
    // Prevent any default action the button click might normally
    // do, eg submit a form or something.
    e.preventDefault();

    // Find the ID of the clicked button
    var userID = $(this).data('id');

    // Now call the calendar function with that ID
    cale(userID);
});

CodePudding user response：

Try to empty first the div

$('#calendar').html('');

obviously first of

var calendar = $('#calendar').fullCalendar({...