Uncaught TypeError: Object #

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>

I don't see anything wrong (except I don't know what's ` $($('#slider-one'));` hanging out there at the top). Maybe check if the file is included correctly. — Haochi, Mar 18 '11 at 17:53
Could you confirm that the jQuery javascript file is loaded before the "movingboxes" one? If they are in the wrong sequence you'll get something like the error you are seeing. — Neil, Mar 18 '11 at 17:58
He previously had an alert set up with $('#slider-one') inside of it, this is where the hanging selector at the top comes from. — Hacknightly, Mar 18 '11 at 18:03
@Neil your suggestion helped me with some scripts not working later on. Thanks — Collin O'Connor, Mar 19 '11 at 01:56

score 40 · Accepted Answer · edited Dec 14 '12 at 17:06

40

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

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.
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.

edited Dec 14 '12 at 17:06

Andy

28,217
5
75
86

answered Mar 18 '11 at 18:02

Hacknightly

4,929
1
24
27

3

thx a lot man.... i was looking for this long time... finally the result is that the ordering of the javascript file ...thx again – patel.milanb Jun 27 '12 at 12:19
1

This didn't work because of the missing closing tag.. please mod up the correct answer below from SaschaM78 – John Hunt Nov 15 '12 at 10:54
9

I'd also say: be sure you don't accidentally include jQuery multiple times, otherwise the second import might wipe out plugins already imported. – pseudosudo Feb 14 '13 at 21:07

score 14 · Answer 2 · edited Feb 18 '14 at 02:36

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)

score 4 · Answer 3 · answered Apr 24 '12 at 16:04

4

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/)

answered Apr 24 '12 at 16:04

racl101

2,892
4
32
31

Thanks, I was having the same issue with responsive slides as well. – David Taiaroa Jun 24 '13 at 15:44

score 4 · Answer 4 · edited Feb 19 '13 at 14:50

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>

Valamas · Answer 5 · 2012-07-11T23:09:53.297

2

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); });

edited Jul 11 '12 at 23:09

answered Jul 04 '12 at 03:15

Valamas

22,332
24
97
172

1

I believe in JavaScript you can still go directly to MyFunction without wrapping it an anonymous function, just remove the paranthesis like so: $(document).on('change', "#MyId", MyFunction); – Joshua Jul 11 '12 at 14:50
thank you very much for mentioning this! I have updated the answer and refactored the project I am working on. – Valamas Jul 11 '12 at 23:08

Serhii Matrunchyk · Answer 6 · 2016-02-10T18:00:52.957

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!

score 1 · Answer 7 · answered Jul 20 '12 at 04:00

1

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.

answered Jul 20 '12 at 04:00

Victor Augusto

2,228
21
20

score 1 · Answer 8 · answered Jul 05 '13 at 06:09

1

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.

answered Jul 05 '13 at 06:09

Aakash Agrawal

79
4

I accidentally made this mistake too – Mike Causer Aug 03 '14 at 23:49

score 0 · Answer 9 · answered Apr 26 '13 at 03:32

0

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.

answered Apr 26 '13 at 03:32

Rob Erskine

911
2
10
25

score 0 · Answer 10 · answered Jun 04 '13 at 14:20

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.

Uncaught TypeError: Object #

10 Answers10

Linked