Attempting to precompile a ember-handlebars template via gruntjs and contrib-ember-handlebars.
However, I am seeing a malformed template:
<section>
<div class="center">
<div class="logo-container">
</div>
<div class="misuseAct">
<script id="metamorph-0-start" type="text/x-placeholder"></S'+'CRIPT>
<h1>Super app</h1>
<p>The best app ever...</p>
Proceed
<script id='metamorph-0-end' type='text/x-placeholder'></S'+'CRIPT>
</div>
</div>
</section></script></div></div></section>
I am only seeing this on mobile phone browsers and with Ember minified, it works fine with Ember debug, on all devices and browsers.
Versions:
Grunt: 0.4.1
Grunt-CLI: 0.1.9
contrib-ember-handlebars: 0.6.0
Handlebars: RC-4
jQuery: 1.10.2
Ember.js: RC-6
Ember-Data: 0.13
I'm not sure if this is your problem but it seems very similar to my situation.
Ember, Handlebars, Contrib-Ember-Templates produce malformed templates on mobile browsers
Related
I am trying to make a very simple rails program to upload video. And here is my code
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-image">
<script src="//fast.wistia.com/embed/medias/<%= #course.video %>" async></script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
</div>
My problem is, when I copy and paste the code from wistia.com to the box video, and try to upload it, the video still can not upload, I mean the video still does not change.
Could you please give me some ideas in this problem? I am a newbie and very confuse with this problem. Thank you very much.
If you are trying to load javascript from an external site you need to include the http protocol. However without implementation instructions from your vendor, this probably won't do anything. How does this javascript know where to insert video into your dom? Look at the documentation here in their example https://wistia.com/support/embed-and-share/video-on-your-website
So in your html, load the javascript first then assign the div like this:
<script src="http://fast.wistia.com/embed/medias/j38ihh83m5.jsonp" async></script>
<script src="http://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_j38ihh83m5" style="height:349px;width:620px"> </div>
So if we assume your data object has a string with the id of the video, something like this should work:
<script src="http://fast.wistia.com/embed/medias/<%= #course.video %>.jsonp" async></script>
<script src="http://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_<%= #course.video %>" style="height:349px;width:620px"> </div>
I've installed a Angular UI Bootstrap 2.5.0 package in my visual studio and I'm trying to perform a carousel operation, but it doesn't work at all. Following is my code.
<div class="panel-body" id="tblSubs" ng-controller="ControllerName">
<carousel interval="myInterval">
<slide ng-repeat="id in code">
<h3 class="text-center">{{id.Name}}</h3>
<p>{{id.Contact}}</p>
<p>{{id.Info}}</p>
</slide>
</carousel>
</div>
I'm able to get the data but the data doesn't come in carousel.
Any help would be appreciated.
Since version 0.14.0 you need to add the uib prefix to some of the directives, enter uib-carousel instead of carousel etc..
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>
</div>
I'm new to Ruby on Rails, and have been battling with this issue for a while now.
I have pulled a website from git, and made sure all the dependencies are installed, however, when I run the site, I get the error:
ActionView::Template::Error ("\xA9" on UTF-8)
because of the line linking images using the code image_path("bground2.jpg").
When I remove the image_path("bground2.jpg"), the error is resolved.
I however need image_path("bground2.jpg") and can't do without it.
I have tried the solutions here, but it seems not to work
This is a section of the index.html.erb file, but the error is recurring over all places containing the image_path and image_url:
<%= provide(:title, 'Home') %>
<section id="slider" class="">
<div class="img-responsive" style="background-image: url(<%= image_path("bground2.jpg") %>); background-position: 50% 0;height: 500px;">
<div class="container clearfix">
<!-- <div class="slider-caption slider-caption-center">
<!-- <div class="banner heading-block title-center nobottomborder">
<h1><%= "#{t('.reach_home')}" %></h1>
</div> -->
So, I solved this by reinstalling the Ruby application.
Don't know what had caused it, but I just reinstalled the application and everything works fine.
Thanks all for the help.
I had this very same issue. I identified it to a file I had in my application, actually it was taking place in minified javascript file I had in my Rails app. I open the file in text editor, added a new line and, set the encoding as UTF-8 and saved it, and the problem disappeared.
I am trying to build my first application on windows platform using phone gap. I am able to run my application but I'm not able to see any icon like back button, menu button icon in both emulator and device. How can we get the data-icons in page header.
CSS:
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
HTML:
<div data-role="page" id ="pichartimg">
<div data-theme="a" data-role="header">
<h3>Pie Chart</h3>
Back
</div>
<div id='canvasDivpie' class = "sidebar"></div>
</div>
I'm not able to see the back button in page header. What is the issue and how to get icons.
I have been struggling with this too. My experience ist, that it's important to have the correct order in your Javascript inclusions.
I suggest you to first include your CSS. Then right after in the following order:
jQuery
Jquery Mobile
Cordova
any other Javascript
Done so the below example should display a button in your header with an icon on the right side:
<div id="header" data-role="header" data-position="fixed" data-theme="a">
<h1>Some Headline</h1>
</div>
Hope that helps!
I am using Phonegap 3.3 and Jquery mobile 1.4 for my app.
I have a link that opens a pop and JQM 1.4 displays the background icon thanks to the css pseudo-class :after, it works on my desktop browser but I can't see the icon nor the ::after in the html on Android (Phonegap).
my HTML :
<div id="blink">Enter <span> size </span>
Learn more:
</div>
<div data-role="popup" id="popupInfo" data-theme="b" style="max-width:350px;">
<p>blabla</p>
</div>
my CSS:
#welcome-page #leveldata .ui-alt-icon.ui-icon-info:after, #welcome-page #leveldata .ui-alt-icon .ui-icon-info:after {
background-image: url("../images/info-custom.svg");
}
And the HTML produced by JQM doesn't have the ::after, see screenshot below :
Can you help ?