Help!
I'm working on a meaty emberjs/yeoman project that uses multiple hbs templates that can all be routed to from one application.hbs's sidebar.
The problem is when I load the page, sometimes the Jquery to make that sidebar collapse will not work while other jquery in that same file does. Sometimes nothing works at all.
I'm calling my javascript/jquery from one file called magic.js
<body>
<!-- build:js scripts/components.js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.runtime.js"></script>
<script src="bower_components/ember/ember.js"></script>
<script src="bower_components/ember-data-shim/ember-data.js"></script>
<!-- endbuild -->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-c0QvqnFcYbP4r6t7sBiKPu9GPqRLRug&sensor=true">
</script>
<!-- build:js(.tmp) scripts/templates.js -->
<script src="scripts/compiled-templates.js"></script>
<!-- endbuild -->
<!-- build:js(.tmp) scripts/main.js -->
<script src="scripts/combined-scripts.js"></script>
<!-- endbuild -->
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap-sass/js/affix.js"></script>
<script src="bower_components/bootstrap-sass/js/alert.js"></script>
<script src="bower_components/bootstrap-sass/js/dropdown.js"></script>
<script src="bower_components/bootstrap-sass/js/tooltip.js"></script>
<script src="bower_components/bootstrap-sass/js/modal.js"></script>
<script src="bower_components/bootstrap-sass/js/transition.js"></script>
<script src="bower_components/bootstrap-sass/js/button.js"></script>
<script src="bower_components/bootstrap-sass/js/popover.js"></script>
<script src="bower_components/bootstrap-sass/js/carousel.js"></script>
<script src="bower_components/bootstrap-sass/js/scrollspy.js"></script>
<script src="bower_components/bootstrap-sass/js/collapse.js"></script>
<script src="bower_components/bootstrap-sass/js/tab.js"></script>
<!-- endbuild -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script src="scripts/models/permit_model.js"></script>
<!-- // <script src="scripts/arcgislink_compiled.js" type="text/javascript"></script> -->
<script src="scripts/magic.js"></script> <!-- Controls UI based javascript. Buttons, pretty effects, animations, etc. -->
magic.js is the last thing called before the body closes.
This is the magic.js file
$( document ).ready(function() {
var close=true
$(".collapsibleHeader").click(function(){
$(this).siblings().slideToggle("fast");
});
// Sidebar START
$(".arrow").click(function() {
if($('.float-left-col').css('width')=='200px') {
$('.float-left-col').removeClass('open');
$('.float-left-col').addClass('closed');
$('.sidebar-button-text').addClass('vanish');
$('.arrow').removeClass('reverse-rotate');
$('.arrow').addClass('rotate');
$('.full-logo').addClass('vanish');
$('.logo-only-container').removeClass('vanish');
$('.content-container').css('margin-left','80px')
}
else {
$('.float-left-col').removeClass('closed');
$('.float-left-col').addClass('open');
$('.arrow').addClass('reverse-rotate');
$('.logo-only-container').addClass('vanish');
$('.full-logo').removeClass('vanish');
var delay = setTimeout(function(){
$('.sidebar-button-text').removeClass('vanish');},250)
$('.arrow').removeClass('rotate');
$('.content-container').css('margin-left','200px');
}
});
The sidebar that isn't working is in the application.hbs file so I'm not sure why it would stop loading.
<div class="super-col">
<div id="sidebar-wrapper" class="float-left-col open">
<ul class="nav nav-pills nav-stacked text-center">
//..stuff inside the sidebar..
Why is my javascript not loading properly? Should I be calling it in a different file/s?
You're probably trying to attach the jquery before the elements have been created. Document ready isn't necessarily the same time Ember's views are ready.
In your case you insert the sidebar in the application template, so in your application view you could add the jquery in the didInsertElement hook
App.ApplicationView = Em.View.extend({
doStuff: function(){
//do your jquery here, the element is in the page now
}.on('didInsertElement')
});
This pattern can be applied for other views as well throughout your app
App.FooView = Em.View.extend({
doStuff: function(){
// do some crazy stuff cause the foo template has been inserted!
}.on('didInsertElement')
});
Related
I have some sjs code:
#JSExportTopLevel("CCRS")
object JsApi {
#JSExport
def makeJobId: JobId = JobId()
// ...
}
I have the following <body> element, which I'll note is properly finding the sjs-generated .js files since I was using a 3rd party SPA framework previously - though the launcher for that is now commented out:
<body>
<script type="application/javascript" src="ace/ace.js" charset="utf-8"></script>
<script type="application/javascript" src="target/web-client-jsdeps.js"></script>
<script type="application/javascript" src="target/web-client-opt.js"></script>
<!-- <script src="target/web-client-launcher.js"></script> -->
<input type="text"
placeholder="Enter a command:"
value="pwd"
onkeydown="oneShotHandler()" />
<div id="one-shot-demo"></div>
<script type="application/javascript">
var oneShotId = CCRS.makeJobId();
</script>
</body>
Upon page load, I get the following error: TypeError: CCRS.makeJobId is not a function.
Not really sure what I should be looking for in the generated web-client-opt.js file (using sjs 0.6.22 currently, with -P:scalajs:sjsDefinedByDefault). But, I do see this line, which I believe should be doing the export:
$e.CCRS = $m_Lorg_xsede_jobrunner_client_JsApi$();
I realized this just as I was finishing typing my question. The beauty of talking it out.
In Scala.js, I needed to add the () to my method:
#JSExport
def makeJobId(): JobId = JobId()
I would like to create a ionic project for wifi-network-detection. I came across some plugins like wifiwizards,cordova plugin diagnostic to check wifi connection and also cordova plugin hotspot. But how should I include these plugins to my ionic project. Should I create a blank ionic project to add these plugins or how should I put these plugins to my index.html and app.js file. Please someone help me with these as I'm new to these.
Sample Project:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!--ngCordova script-->
<script src = "lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content padding = "true">
<div class = "card">
<div class = "item item-text-wrap">
<h1>Network: {{network}}</h1>
</div>
</div>
<div class = "card">
<div class = "item item-text-wrap">
<ion-toggle ng-model = "isOnline" ng-checked = "item.checked">
<h1 ng-show = "isOnline">I'm into Wifi</h1>
<h1 ng-show = "! isOnline">I'm out off Wifi</h1>
</ion-toggle>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
app.js where I included the plugin(ngCordova)
angular.module('starter', ['ionic', 'ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope){
document.addEventListener("deviceready", function(){
$scope.network = $cordovaNetwork.getNetwork();
$scope.isOnline = $cordovaNetwork.isOnline();
$scope.$apply();
//listen for onloine event
$rootscope.$on('$cordovaNetwork:online', function(event, networkState){
$scope.isOnline = true;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
//listen for offline event
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
console.log("got offline");
$scope.isOnline = false;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
}, false);
});
Now how to write to check for the wifi detection and connectivity. The plugin I used is the cordova-network-information
Choose a template to start from (blank, sidemenu, tabs etc). Create your new project using ionic start [name] [templateName] step into the folder and add the plugins you need by calling ionic plugin add [plugin].
Now read the documentation for the plugins and start by implementing the examples they often show in their github repo. Then modify to your needs.
I have this view in Play:
#(message: String)
#main("Welcome to Play") {
<script src='#routes.Assets.versioned("js/index.js")' type='text/javascript'></script>
<div id="hello"></div>
<script type='text/javascript' src='#routes.WebJarAssets.at(WebJarAssets.fullPath("react", "react.js"))'></script>
<script type='text/javascript' src='#routes.WebJarAssets.at(WebJarAssets.locate("jquery.js"))'></script>
<script type='text/javascript' src='#routes.Assets.versioned("js/Dummy.js")'></script>
}
Within it, I am trying to use the fileassets/js/Dummy.jsx which has this content:
React.render(<h1>Hello</h1>, document.getElementById('hello'));
For compiling JSX, I am placing this in plugins.sbt:
addSbtPlugin("com.github.ddispaltro" % "sbt-reactjs" % "0.5.2")
However, the React code has no effect and page remains as it was previously.
Why is this happening?
I'm working with XSLTForms and I need to add a Leaflet map. But something with that library doesn't work. I have the following code in a .xml file (as each xform I have) but when I zoom the map (by double click or click in the zoom button) it freezes.
The _zoomIn: function is still triggered when freezed but it doesn't make the expected visual changes.
This is the simple xforms example:
<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<?xsltforms-options debug="no" lang="en"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<link type="text/css" rel="stylesheet" href="res/leaflet-0.8-dev/leaflet.css"/>
<link type="text/css" rel="stylesheet" href="res/style.css"/>
<script type="text/javascript" src="res/jquery-ui/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="res/leaflet-0.8-dev/leaflet.js"></script>
<script type="text/javascript">
function showOutdoorMap(id){
var map = L.map(id);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
id: 'examples.map-i875mjb7'
}).addTo(map);
map.locate({setView: true});
}
</script>
</head>
<body onload="showOutdoorMap('map')">
<fieldset>
<label class="header">Demo:</label>
<div id="map" style='width:100%; height:250px;'/>
</fieldset>
</body>
</html>
The solution was comment a line in the setView: function (center, zoom, options), allowing the _resetView method to refresh:
if (animated) {
clearTimeout(this._sizeTimer);
/*return this;*/
}
I also had to comment this line in order to drag and drop with no problems:
/*if (L.DomUtil.hasClass(this._element, 'leaflet-zoom-anim')) { return; }*/
I am attempting to get a very simple HTML/JavaScript application working for SDK 5.0b, the instructions for which are here...
http://samsungtvdev.blogspot.com/2013/04/smamsung-smart-tv-how-to-write-hello.html
I can launch VirtualBox 4.2.16 and see my application in the menu for the emulator. However, when I launch it, the background is black, and I don't see my application. I also see a bunch of warnings in the emulator about 'RegisterType()' and other functions not being available.
I tried posting this on the Samsung SDK forum, but it's pretty dead over there. I also tried the suggestion here, but copying the application manually also doesn't seem to work. Anyone have any ideas on how I can get this working?
Edit: Here is the HTML code. This isn't more than a "hello world" example.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HelloWorld</title>
<!-- TODO : Common API -->
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"> </script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"> </script>
<!-- TODO : Javascript code -->
<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>
<!-- TODO : Style sheets code -->
<link rel="stylesheet" href="app/stylesheets/Main.css" type="text/css">
<!-- TODO: Plugins -->
</head>
<body onload="Main.onLoad();" onunload="Main.onUnload();">
<!-- Dummy anchor as focus for key events -->
<!-- TODO: your code here -->
<div id="outputDiv"></div>
</body>
</html>
This is the JavaScript code.
var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var Main =
{
};
Main.onLoad = function()
{
// Enable key event processing
this.enableKeys();
widgetAPI.sendReadyEvent();
alert("App loaded!");
};
Main.onUnload = function()
{
};
Main.enableKeys = function()
{
document.getElementById("anchor").focus();
};
Main.keyDown = function()
{
var keyCode = event.keyCode;
alert("Key pressed: " + keyCode);
switch(keyCode)
{
case tvKey.KEY_RETURN:
case tvKey.KEY_PANEL_RETURN:
alert("RETURN");
widgetAPI.sendReturnEvent();
break;
case tvKey.KEY_LEFT:
alert("LEFT");
break;
case tvKey.KEY_RIGHT:
alert("RIGHT");
break;
case tvKey.KEY_UP:
alert("UP");
break;
case tvKey.KEY_DOWN:
alert("DOWN");
break;
case tvKey.KEY_ENTER:
case tvKey.KEY_PANEL_ENTER:
alert("ENTER");
document.getElementById("outputDiv").innerHTML += "<h1>Hello, World!</h1><br/>";
break;
default:
alert("Unhandled key");
break;
}
};
Here are the logs:
http://pastebin.com/mZULDGc6
1.) Look for misspellings, typos and missing commas. Samsung Smart TV SDK seems to be very strict with that and since you have no proper console, you don't get any errors if you forget a comma or something
2.) check your HTML/CSS
Maybe you should post your code so I can have a closer look.
EDIT: You forgot to add the scripts in your HTML head. You have to add every script file that you use in your project, such as Main.js. That would be
<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>
and also all Samsung SmartTV API script files that are required.
First what i see, you forgot "anchor" tag in html.
Not included external JS files in html page, and standard smart tv sdk files:
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"> </script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"> </script>
Then add
<body onload="Main.onLoad();" onunload="Main.onUnload();">
Are you sure that images loaded? Print it in console.
Why div block position inside canvas, move it outside. I think that code started with js error, so you don't see anything. Be more careful.
I had same issue and fixed it by adding background: red; for body tag in css.