Add support for jQuery NoConflict mode

Oct 9, 2012 at 2:13 PM
Edited Oct 9, 2012 at 2:15 PM

Hi Marc,

As requested by you I'm continuing the discussion made on your blog here on CodePlex:

Yesterday I tried for some time to get SPServices working, but I couldn’t. Then I remembered the environment I worked in had enabled the NoConflict mode of jQuery by calling jQuery.noConflict(). If you do this, then you can no longer call jQuery using the $-sign. Your SPServices doesn’t seem to be prepared to deal with this. I had to manually edit the SPServices source code to get it to work.

I applied these manual edits to the SPServices 0.7.2 source code files:

  • For the regular SPServices source file I did a global replace of the string "$(" with "jQuery(".
  • For the minified version I did a global replace of the string "V(" (case-sensitive!) with "jQuery(".

It would be great if SPServices could be switched to NoConflict-compatibility mode. Maybe even let it auto-detect if jQuery was put into that mode.

Greetings,

Leon Zandman

Oct 9, 2012 at 4:01 PM

That's interesting... the SPServices plugin is setup to use a $ as a local variable, (as in (function($){    })(jQuery) ), so it should work...  and that approach matches the best practices put forward by jQuery: http://docs.jquery.com/Plugins/Authoring

Leon: Are you sure it was SPServices?

Oct 9, 2012 at 6:27 PM

I didn't know that construct. It looks like SPServices should work in NoConflict mode. However, yesterday I removed our call to jQuery.noConflict() and the library worked. When I re-inserted the noConflict() call SPServices calls gave me an error. Let me test it some more.

Oct 9, 2012 at 6:54 PM
Edited Oct 9, 2012 at 6:58 PM

So I did some simple testing. Not in our SharePoint environment, but on my local disk. I created a folder, added the latest jQuery and SPServices JavaScript files and created a HTML file containing the following code:

<html>
	<head>
		<title>SPServices Test</title>
	</head>
	<body>
		<script type="text/javascript" src="jquery-1.8.2.js"></script>

        <script type="text/javascript">
            jQuery.noConflict();        
        </script>

		<script type="text/javascript" src="jquery.SPServices-0.7.2.js"></script>

        <script type="text/javascript">
            jQuery(document).ready(function () {

                alert($().SPServices.Version());

            });
        </script>
	</body>
</html>

If I open the HTML file, I get a JavaScript error on the line with the SPServices.Version() call, saying "Object doesn't support this property or method". When I comment out (or remove) the jQuery.noConflict() call everything works just fine. Am I missing something here?

Oct 9, 2012 at 9:08 PM

I didn't try your code, but I see an error. If you switch to non conflict mode, you need to write:

alert(jQuery().SPServices.Version());

This is independent from how SPServices works internally.

Oct 9, 2012 at 9:31 PM
Stingray:
Chris is correct... the no Conflict will remove $ from the global space... that action has not impact on the internals of SPServices because it has defined $ to be internally scoped and set to jQuery when it is called. Under a noConflict() environment, you need use jQuery to access SPServices methods.

so: function($){....
Defines $ to be an internal variable in SPServices.

then (function($)){...})(jQuery)
calls the anonymous function given it as its 1 parameter the jQuery variable which is assigned to $.

This is how variable scoping is done in javascript.

Hope this helps understand how its done.

_________
Paul T


Oct 10, 2012 at 1:23 AM

To add to what Chris and Paul have said, you really weren't far off from the mark to begin with.  If you modified your callback function that you pass into .ready(), you can scope the jQuery variable to whatever you'd like.  I created a fiddle to demonstrate:

http://jsfiddle.net/iOnline247/GZPdY/

Cheers,
Matt 

Coordinator
Oct 10, 2012 at 2:58 AM

Thanks for jumping in, Paul and Matt.

M.

Jul 31, 2013 at 12:32 PM
Hi Guys,

I am trying to use SPServices library with Nintex forms. I am referring the SPServices library reference in Nintex forms but when i open the SharePoint list form it gives me error "fn is null or not defined" for SPServices

Then i tested it for the normal SharePoint list form and the SPServices just works fine.

The nintex implements NWF$=jQuery.noConflict(true);

I am not sure whats the issue but SPServices are not working with Nintex forms.

Any help is really appreciated.

Thanks
Sanjay
Coordinator
Jul 31, 2013 at 10:06 PM
I haven't ever tried to use SPServices (or jQuery, for that matter) with Nintex forms. You may have found the issue in that Nintex is using .noConflict. However, if you are referencing jQuery yourself, you may be able to use SPServices anyway.

M.
Aug 19, 2013 at 11:46 AM
Edited Aug 19, 2013 at 11:46 AM