CODEWITHSUNDEEP
javascriptjqueryconflictzepto
user782104
user782104

Reputation: 13545

Is it possible to use JQuery and Zepto library at the same time?

<script src="jsv3/jquery-1.7.1.min.js"></script>
<script src="jsv3/jquery-ui-1.9.2.custom.min.js"></script>
<script src="jsv3/jquery.mobile-events.js"></script>
<script src="jsv3/jquery.ui.touch-punch.js"></script>
<script src="jsv3/turn.js"></script>
<script src="jsv3/jquery.viewport.min.js"></script>
<script src="jsv3/jquery.scraggable.js"></script>
<script src="jsv3/history.js"></script>
<script src='http://vod.hkheadline.com/player/jwplayer/jwplayer.js'></script>
<script src="jsv3/libs/zepto.js"></script>  //  Can not use
<script src="jsv3/zepto.flickable.js"></script>
<script src="jsv3/onload_mobile.js"></script>

Currently I am using several jquery plugins to implement a webapp. I recently find a library call flickable.js and add to the app . However, it use zepto library, so when I add it , it return error of Uncaught TypeError: Object [object Object] has no method 'flickable' , How to fix it? thanks

Upvotes: 2

Views: 4174

Answers (2)

lazyboy
lazyboy

Reputation: 1166

you can do this.

jQuery.noConflict();
delete window.$;

and then load the zepto script.

Upvotes: 1

alaasdk
alaasdk

Reputation: 1998

use jQuery's function noConflict.

jQuery.noConflict();

more details here.. http://docs.jquery.com/Using_jQuery_with_Other_Libraries

<script src="jsv3/jquery-1.7.1.min.js"></script>
<script src="jsv3/jquery-ui-1.9.2.custom.min.js"></script>
<script src="jsv3/jquery.mobile-events.js"></script>
<script src="jsv3/jquery.ui.touch-punch.js"></script>
<script src="jsv3/turn.js"></script>
<script src="jsv3/jquery.viewport.min.js"></script>
<script src="jsv3/jquery.scraggable.js"></script>
<script src="jsv3/history.js"></script>
<script src='http://vod.hkheadline.com/player/jwplayer/jwplayer.js'></script>

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

<script src="jsv3/libs/zepto.js"></script>   
<script src="jsv3/zepto.flickable.js"></script>
<script src="jsv3/onload_mobile.js"></script>

Upvotes: 6

Related Questions