jQuery plugin - Conflict with prototype.js

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

jQuery plugin - Conflict with prototype.js

Ruben M.
Hello XWiki team & users,

First of all thanks a lot for your great work.

I’ve set up XWiki as an intranet website (version 5.2.1).
Currenty I’m trying to customize it with some javascript to make life easier for the users.

I experimented a bit with jQuery (as I have a bit of experience with it) and have successfully integrated it into a test page via the jQuery Helpers Extension (http://extensions.xwiki.org/xwiki/bin/view/Extension/jQuery+Helpers)
Now I want to include a jQuery Plugin which extends the jQuery functions. I’d like to try out the live tiles in Windows 8 style from Drew Greenwell (http://www.drewgreenwell.com/projects/metrojs).

It’s no big deal to get the liveTiles working - On a local webserver without Xwiki.
Here’s the problem: The functions from metrojs seem to collide with prototype.js. I experimented a bit with jQuerynoConflict(); , I tried to rename the functions inside metroJS.js, but nothing worked so far.
Firebug says ‘$ele.attr is not a function’ inside the metrojs-Code in the console, which I believe is a problem with prototype.js. (See for the XWiki test page code at the end of the mail – I won’t post the whole MetroJS-Code here, it’s a little big).

My questions are:
a) Is there a possibility to deactivate / rename / “defuse” prototype.js, or to listen for another shortcut than $ on this page (something like prototypeNoConflict();) ?
b) Has anyone of you any experience with jQuery plugins (or even better, Metrojs!) in XWiki and maybe a hint?
c) Is there a possibility of producing some kind of “liveTiles” with prototype.js (which I’m not very experienced with)

I know it’s more of a javascript-related question, so thanks a lot for reading this anyway.

Regards
Ruben

#################

Here’s the current code of my test page (ADMIN is the test space):

{{velocity}}
$xwiki.jsx.use("jQuery.jQuery", {'defer': false})
$xwiki.jsx.use("ADMIN.MetroJS")
$xwiki.ssx.use("ADMIN.MetroCSS")
{{/velocity}}


{{html}}

Carousel Mode: Simple

<div class="red">
    <div id="tile1" data-mode="carousel" data-start-now="true" class="live-tile" data-direction="horizontal" data-delay="3000">       
        <div>1</div>
        <div>2</div>
        <div class="accent emerald"><p class="metroExtraLarge">2 and a half</p></div>
        <div>3</div>
        <div>4</div>
    </div>
</div>

<script type="text/javascript"> jQuery(document).ready(function() { jQuery("#tile1").liveTile(); }); </script>   
{{/html}}

Reply | Threaded
Open this post in threaded view
|

Re: jQuery plugin - Conflict with prototype.js

Caleb James DeLisle-2
Hi Ruben,

On 12/04/2013 12:10 PM, Ruben M. wrote:

> Hello XWiki team & users,
>
> First of all thanks a lot for your great work.
>
> I’ve set up XWiki as an intranet website (version 5.2.1).
> Currenty I’m trying to customize it with some javascript to make life easier
> for the users.
>
> I experimented a bit with jQuery (as I have a bit of experience with it) and
> have successfully integrated it into a test page via the jQuery Helpers
> Extension
> (http://extensions.xwiki.org/xwiki/bin/view/Extension/jQuery+Helpers)
> Now I want to include a jQuery Plugin which extends the jQuery functions.
> I’d like to try out the live tiles in Windows 8 style from Drew Greenwell
> (http://www.drewgreenwell.com/projects/metrojs).
>
> It’s no big deal to get the liveTiles working - On a local webserver without
> Xwiki.
> Here’s the problem: The functions from metrojs seem to collide with
> prototype.js. I experimented a bit with jQuerynoConflict(); , I tried to
> rename the functions inside metroJS.js, but nothing worked so far.
> Firebug says ‘$ele.attr is not a function’ inside the metrojs-Code in the
> console, which I believe is a problem with prototype.js. (See for the XWiki
> test page code at the end of the mail – I won’t post the whole MetroJS-Code
> here, it’s a little big).
>
> My questions are:
> a) Is there a possibility to deactivate / rename / “defuse” prototype.js, or
> to listen for another shortcut than $ on this page (something like
> prototypeNoConflict();) ?


No, prototype is not really able to do this and much of XWiki and extension js
depends on $ being bound to prototype.


> b) Has anyone of you any experience with jQuery plugins (or even better,
> Metrojs!) in XWiki and maybe a hint?


I have experience with jquery, as of XWiki 5.2 you can access that using requirejs.
require(['jquery'], function ($) {   $('#xwikicontent').append('<p>hello world</p>') });

I recommend wrapping metrojs in a similar function to avoid conflicts while
still giving it access to jquery as it requires.


> c) Is there a possibility of producing some kind of “liveTiles” with
> prototype.js (which I’m not very experienced with)

prototype is (gingerly) moving toward retirement and the best support will
always be found in the jQuery world.
http://sstephenson.us/posts/you-are-not-your-code


Thanks,
Caleb


>
> I know it’s more of a javascript-related question, so thanks a lot for
> reading this anyway.
>
> Regards
> Ruben
>
> #################
>
> Here’s the current code of my test page (ADMIN is the test space):
>
> {{velocity}}
> $xwiki.jsx.use("jQuery.jQuery", {'defer': false})
> $xwiki.jsx.use("ADMIN.MetroJS")
> $xwiki.ssx.use("ADMIN.MetroCSS")
> {{/velocity}}
>
>
> {{html}}
> Carousel Mode: Simple
>
> <div class="red">
>     <div id="tile1" data-mode="carousel" data-start-now="true"
> class="live-tile" data-direction="horizontal" data-delay="3000">        
>         <div> <http://www.drewgreenwell.com/images/sample/1tw.gif> </div>
>         <div> <http://www.drewgreenwell.com/images/sample/2tw.gif> </div>
>         <div class="accent emerald"><p class="metroExtraLarge">2 and a
> half</p></div>
>         <div> <http://www.drewgreenwell.com/images/sample/3tw.gif> </div>
>         <div> <http://www.drewgreenwell.com/images/sample/4tw.gif> </div>
>     </div>
> </div>
>
>
>    
> {{/html}}
>
>
>
>
>
> --
> View this message in context: http://xwiki.475771.n2.nabble.com/jQuery-plugin-Conflict-with-prototype-js-tp7588243.html
> Sent from the XWiki- Users mailing list archive at Nabble.com.
> _______________________________________________
> users mailing list
> [hidden email]
> http://lists.xwiki.org/mailman/listinfo/users
>
_______________________________________________
users mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/users
Reply | Threaded
Open this post in threaded view
|

Re: jQuery plugin - Conflict with prototype.js

Ruben M.
Hi Caleb,

Thanks for your quick answer.

Thanks for your hint with require.js, it seems to be an interesting concept, though it might be beyond my js-skills :-) But i think i'll give it a try.

I found the following code at stackoverflow:

(function (factory) {
if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
} else {
    // Browser globals
    factory(jQuery);
}
}(function ($) {

    $.fn.jqueryPlugin = function () {
        // Put your plugin code here
    };  

}));

Is it enough to create a js-File like that and register it in the javascript.vm under 'paths:', or do i have to change more things in that file or somewhere else? (produced errors so far...)
I found something about jquery in the require.js in the js-folder.

Regards,
Ruben



Reply | Threaded
Open this post in threaded view
|

Re: jQuery plugin - Conflict with prototype.js

vmassol
Administrator
BTW might be a good time to document the requirejs feature in XWiki Caleb? (You forgot to do so when you introduced it, you only added it in the release notes but not in the documentation) :)

Thanks
-Vincent

On 4 Dec 2013 at 17:33:08, Ruben M. ([hidden email]) wrote:

Hi Caleb,

Thanks for your quick answer.

Thanks for your hint with require.js, it seems to be an interesting concept,
though it might be beyond my js-skills :-) But i think i'll give it a try.

I found the following code at stackoverflow:

(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {

$.fn.jqueryPlugin = function () {
// Put your plugin code here
};

}));

Is it enough to create a js-File like that and register it in the
javascript.vm under 'paths:', or do i have to change more things in that
file or somewhere else? (produced errors so far...)
I found something about jquery in the require.js in the js-folder.

Regards,
Ruben



_______________________________________________
users mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/users
Reply | Threaded
Open this post in threaded view
|

Re: jQuery plugin - Conflict with prototype.js

Caleb James DeLisle-2
Actually IIRC you reminded me that I has not documented it and I decided
to put off documenting it because it was new and might change/break
(which it did in 5.1). Now I think you're right and we have reached a
point where it is safe for people to begin using it so I will write some
documentation on it.

Thanks,
Caleb


On 12/04/2013 05:51 PM, [hidden email] wrote:

> BTW might be a good time to document the requirejs feature in XWiki Caleb? (You forgot to do so when you introduced it, you only added it in the release notes but not in the documentation) :)
>
> Thanks
> -Vincent
>
> On 4 Dec 2013 at 17:33:08, Ruben M. ([hidden email]) wrote:
>
> Hi Caleb,
>
> Thanks for your quick answer.
>
> Thanks for your hint with require.js, it seems to be an interesting concept,
> though it might be beyond my js-skills :-) But i think i'll give it a try.
>
> I found the following code at stackoverflow:
>
> (function (factory) {
> if (typeof define === 'function' && define.amd) {
> // AMD. Register as an anonymous module.
> define(['jquery'], factory);
> } else {
> // Browser globals
> factory(jQuery);
> }
> }(function ($) {
>
> $.fn.jqueryPlugin = function () {
> // Put your plugin code here
> };
>
> }));
>
> Is it enough to create a js-File like that and register it in the
> javascript.vm under 'paths:', or do i have to change more things in that
> file or somewhere else? (produced errors so far...)
> I found something about jquery in the require.js in the js-folder.
>
> Regards,
> Ruben
>
>
>
> _______________________________________________
> users mailing list
> [hidden email]
> http://lists.xwiki.org/mailman/listinfo/users
>
_______________________________________________
users mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/users
Reply | Threaded
Open this post in threaded view
|

Re: jQuery plugin - Conflict with prototype.js

Ruben M.
Hi Caleb,

After several tries i gave up on the requirejs-implementation in Xwiki. For me, it seems like jQuery plugins also use $ for their functions, but are not beeing connected to jQuery although inside the require-function. (in this case: "$(...).liveTile() is not a function.")

I saw your documentation on http://platform.xwiki.org/xwiki/bin/view/DevGuide/JavaScriptAPI, thanks for that. Do you (or anyone else) know a Xwiki-page where i can analyze a working jQuery plugin with $-functions?
I'm not sure about whether to use shim, map, registrating the metrojs as a module or none of that.

Thanks & regards
Ruben
Reply | Threaded
Open this post in threaded view
|

Re: jQuery plugin - Conflict with prototype.js

Caleb James DeLisle-2
Hi Ruben,

If you're wrapping the metrojs script in a
require(['jquery'], function($) { <all_metrojs_code_goes_here> })
call then I'm not sure there much else you can do other than manually searching
through metrojs and hunting down the places where it uses window.$ which
defeats the wrapper.

Sorry I couldn't bring better news.

Thanks,
Caleb


On 12/18/2013 02:24 PM, Ruben M. wrote:

> Hi Caleb,
>
> After several tries i gave up on the requirejs-implementation in Xwiki. For
> me, it seems like jQuery plugins also use $ for their functions, but are not
> beeing connected to jQuery although inside the require-function. (in this
> case: "$(...).liveTile() is not a function.")
>
> I saw your documentation on
> http://platform.xwiki.org/xwiki/bin/view/DevGuide/JavaScriptAPI, thanks for
> that. Do you (or anyone else) know a Xwiki-page where i can analyze a
> working jQuery plugin with $-functions?
> I'm not sure about whether to use shim, map, registrating the metrojs as a
> module or none of that.
>
> Thanks & regards
> Ruben
>
>
>
> --
> View this message in context: http://xwiki.475771.n2.nabble.com/jQuery-plugin-Conflict-with-prototype-js-tp7588243p7588424.html
> Sent from the XWiki- Users mailing list archive at Nabble.com.
> _______________________________________________
> users mailing list
> [hidden email]
> http://lists.xwiki.org/mailman/listinfo/users
>
_______________________________________________
users mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/users
Reply | Threaded
Open this post in threaded view
|

AW: jQuery plugin - Conflict with prototype.js

Ruben M.
This post was updated on .
Hi Caleb,

 

Finally some good news concerning require.js and my plugin. It is working although it's only possible when I include the metrojs-code in the page itself. (<script src="...">)
As soon as I refer to it as an extension inside XWiki(Velocity - JSX), I run into errors - I came to the conclusion that it has to be either a speed issue combined with the asyncronous loading that require.js does or related to the order in that XWiki handles velocity an on-page-scripts.


After that I tried to register it with require.js as a shim (seems to be a functionality to include dependent scripts like plugins), but no success so far.

 

I think I will stick with this solution until I either get used to require.js and shim or prototype gets retired J

 

Thanks a lot for your support!

 

Regards

Ruben

 

 

Von: Caleb James DeLisle-2 [via XWiki] [mailto:ml-node+s475771n7588425h12@n2.nabble.com]
Gesendet: Mittwoch, 18. Dezember 2013 17:32
An: Müller, Ruben
Betreff: Re: jQuery plugin - Conflict with prototype.js

 

Hi Ruben,

If you're wrapping the metrojs script in a
require(['jquery'], function($) { <all_metrojs_code_goes_here> })
call then I'm not sure there much else you can do other than manually searching
through metrojs and hunting down the places where it uses window.$ which
defeats the wrapper.

Sorry I couldn't bring better news.

Thanks,
Caleb


On 12/18/2013 02:24 PM, Ruben M. wrote:


> Hi Caleb,
>
> After several tries i gave up on the requirejs-implementation in Xwiki. For
> me, it seems like jQuery plugins also use $ for their functions, but are not
> beeing connected to jQuery although inside the require-function. (in this
> case: "$(...).liveTile() is not a function.")
>
> I saw your documentation on
> http://platform.xwiki.org/xwiki/bin/view/DevGuide/JavaScriptAPI, thanks for
> that. Do you (or anyone else) know a Xwiki-page where i can analyze a
> working jQuery plugin with $-functions?
> I'm not sure about whether to use shim, map, registrating the metrojs as a
> module or none of that.
>
> Thanks & regards
> Ruben
>
>
>
> --
> View this message in context: http://xwiki.475771.n2.nabble.com/jQuery-plugin-Conflict-with-prototype-js-tp7588243p7588424.html
> Sent from the XWiki- Users mailing list archive at Nabble.com.
>

_______________________________________________

> users mailing list
> [hidden email]
> http://lists.xwiki.org/mailman/listinfo/users
>

_______________________________________________
users mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/users



________________________________

If you reply to this email, your message will be added to the discussion below:

http://xwiki.475771.n2.nabble.com/jQuery-plugin-Conflict-with-prototype-js-tp7588243p7588425.html 

To unsubscribe from jQuery plugin - Conflict with prototype.js, click here <http://xwiki.475771.n2.nabble.com/template/NamlServlet.jtp?macro=unsubscribe_by_code&node=7588243&code=ci5tdWVsbGVyQGtyYWV1dGVyaGF1cy5kZXw3NTg4MjQzfDEwODg4MTE4MjE=> .
NAML <http://xwiki.475771.n2.nabble.com/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml>


image001.picture (3K) <http://xwiki.475771.n2.nabble.com/attachment/7588555/0/image001.picture>