search

joergrech / KickstartWithBootstrap

Kickstart is an extension for Grails in order to start your project with a good looking frontend. It is intended to be used in rapid application scenarios such as a Startup Weekend or a prototyping session with a customer. This plugin provides adapted scaffolding templates for standard CRUD pages using Twitter's CSS Framework Bootstrap and offers some basic pages for a web site.
65 stars 52 forks source link

Resource loading issue? #68

Closed magicboo closed 10 years ago

magicboo commented 10 years ago

Situation:

  1. Add a simple JS chart (http://www.highcharts.com/stock/demo/basic-line) into GSP with "kickstart" layout have javascript error
  2. Add "_debugResources=y" to the URL (still with "kickstart" layout), the chart display normally (and all kickstart style are missing, as expect)
  3. Change the layout to "main" (without debug parameter), the chart display normally

Javascript Error in console:

"Uncaught TypeError: Object [object Object] has no method 'highcharts'
(anonymous function)
c                                               bundle-bundle_bootstrap_defer.js:4
p.fireWith                                   bundle-bundle_bootstrap_defer.js:4
k                                               bundle-bundle_bootstrap_defer.js:6
n.onload.n.onreadystatechange    bundle-bundle_bootstrap_defer.js:6

Steps:

  1. Add js resource in ApplicationResources.groovy
    - modules = { application {
        dependsOn 'jquery'
        resource url:'js/application.js'
        resource url:'js/highstock.js', disposition: 'head'
        resource url:'js/exporting.js', disposition: 'head'
    }}
  1. The page: 
    <head>
   <meta name="layout" content="kickstart" />
   <r:require modules="application"/>
</head>
<body>
   <div id="container" style="height: 500px; min-width: 500px"/>
   <r:script>...sample scripts that call highcharts....</r:script/>
</body>
magicboo commented 10 years ago

Update: If I remark the line resource url: [dir: 'bootstrap/js/tests/vendor',file: 'jquery.js'] and unmark dependsOn 'jquery' in KickstartResources.groovy, my chart can be display correctly....but I don't know why!

joergrech commented 10 years ago

Sorry, I cannot reproduce that problem I assume that it is connected with the jQuery 1.8 problem or the lesscss/resource plugin. If you have the time please test with version 1.1.0 of Kickstart in a new project - it uses jQuery 1.10 via the project's dependency (the plugin does not have the dependency anymore).

magicboo commented 10 years ago

Congratulation on the 1.1.0! But...my problem still happen in 1.1.0 and I don't know how to fix it now because you added jquery module requirement in the template already but not in the KickstartResources.gorrvy....=(

Here are my steps (in more detail), hope that you can reproduce the problem: (The sample can be referred from /Highstock-1.3.7/examples/candlestick/index.htm)

  1. Create new project and apply 1.1.0
  2. Modify ApplicationResources.groovy to add highstock JS files image
  3. Add a page stock.gsp in view/home/stock.gsp image
  4. Add a line "/stock" (view:"/home/stock") in UrlMappings.groovy
  5. Put related JS file in place (\web-app\js...) (Sorry that I can't attach related files here)
  6. Browse to http://localhost:8080/InvestmentLab/stock image
  7. The error is: image
  8. Add "_debugResources=y" can see the chart image
magicboo commented 10 years ago

Update again: I remark the following line in KickstartResources.groovy and the javascript chart can show correctly! resource url: [dir: 'bootstrap/js/tests/vendor',file: 'jquery.js']