JavaScript runtime error: Object doesn't support property or method 'sooperfish'

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

Question

I'm using a asp.net to generate some html code for a page the uses two jQuery libraries one for the navigation in the master page and another in another for the calendar when ever I load the page I get this error in the visual studio

JavaScript runtime error: Object doesn't support property or method 'sooperfish'

I suspect there's some conflict between the versions that the two jQuerys use but I'm not sure and I don't know how to fix this anyway

Here's the code that is generated by my function:

<head>
  <title></title>
  <link id="Link1"
        type="text/css"
        rel="stylesheet"
        href="/MTI_Website/styles/Master.css"/>

  <link id="Link2"
        rel="stylesheet"
        type="text/css"
        href="/MTI_Website/styles/sooperfish.css"
        media="screen"/>

  <link id="Link3"
        rel="stylesheet"
        type="text/css"
        href="/MTI_Website/styles/sooperfish-theme-large.css"
        media="screen"/>

  <script type="text/javascript"
          src="/MTI_Website/scripts/jquery-1.9.0.min.js"></script>

  <script type="text/javascript"
          src="/MTI_Website/scripts/jquery.easing-sooper.js"></script>

  <script type="text/javascript"
          src="/MTI_Website/scripts/jquery.sooperfish.js"></script>

  <script type="text/javascript">
    $(document).ready(function () {
      $('ul.sf-menu').sooperfish();
    });
  </script>

  <link href="../../styles/fullcalendar.css"
        rel='stylesheet' />

  <link href="../../styles/fullcalendar.print.css"
        rel='stylesheet'
        media='print' />

  <script src="../../scripts/jquery.min.js"></script>
  <script src="../../scripts/jquery-ui.custom.min.js"></script>
  <script src="../../scripts/fullcalendar.min.js"></script>
  <script>
    $(document).ready(function() {
      var date = new Date();
      var d = date.getDate();
      var m = date.getMonth();
      var y = date.getFullYear();

      $('#calendar').fullCalendar({
        editable: false,
        events: [
          { 
            id: 1,title: 'Midterm Exams',
            start: '5/4/2014 12:00:00 AM',
            end: '5/6/2014 12:00:00 AM',
            url: '/MTI_Website/apps/calendar/Calender.aspx?ID=1'
          },
          {
            id: 2,
            title: 'Final Exams',
            start: '3/12/2014 12:00:00 AM',
            end: '3/13/2014 12:00:00 AM',
            url: '/MTI_Website/apps/calendar/Calender.aspx?ID=2'
          },{
            id: 3,
            title: 'Registration',
            start: '3/7/2014 12:00:00 AM',
            end: '3/9/2014 12:00:00 AM',
            url: '/MTI_Website/apps/calendar/Calender.aspx?ID=3'
          }
        ]
      });
    });
  </script>
</head>
Was it helpful?

Solution 2

What solved it was omitting the inclusion of the the jQuery in the calendar block.

Thank you, @minitech!

OTHER TIPS

You're loading scripts in the wrong order. Try moving that script block AND the sooperfish reference to a positon after your jQuery reference, i.e.: -

<script src="../../scripts/jquery.min.js"></script>
<script src="../../scripts/jquery-ui.custom.min.js"></script>
<script src="../../scripts/fullcalendar.min.js"></script>

<script type="text/javascript" src="/MTI_Website/scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="/MTI_Website/scripts/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="/MTI_Website/scripts/jquery.sooperfish.js"></script>

<script type="text/javascript">
        $(document).ready(function () {
            $('ul.sf-menu').sooperfish();
        });
</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top