jQuery Error Claims jQuery Plugin Function "is not a function".

Question

Hi Folks

I'm using a jQuery.Center() plugin that I found at Andreas Lagerkvist's website.

I have a control on the page called "divClipboard" that I want to appear in the middle of the screen when the user clicks a link.

I call the function

$('#divClipboard').center();

and it throws an error, the message being

$("#divClipboard").center is not a function

I think it's worth mentioning that I've tried specifying

jQuery.noConflict();
jQuery('#divClipboard').center();

and I've also renamed center() to centerElement() to no avail.

Our setup has 2 sites pointing at the same virtual directory, each accessed by a different URL. This plugin has always worked for me, until yesterday on one site (it even works on the other site on the same virtual directory).

Does anyone have any idea what could be wrong?

Thanks

Dave

Answer 1

Have you made sure that jQuery is loaded and then the plugin? Make sure also that your .center() call is in a jQuery loaded wrapper function

jQuery(function(){
  jQuery('#myClickableElement').click(function(){
    jQuery('#divClipboard').center();
  });
});

Answer 2

It turns out that the reason this was happening is because (as I've mentioned), we have 2 sites, and each site has slightly different content.

Site A works fine, but Site B is broken. This is because Site A uses a wrapper that doesn't have a reference to a jQuery file. Site B does have a reference. So, because I kept my center() code in the our jquery file, and Site B's wrapper also provided jQuery code, my jQuery code never got referenced.

The solution? put my center() pluggin in its own file!