'FullCalendar problem when on Click function

I'm having a problem when I change from $(document).ready(function() to .click(function() because I want it to not start when I open the page but when I click on a button.

Uncaught TypeError: $(...).fullCalendar is not a function

 $( "#cal" ).click(function() { //when i change this to load automatically
 with a refresh page it works without a problem - $(document).ready(function()
    
       var utilizador =1;
       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: utilizador
                    };
                }
        },

....

I don't know if it's important or not but that #cal opens a modal.

The Script src I'm using

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js">
</script>
jqueryfullcalendar


Solution 1:[1]

Probably this is happening because your script registers the click event first, with all the code inside it, which still doesn't have the modal that you are calling, therefore that's what was making it work before.

So I think in order for it to work, you have several solutions, "check" the order of the scripts, might be that one is behind the other, or later than the other. If it can't change the order on which the scripts are set in the code, you can also use

$(document).on('click', '#cal', function(){
     //your code
});

Because that selector is normally used when there are other HTML elements rendered as well that weren't load at first, if you insert more random HTML elements for example in the page, it needs that type of selector.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Leo

Related Questions