I'm having a lot of issues running webshims in grails. I believe the problem is that when I include the polyfiller.js file in my .gsp page the polyfiller.js can't access any other of the js files in the library... Does any one know a work around ? can the whole library be in one file so I just include one file in the .gsp so there's no access problems.
in gsp....
<r:require module="IE6_8"/>
<r:layoutResources />
<script>
$.webshims.polyfill('forms');
$(function(){
});
</script>
IE6_8 is a module that includes all of the js files in the directory, but that still doesn't work...
IE6_8 Module:
IE6_8{
resource url: 'js/js-webshim/dev/extras/modernizr-custom.js'
resource url: 'js/js-webshim/dev/extras/mousepress.js'
resource url: 'js/js-webshim/dev/polyfiller.js'
resource url: 'js/js-webshim/dev/shims/color-picker.js'
resource url: 'js/js-webshim/dev/shims/combos/1.js'
resource url: 'js/js-webshim/dev/shims/combos/10.js'
resource url: 'js/js-webshim/dev/shims/combos/11.js'
resource url: 'js/js-webshim/dev/shims/combos/12.js'
resource url: 'js/js-webshim/dev/shims/combos/13.js'
resource url: 'js/js-webshim/dev/shims/combos/14.js'
resource url: 'js/js-webshim/dev/shims/combos/15.js'
resource url: 'js/js-webshim/dev/shims/combos/16.js'
resource url: 'js/js-webshim/dev/shims/combos/17.js'
resource url: 'js/js-webshim/dev/shims/combos/18.js'
resource url: 'js/js-webshim/dev/shims/combos/19.js'
resource url: 'js/js-webshim/dev/shims/combos/2.js'
resource url: 'js/js-webshim/dev/shims/combos/20.js'
resource url: 'js/js-webshim/dev/shims/combos/21.js'
resource url: 'js/js-webshim/dev/shims/combos/22.js'
resource url: 'js/js-webshim/dev/shims/combos/23.js'
resource url: 'js/js-webshim/dev/shims/combos/24.js'
resource url: 'js/js-webshim/dev/shims/combos/25.js'
resource url: 'js/js-webshim/dev/shims/combos/26.js'
resource url: 'js/js-webshim/dev/shims/combos/27.js'
resource url: 'js/js-webshim/dev/shims/combos/28.js'
resource url: 'js/js-webshim/dev/shims/combos/29.js'
resource url: 'js/js-webshim/dev/shims/combos/3.js'
resource url: 'js/js-webshim/dev/shims/combos/30.js'
resource url: 'js/js-webshim/dev/shims/combos/31.js'
resource url: 'js/js-webshim/dev/shims/combos/4.js'
resource url: 'js/js-webshim/dev/shims/combos/5.js'
resource url: 'js/js-webshim/dev/shims/combos/6.js'
resource url: 'js/js-webshim/dev/shims/combos/7.js'
resource url: 'js/js-webshim/dev/shims/combos/8.js'
resource url: 'js/js-webshim/dev/shims/combos/9.js'
resource url: 'js/js-webshim/dev/shims/details.js'
resource url: 'js/js-webshim/dev/shims/dom-extend.js'
resource url: 'js/js-webshim/dev/shims/es5.js'
resource url: 'js/js-webshim/dev/shims/excanvas.js'
resource url: 'js/js-webshim/dev/shims/filereader.js'
resource url: 'js/js-webshim/dev/shims/FlashCanvas/canvas2png.js'
resource url: 'js/js-webshim/dev/shims/FlashCanvas/flashcanvas.js'
resource url: 'js/js-webshim/dev/shims/FlashCanvasPro/canvas2png.js'
resource url: 'js/js-webshim/dev/shims/FlashCanvasPro/flashcanvas.js'
resource url: 'js/js-webshim/dev/shims/form-core.js'
resource url: 'js/js-webshim/dev/shims/form-datalist-lazy.js'
resource url: 'js/js-webshim/dev/shims/form-datalist.js'
resource url: 'js/js-webshim/dev/shims/form-message.js'
resource url: 'js/js-webshim/dev/shims/form-native-extend.js'
resource url: 'js/js-webshim/dev/shims/form-number-date-api.js'
resource url: 'js/js-webshim/dev/shims/form-number-date-ui.js'
resource url: 'js/js-webshim/dev/shims/form-shim-extend.js'
resource url: 'js/js-webshim/dev/shims/form-validation.js'
resource url: 'js/js-webshim/dev/shims/form-validators.js'
resource url: 'js/js-webshim/dev/shims/forms-picker.js'
resource url: 'js/js-webshim/dev/shims/geolocation.js'
resource url: 'js/js-webshim/dev/shims/jpicker/images/AlphaBar.png'
resource url: 'js/js-webshim/dev/shims/jpicker/images/bar-opacity.png'
resource url: 'js/js-webshim/dev/shims/jpicker/images/Bars.png'
resource url: 'js/js-webshim/dev/shims/jpicker/images/map-opacity.png'
resource url: 'js/js-webshim/dev/shims/jpicker/images/mappoint.gif'
resource url: 'js/js-webshim/dev/shims/jpicker/images/Maps.png'
resource url: 'js/js-webshim/dev/shims/jpicker/images/NoColor.png'
resource url: 'js/js-webshim/dev/shims/jpicker/images/picker.gif'
resource url: 'js/js-webshim/dev/shims/jpicker/images/preview-opacity.png'
resource url: 'js/js-webshim/dev/shims/jpicker/images/rangearrows.gif'
resource url: 'js/js-webshim/dev/shims/jpicker/jpicker.css'
resource url: 'js/js-webshim/dev/shims/json-storage.js'
resource url: 'js/js-webshim/dev/shims/mediaelement-core.js'
resource url: 'js/js-webshim/dev/shims/mediaelement-jaris.js'
resource url: 'js/js-webshim/dev/shims/mediaelement-native-fix.js'
resource url: 'js/js-webshim/dev/shims/mediaelement-yt.js'
resource url: 'js/js-webshim/dev/shims/range-ui.js'
resource url: 'js/js-webshim/dev/shims/styles/details-arrows.png'
resource url: 'js/js-webshim/dev/shims/styles/forms.png'
resource url: 'js/js-webshim/dev/shims/styles/polyfill-loader.gif'
resource url: 'js/js-webshim/dev/shims/styles/range-track.png'
resource url: 'js/js-webshim/dev/shims/styles/shim.css'
resource url: 'js/js-webshim/dev/shims/styles/vertical-range.png'
resource url: 'js/js-webshim/dev/shims/swfmini.js'
resource url: 'js/js-webshim/dev/shims/track-ui.js'
resource url: 'js/js-webshim/dev/shims/track.js'
}
The javascript console responds with this:
Uncaught TypeError: Cannot call method 'polyfill' of undefined auth:43
can't find module: color-picker bundle-bundle_IE6_8_defer.js:1222
18 extendNative configuration will be set to false by default with next release. In case you rely on it set it to 'true' otherwise to 'false'. See http://bit.ly/16OOTQO bundle-bundle_IE6_8_defer.js:1222
can't find module: form-datalist-lazy bundle-bundle_IE6_8_defer.js:1222
form-validators already included. please remove custom-validity.js bundle-bundle_IE6_8_defer.js:1222
can't find module: forms-picker bundle-bundle_IE6_8_defer.js:1222
can't find module: mediaelement-native-fix bundle-bundle_IE6_8_defer.js:1222
can't find module: mediaelement-yt bundle-bundle_IE6_8_defer.js:1222
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/AppName/static/shims/styles/shim.css
Since grails combines modules into one file, All of the .js files are contained in bundle-bundle_IE6_8_defer.js
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script src="/AppName/static/plugins/jquery-1.8.3/js/jquery/jquery-1.8.3.min.js" type="text/javascript" ></script>
<link href="/AppName/static/bundle-APPStyleSheet_head.css" type="text/css" rel="stylesheet" media="screen, projection" />
<script src="/AppName/static/bundle-bundle_IE6_8_head.js" type="text/javascript" ></script>
<link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/AlphaBar.png" rel="shortcut icon" />
<link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/bar-opacity.png" rel="shortcut icon" />
<link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/Bars.png" rel="shortcut icon" />
<link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/map-opacity.png" rel="shortcut icon" />
<link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/mappoint.gif" rel="shortcut icon" />
<link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/Maps.png" rel="shortcut icon" />
<link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/NoColor.png" rel="shortcut icon" />
<link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/picker.gif" rel="shortcut icon" />
<link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/preview-opacity.png" rel="shortcut icon" />
<link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/rangearrows.gif" rel="shortcut icon" />
<link href="/AppName/static/bundle-bundle_IE6_8_head.css" type="text/css" rel="stylesheet" media="screen, projection" />
<link href="/AppName/static/js/js-webshim/dev/shims/styles/details-arrows.png" rel="shortcut icon" />
<link href="/AppName/static/js/js-webshim/dev/shims/styles/forms.png" rel="shortcut icon" />
<link href="/AppName/static/js/js-webshim/dev/shims/styles/polyfill-loader.gif" rel="shortcut icon" />
<link href="/AppName/static/js/js-webshim/dev/shims/styles/range-track.png" rel="shortcut icon" />
<link href="/AppName/static/js/js-webshim/dev/shims/styles/vertical-range.png" rel="shortcut icon" />
<script>
$.webshims.setOptions({ basePath: "/js/js-webshim/dev/shims" });
$.webshims.polyfill('forms');
$(function(){ });
</script>
</head>
If the polyfiller does not find the scripts, you can configure the shims base path. Before you call webshims.polyfill.
$.webshims.setOptions({ basePath: "/yourFolderTo/shims/" });
$.webshims.polyfill('forms');
Simply look into the net tab of your developer tool to make sure, that the scripts are found and the basePath is configured properly.