Integrating bootstrap template with rails? - ruby-on-rails

I bought a HTML/CSS bootstrap template from themeforest.net. And I'm trying to import it into rails so I could start editing it and developing further more.I followed all of the guides on how to add assets (js,images,fonts and css) into rails and rendering partials from application.html.erb , however, when I start rails site loads partially and when I check the Web developer console in Chrome it shows different errors with .js files. Here is the screenshot
Uncaught TypeError: Object [object Object] has no method 'superfish' script.js?body=1:2
(anonymous function) script.js?body=1:2
jQuery.fn.extend.addEventListener jquery.ui.map.js?body=1:341
jQuery.fn.(anonymous function) jquery.ui.map.js?body=1:370
(anonymous function) sliderhome.js?body=1:15
Uncaught ReferenceError: google is not defined jquery.ui.map.js?body=1:341
jQuery.fn.extend.addEventListener jquery.ui.map.js?body=1:341
jQuery.fn.(anonymous function) jquery.ui.map.js?body=1:370
(anonymous function) sliderhome2.js?body=1:15
Uncaught ReferenceError: google is not defined jquery.ui.map.js?body=1:341
jQuery.fn.extend.addEventListener jquery.ui.map.js?body=1:341
jQuery.fn.(anonymous function) jquery.ui.map.js?body=1:370
(anonymous function) sliderhome4.js?body=1:15
Uncaught ReferenceError: google is not defined jquery.ui.map.js?body=1:341
jQuery.fn.extend.addEventListener jquery.ui.map.js?body=1:341
jQuery.fn.(anonymous function) jquery.ui.map.js?body=1:370
(anonymous function) switcher.js?body=1:18
Uncaught ReferenceError: google is not defined jquery.ui.map.js?body=1:341
jQuery.fn.extend.addEventListener jquery.ui.map.js?body=1:341
jQuery.fn.(anonymous function) jquery.ui.map.js?body=1:370
(anonymous function) contact.js?body=1:6
l jquery.js?body=1:703
c.fireWith jquery.js?body=1:747
v.extend.ready jquery.js?body=1:514
A
Id very much appreciate any kind of help regarding this problem.
Thanks in advance

For theme integration from themeforest ..instead of remove gem and include bootstarp css file in assets/css folder you can also add custom css this way and as per your screenshot it seems that your js ordering is creating some problem so check out in application.js for your js includes ...

Related

Javascript error when using CKEditor in JSF page

I tried to use the CKEditor in a JSF page like:
<pe:ckEditor id="editor" value="#{messagingController.messageContent}" width="600"/>
The editor will appear in Internet Explorer but not in Fire Fox or Chrome
FireBug shows me the following error:
SyntaxError: An invalid or illegal string was specified
And Chrome console shows me the following error:
Uncaught SyntaxError: Failed to set the 'innerHTML' property on 'Element':
The provided markup is invalid XML, and therefore cannot be inserted into an XML document.
CKEDITOR.plugins.add.afterInit
(anonymous function)
k
CKEDITOR.scriptLoader.load
(anonymous function)
(anonymous function)
(anonymous function)
k
CKEDITOR.scriptLoader.load
CKEDITOR.resourceManager.load
i
(anonymous function)
k
(anonymous function)
(anonymous function)
(anonymous function)
k
l
o
(anonymous function)
Is this a bug or something? Can I include this component any other way around?
I also use the latest primefaces extentions lib:
<groupId>org.primefaces.extensions</groupId>
<artifactId>primefaces-extensions</artifactId>
<version>3.0.0</version>
The problem was with the mime type of my page!when I changed it from application/xhtml+xml to text/html, the problem is solved.
Small addition to the already correct answer:
Also in iOS Safari this Syntax Error can appear. An indication is your document variable compatMode:"CSS1Compat" (in js), then ckEditor will cause an error at this function x.innerHTML = "some string with html entities" because the document is read with the wrong mime type.
ckEditor works fine for me when the document has compatMode:"BackCompat". This is set by the browser and depends on the content-type resp. media-type.

Uncaught TypeError: Cannot read property 'apply' of undefined - dart polymer

I'm a beginner with dart and polymer. When I run the web app in Chrome I get after a few seconds:
Uncaught TypeError: Cannot read property 'apply' of undefined js_dart2js.dart:310
JsObject.callMethod$2 js_dart2js.dart:310
_hookJsPolymer loader.dart:115
startPolymer loader.dart:55
initPolymer loader.dart:33
main init.dart:21
_IsolateContext.eval$1 isolate_helper.dart:432
startRootIsolate isolate_helper.dart:97
(anonymous function) arrrrivals.html_bootstrap.dart.js:24907
(anonymous function) arrrrivals.html_bootstrap.dart.js:24908
init.currentScript arrrrivals.html_bootstrap.dart.js:24886
(anonymous function) arrrrivals.html_bootstrap.dart.js:24899
(anonymous function) interop.dart:13
There are many similar questions for javascript but only one for dart: dart2js Uncaught TypeError cannot read property. However the answer there is just a request for more info. I have tried both 'pub build --mode=debug' and 'pub serve --mode=debug', as well as adding transformers in the pubspec.yaml, but I keep getting the feeling that my built code is minified. Arrrrivals is my app. How can I solve this?
---edited---
After perfecting my app in Dartium further, this error (for Chrome) changed:
Uncaught TypeError: Cannot read property 'element' of undefined prototype.js:205
f.findTypeExtension prototype.js:205
f.findTypeExtension prototype.js:206
f.registerPrototype prototype.js:190
f.register prototype.js:26
JsFunction.apply$2$thisArg js_dart2js.dart:337
_hookJsPolymer_registerDart.call$3 loader.dart:135
Primitives_applyFunction js_helper.dart:1066
_callDartFunction core_patch.dart:51
(anonymous function) js_dart2js.dart:103
d._register polymer-element.js:64
e.flush queue.js:128
e.ready queue.js:135
e.check queue.js:89
e.go queue.js:69
d.registerWhenReady polymer-element.js:53
d polymer.js:49
b polymer.js:36
JsFunction.apply$2$thisArg js_dart2js.dart:337
JsFunction.apply$1 js_dart2js.dart:339
Polymer_register instance.dart:170
main_closure50.call$0 arrrrivals.html_bootstrap.dart:165
startPolymer iterable.dart:310
initPolymer loader.dart:33
main init.dart:21
_IsolateContext.eval$1 isolate_helper.dart:432
startRootIsolate isolate_helper.dart:97
(anonymous function) arrrrivals.html_bootstrap.dart.js:26379
(anonymous function) arrrrivals.html_bootstrap.dart.js:26380
init.currentScript arrrrivals.html_bootstrap.dart.js:26358
(anonymous function) arrrrivals.html_bootstrap.dart.js:26371
(anonymous function) interop.dart:13
This issue was reported. The trick under comment #7 there let's me successfully build the javascript version on a one-off. Will be solved in Dart 1.6.

Highcharts legend js error

I am working with Highstock.js and prototype adapter. When I try to construct a stacked column chart on a specific data set I see the below js error
Uncaught TypeError: Cannot read property 'height' of undefined
(anonymous function)
(anonymous function)
HighchartsAdapter.each
Legend.handleOverflow
Legend.render
Legend.init
Highcharts.Legend
Chart.render
Chart.firstRender
Chart.init
(anonymous function)
obj.(anonymous function)
(anonymous function)
obj.(anonymous function)
Chart
I have reproduced that in http://jsfiddle.net/arjunbadarinath/f8JzU/6/, if I remove some stackings, the chart renders and also it renders when I remove the legend 'maxHeight' property, but removing this is not an option for us.
Can you please figure out what the problem is?
You need to replace color:['#ffffff'] with color:'#ffffff'
http://jsfiddle.net/f8JzU/7/

'undefined is not a function' from breeze insides, during basic setup

I assume it's extremely basic problem, but it caught me for two days, with no solution yet.
I'm creating a project with breeze, wrapped in requirejs, but I don't think that's the problem.
libraries loaded in dependencies are jquery, q, and datajs
breeze.config.initializeAdapterInstances({ dataService: "OData" });
var manager = new breeze.EntityManger('todo/Todos')
error Uncaught TypeError: undefined is not a function is thrown in second line above.
breeze.EntityManager is defined for sure, exception is thrown somewhere depeer in that function, stack trace from chrome below:
fire jquery.js?b=1394184954069:2913
self.add jquery.js?b=1394184954069:2959
jQuery.fn.jQuery.ready jquery.js?b=1394184954069:242
jQuery.fn.jQuery.init jquery.js?b=1394184954069:185
jQuery jquery.js?b=1394184954069:63
(anonymous function) main.coffee:186
context.execCb require.js:1635
Module.check require.js:871
(anonymous function) require.js:1112
(anonymous function) require.js:129
(anonymous function) require.js:1155
each require.js:57
Module.emit require.js:1154
Module.check require.js:925
(anonymous function) require.js:1112
(anonymous function) require.js:129
(anonymous function) require.js:1155
each require.js:57
Module.emit require.js:1154
Module.check require.js:925
Module.enable require.js:1142
Module.init require.js:779
callGetModule require.js:1169
context.completeLoad require.js:1549
context.onScriptLoad require.js:1656
Possibly there is a config line needed, I'm not aware of? Even when I removed the first line of two breeze.config.... error is still the same.
You are spelling Manager incorrectly
Manger - a long open box or trough for horses or cattle to eat from.
Manager - a person responsible for controlling or administering all or part of a company or similar organization.
Good luck!

How do I include jQuery Mobile in my Emberjs Rails application

Today I encounter a puzzling issue and after several hours of searching I am not able to find what is the problem. I am trying to include jquery mobile into my rails application. I have tried both manually referencing the library files and also using jquery_mobile_rails gem. Both method works as far as inserting the library into my application, however as soon as I add jquery mobile, my app no longer loads. When refreshing the page, it will not load. There are three errors in console:
1st:
Uncaught TypeError: Object <Ember.ArrayResourceController:ember141> has no method '_resourceRequest'
Jimux.appsMetaController.Em.ArrayResourceController.create.findAll
newFunc
(anonymous function)
(anonymous function)
(anonymous function) jquery.js:566
jQuery.extend.globalEval jquery.js:567
jQuery.ajaxSetup.converters.text script jquery.js:8107
ajaxConvert jquery.js:7992
done jquery.js:7628
callback jquery.js:8367
send jquery.js:8373
jQuery.extend.ajax jquery.js:7835
(anonymous function) jquery.js:5858
jQuery.extend.each jquery.js:613
jQuery.fn.extend.domManip jquery.js:5855
jQuery.fn.extend.append jquery.js:5628
jQuery.fn.extend.wrapAll jquery.js:5585
(anonymous function) jquery.js:5603
jQuery.extend.each jquery.js:613
jQuery.fn.jQuery.each jquery.js:243
jQuery.fn.extend.wrapInner jquery.js:5598
$.extend.initializePage jquery.mobile-1.2.0.js:9063
(anonymous function) jquery.mobile-1.2.0.js:9142
fire jquery.js:976
self.fireWith jquery.js:1084
jQuery.extend.ready jquery.js:408
DOMContentLoaded
2nd:
Uncaught TypeError: Cannot call method 'set' of undefined
Ember.Application.registerInjection.injection
(anonymous function)
(anonymous function)
visit
DAG.topsort
Ember.Application.Ember.Namespace.extend.runInjections
Ember.Application.Ember.Namespace.extend.initialize
(anonymous function)
fire
self.fireWith
jQuery.extend.ready
3rd:
GET http://localhost:3000/assets/images/ajax-loader.gif 404 (Not Found)
As soon as I remove //= require jquery.mobile-1.2.0 from application.js, my app works as expected again -- without any of the above errors. I am just wondering what could be happening here. I guess there may be some namespace collision, but I am not sure if this is the case and how to identify and fix it.
Any help with debugging this issue will be appreciated. If you are using Embeejs+jQueryMobile in a rails project, I would love to know how you are including the two libraries into your rails application, and if/how you are dealing with any conflict.
I am using Ember 1.0pre1, and a slightly modified version of ember-rest.
If I recall correctly, jQuery Mobile manipulates the DOM a fair bit. That would likely be problematic with Ember, as Ember expects to not have other libraries manipulating DOM elements that it is tracking views or bindings for.

Resources