Search code examples
javascriptjquery-pluginsdrupal-7conflictimpress.js

Javascript in Drupal 7: conflict when using JMpress.js

I'm trying to integrate Jmpress.js (a fork of impress.js that is actually a jquery plugin) into Drupal 7 and I'm finding some problems.

First, I got the "$ is not a function" error, that I managed to solve pointing directly to jQuery instead of using $, as explained elsewhere.

But now that I get a recognized function, the thing works really awfully (misplaced elements, key navigation operating only in some cases), and more importantly I can see in the Firebug console a lot of error messages.

Here I paste a few of them:

$(hashLink).on is not a function
(?)()jmpress.js?m2hr5f (línea 1491)
step = "init"
eventData = Object { settings={...}, current={...}, container=[1], más...}
(?)()jmpress.js?m2hr5f (línea 278)
idx = 2
callback = function()
nodeName()jquery.js?v=1.4.4 (línea 34)
j = [firstSlide(step, eventData), function(), function()]
s = function()
v = function()
callCallback()jmpress.js?m2hr5f (línea 277)
callbackName = "selectInitialStep"
element = "init"
eventData = Object { settings={...}, current={...}, container=[1], más...}
init()jmpress.js?m2hr5f (línea 666)
args = Object { beforeChange=[0], beforeInitStep=[0], initStep=[0], más...}
f()jmpress.js?m2hr5f (línea 800)
(?)()jmpress.js?m2hr5f (línea 810)
idx = 0
element = div#simple
nodeName()jquery.js?v=1.4.4 (línea 34)
j = [div#simple]
s = function()
v = div#simple
toArray()jquery.js?v=1.4.4 (línea 27)
j = function()
s = undefined
jmpress()jmpress.js?m2hr5f (línea 809)
method = undefined
diapos()17 (línea 105)
noConflict()jquery.js?v=1.4.4 (línea 30)
j = function()
inArray()jquery.js?v=1.4.4 (línea 38)
[Parar en este error]   

$(hashLink).on("click"+current.hashNamespace, function(event) {

I'm a bit lost now, as I've been fighting to get this working for almost a couple of days (I started trying with the original impress.js, but I surrendered with that, as integrating a jquery plugin looked like a more feasible option).

I also tried encapsulating my code (which is a really small code to launch jmpress.js), but I guess I did something wrong, as I didn't get it any further :)

Any help/ideas will be appreciated. Thanks!

The JMpress.js is being properly loaded in the header, and I'm adding this code to the body of a published node (with PHP Code filter active, so that the code is not being stripped):

<script type="text/javascript">
jQuery(function() {
    jQuery('#simple').jmpress();
});
</script>
Solution

  • The problem is related to the jQuery version.

    Drupal 7 works with jQuery 1.4.4 and the jmpress examples in http://shama.github.com/jmpress.js/#/home works with jQuery 1.7.1.

    For example, the .on() function was added to jQuery in 1.7 (http://api.jquery.com/on/)

    Override your jQuery version where you want to use this plugin.

    Use hook_js_alter to remove the undesired version of jQuery and replace it with jquery 1.7.1.

    Be careful, and use it only where it is necessary, because maybe other parts of your JS code will be broken after this change.