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

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

  •  27-10-2019
  •  | 
  •  

Question

Im trying to use the movingBoxes plugin with my asp.net mvc site and it is not working (obviously). I have the movingboxes.js imported in my head tag in the site.master like so

    <script src="<%: Url.Content("~/Scripts/jquery.movingboxes.js")%>" type="text/javascript"></script>

and the browser successfully gets this script. Now i have a regular view that inherits from the site.master that has this little bit of jquery in it that calls the movingBoxes plugin

<script type="text/javascript">
    $(document).ready(function () {
        $($('#slider-one'));
        $('#slider-one').movingBoxes({
            startPanel: 1,      
            panelWidth: .5,     
            fixedHeight: false
        });

        $('#slider-two').movingBoxes({
            startPanel: 1,     
            panelWidth: .5,     
            fixedHeight: false
        });
    });
</script>

When i view the page. Every thing works fine (including other jquery stuff) except for this plugin and i get this error

enter image description here

And here is the description of the error enter image description here

Any help would be appreciated

EDIT

So apparently I had this: 

    <script type="text/javascript" src="../../Scripts/jquery-1.4.1.js" />
    <script src="<%: Url.Content("~/Scripts/jquery.movingboxes.js")%>" type="text/javascript"></script>

And it works now by changing it to this: 

    <script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.movingboxes.js")%>" type="text/javascript"></script>
Was it helpful?

Solution

There are a few things you can try to get this working.

  1. Be ABSOLUTELY sure your script is being pulled into the page, one way to check is by using the 'sources' tab in the Chrome Debugger and searching for the file.

  2. Be sure that you've included the script after you've included jQuery, as it is most certainly dependant upon that.

Other than that, I checked out the API and you're definitely doing everything right as far as I can see. Best of luck friend!

EDIT: Ensure you close your script tag. There's an answer below that points to that being the solution.

OTHER TIPS

Please keep in mind that only a few elements can be self-closing, most others have to be closed through adding an explicit end tag. In the above case, the first script tag was not closed properly, the end script tag of the second script then closed the script section, causing only the first script to be loaded as external script source and ignoring the second script.

More info about which tags can be self-closed, have a look at the W3C drafts for HTML5 (although the definition was no different in earlier HTML-versions):

http://www.w3.org/TR/html5/syntax.html#end-tags (8.1.2.1, Point 6)

I just had this same problem with the jquery Responsive Slides plugin (http://responsive-slides.viljamis.com/).

I fixed it by not using the jQuery short version $(".rslides").responsiveSlides(.. but rather the long version: jQuery(".rslides").responsiveSlides(...

So switching $ to jQuery so as not to cause conflict or using the proper jQuery no conflict mode (http://api.jquery.com/jQuery.noConflict/)

I had the same problem. I changed the order of the scripts in the head part, and it worked for me. Every script the plugin needs - needs to stay close.

For example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {
    $('#slider').cycle({
            fx: 'fade' 
        });
    });
</script>

When I had this problem it was because I was trying to use an actual function in place of an anonymous function.

Incorrect:

$(document).on('change', "#MyId", MyFunction());

Correct

$(document).on('change', "#MyId", MyFunction);

or also correct and if you need to pass event object or other params.

$(document).on('change', "#MyId", function(e) { MyFunction(e); });

Actually i think that you have downloaded just a part of the script. Try to check 'Core' checkbox before download the whole script in jquery site.

i had the same problem i had linked jquery twice . The later version was overwriting my plugin.

I just removed the later jquery it started working.

I had a such problem too because i was using IMG tag and UL tag.

Try to apply the 'corners' plugin to elements such as $('#mydiv').corner(), $('#myspan').corner(), $('#myp').corner() but NOT for $('#img').corner()! This rule is related with adding child DIVs into specified element for emulation round-corner effect. As we know IMG element couldn't have any child elements.

I've solved this by wrapping a needed element within the div and changing IMG to DIV with background: CSS property.

Good luck!

It's also a good idea to make sure you're using the correct version of jQuery. I had recently acquired a project using jQuery 1.6.2 that wasn't working with the hoverIntent plugin. Upgrading it to the most recent version fixed that for me.

I found that I was using a selector for my rendorTo div that I was using to render my column highcharts graph. Apparently it adds the selector for you so you just need to pass id.

renderTo: $('#myGraphDiv') to a string 'myGraphDiv' this fixed the error hope this helps someone else out as well.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top