s2Member Breaks Jquery Plugin

[JayUK91]

Hi guys,

Firstly, great job on creating such an awesome membership plugin. I've hardly delved into what s2Member can do, but i'm very impressed so far - even just using the free framework!

Now, I have an issue with s2Member seemingly breaking a Jquery plugin I have installed on my clients site. The plugin in question is the Yoxview Image Viewer http://www.yoxigen.com/yoxview/Default.aspx. On the surface, everything seems to load fine - but as soon as you click an image that Yoxview is linked to, the Jquery effects do not work.

I have isolated s2Member as the cause of this breakage by enabling and disabling it in the WP Admin. My client's website is not yet live so i'd rather not post the URL in public to avoid early detection from spiders and premature appearance in the SERP's - I could PM it to anybody though if necessary.

I'd really appreciate any suggestions on how to fix this

Jay

[wayne]

I have a similar problem, im using jquery tools, which uses flowplayer, tooltips and scroll (not at once) it all works fine but as soon as im logged into the account the tooltips nor overlay work, however the scroll does? I have also stripped my plugins to drill down what it may be. I have registered the scripts also.

ps great plugin, will be upgrading shortly.

[damron]

JayUK91:
Sorry if this is obvious, but usually when I have jquery failures it's because the library is being included more than once. You mentioned using a jquery plugin; are you including it and the jquery libary with enqueue_scripts to avoid multiple loads?

BTW, Firebug is a great tool for tracking down javascript problems.

[JayUK91]

Thanks for the assistance damron, but unless s2Member itself is somehow including another Jquery library, then I'm certain that just one is being used. The Yoxview plugin was working fine until s2Member was activated, and it continues to run fine if s2Member is deactivated.

I haven't used the enqueue script as everything was working just fine upon initial install of the Jquery plugin.

I'm stumped. Any other suggestions would help a bunch!

[JayUK91]

Bumpety bump!

[damron]

The problem can happen if a plugin is loading jquery manually. The plugin might work fine until you enable another, but it's actually the first one that causing the problem.

To check, view the source of your page and search for ".js" If jquery.js is included more than once, then this could be it.

Is FireBug reporting any script errors?

[JayUK91]

Thanks again damron, much appreciated.

I think I may have found the issue after delving into the code of every javascript file on the site. By default, my installation of Wordpress automatically includes JQuery 1.6.1. However, one of the js files of the Yoxview plugin also includes another copy of the 1.6.1 JQuery library.

The code for the js file is written below, with the offending JQuery include being:

LoadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js");

Code: Select all

var yoxviewPath = getYoxviewPath();
var cssLink = top.document.createElement("link");
cssLink.setAttribute("rel", "Stylesheet");
cssLink.setAttribute("type", "text/css");
cssLink.setAttribute("href", yoxviewPath + "yoxview.css");
top.document.getElementsByTagName("head")[0].appendChild(cssLink);

function LoadScript(url)
{
   document.write( '<scr' + 'ipt type="text/javascript" src="' + url + '"><\/scr' + 'ipt>' ) ;
}

var jQueryIsLoaded = typeof jQuery != "undefined";

if (!jQueryIsLoaded)
    LoadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js");
   
LoadScript(yoxviewPath + "jquery.yoxview-2.21.min.js");

function getYoxviewPath()
{
    var scripts = document.getElementsByTagName("script");
    var regex = /(.*\/)yoxview-init/i;
    for(var i=0; i<scripts.length; i++)
    {
        var currentScriptSrc = scripts[i].src;
        if (currentScriptSrc.match(regex))
            return currentScriptSrc.match(regex)[1];
    }
   
    return null;
}
// Remove the next line's comment to apply yoxview without knowing jQuery to all containers with class 'yoxview':
//LoadScript(yoxviewPath + "yoxview-nojquery.js");


I'm not too experienced when it comes to editing js files, so does anybody have an idea how I can safely remove this inclusion of the JQuery library without breaking anything? I have tried simply commenting out the offending line of code, but this did not work.

I know this isn't necessarily an s2Member issue, but any help here would be appreciated!

Jay

[squibs]

If jquery is already being loaded, then the code you quoted is doing something wrong where it checks to see if jQuery is already loaded, and if not then loading a copy. I'd guess that commenting out these two lines:

Code: Select all

if (!jQueryIsLoaded)
    LoadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js");

might get it working.

[JayUK91]

If jquery is already being loaded, then the code you quoted is doing something wrong where it checks to see if jQuery is already loaded, and if not then loading a copy. I'd guess that commenting out these two lines:

Code: Select all

if (!jQueryIsLoaded)
    LoadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js");

might get it working.

Thanks for the help. I've already tried commenting out any obvious lines of code, but nothing still seems to work.

[JayUK91]

SUCCESS!

(Well, sort of...)

Thanks to this article: http://elementdesignllc.com/2009/08/wordpress-jquery-is-not-a-function/, the core functionality of my jQuery plugin is now working! So, it looks like it was just a rookie coding mistake on my behalf.

I now have an issue of my content that I have referenced within the jQuery plugin not loading correctly. I'm sure this is another mistake of my doing somewhere along the line though.

However, once again if I disable the s2Member plugin (and also the Sidebar Login Widget http://wordpress.org/extend/plugins/sidebar-login/) then everything works perfectly - so there's definitely still some plugin conflicts somewhere...just a case of now digging them out and rectifying them!

[wayne]

Hi everyone again, im still having issues with my jquery, (flowplayer and overlay) when im logged into my buddypress site, i cant see any duplicate scripts, the only thing i get when i debug in firebug is "#overlay1" (the name of my hidden div) cant be found, i do however get
Use of attributes' nodeName attribute is deprecated. Use name instead.
Use of attributes' nodeValue attribute is deprecated. Use value instead.
Do you think this could be breaking it? my script that call the jquery tools is this.
But my main concern is the overlay, any ideas?

Thanks inadvance

Code: Select all

<script>
jQuery(document).ready(function($) {
   
   
   // initialize tooltip
$(".tips img").tooltip({

   // tweak the position
   offset: [10, 2],

   // use the "slide" effect
   effect: 'slide'

// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } });

//set up scroller   
$(".scrollable").scrollable();

   // setup overlay actions to buttons
   $("button[rel]").overlay({

      // use the Apple effect for overlay
      effect: 'apple',      
      
      expose: '#111',            
      
      onLoad: function(content) {
         // find the player contained inside this overlay and load it
         this.getOverlay().find("a.player").flowplayer(0).load();
      },
      
      onClose: function(content) {
         $f().unload();
      }
   });            
   
   // install flowplayers
   $("a.player").flowplayer("http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");

});   


</script>