Object #<Object> has no method 'dialog' Using jquery and full calendar

StackOverflow https://stackoverflow.com/questions/22512884

  •  17-06-2023
  •  | 
  •  

Question

Hello Im trying to use modal dialog while use full calendar.

My problem is that I get this error when trying to set dialog:

Uncaught TypeError: Object #<Object> has no method 'dialog'

<script>

    $(document).ready(function() {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: true,

        events:
        {
        url: 'testEvents.php',
        type: 'POST',
        data:
        {


        },
        success: function(reply) {
            console.log(reply);
        },
        error: function() {
            alert('there was an error while fetching events!');
        },
        color: 'yellow',   // a non-ajax option
        textColor: 'black', // a non-ajax option
        allDayDefault: false        
        }
        ,
        eventClick: function(calEvent, jsEvent, view) {

        //alert('Event: ' + calEvent.title);

        $("#myModal").dialog({modal: true});

        }

        });


    });

</script>

And in the HTML section:

<body>
<div id='calendar'></div>

<div id="myModal" hidden="true">

Class name:
<br>
<input type="text" id="searchByFirstName">
<br>
Time: 
<br>
<input type="text" id="searchByFirstName">

</div>


</body>

I have read that its something with the jquery import but I dont see where my problem is

My imports:

<script src="//code.jquery.com/jquery-1.9.1.js"></script>

<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='jquery.min.js'></script>
<script src='jquery-ui.custom.min.js'></script>
<script src='fullcalendar.min.js'></script>
Was it helpful?

Solution

You only need to include jQuery once as well as there's probably something wrong with your custom jQuery UI, try to use following links like this:

<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src='fullcalendar.min.js'></script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top