I'm trying to use jsTree in AngularJS powered MVC5 school project. To use jsTree in angular app I'm using this directive.
From what I can observe everthing working ok:
- jstree loads correctly data and structure, and fires all events
- jstree loads CSS style (if i change for instance margin in css, it's reflected to jstree, if remove css reference it rendered as ordinary HTML UL)
However it looks like, that rest of layout doesnt work:
- no background change, when i move cursor over node
- no conectors, no node images, no arrows
From what i was able to find it looks like that css is not using images referenced in it:
background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==");
background-image: url("32px.png");
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
So I tried to use:
bundles.Add(new StyleBundle("~/jstree").Include(
"~/Content/jstree/style.css", new CssRewriteUrlTransform()));
Css with images is placed in same folder:
But that also did not worked. Any ideas? Sugestions?
Rest of the code:
angular.module('JosefinaApp', ['ui.layout', 'JosefinaApp.controllers', 'jsTree.directive']);
angular.module('JosefinaApp.controllers', [])
.controller('TreeViewController', ['$scope', '$location', '$http', function ($scope, $location, $http) {
$location.path('/home');
$http({
method: 'GET',
url: '/api/project/gettasks/1',
}).
success(function (data) {
$scope.treeModel = data;
}).
error(function () {
$scope.test = "Error";
});
$scope.treeViewNodeSelected = function (e, data) {
console.log(data.node.id);
};
}])
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title ng-bind="models.helloAngular"></title>
<script src="#Url.Content("~/Scripts/plugins/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/plugins/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-2.1.4.min.js")" type="text/javascript"> </script>
<link href="#Url.Content("~/Content/themes/base/all.css")" rel="stylesheet" type="text/css" />
#Styles.Render("~/Content/css")
#Styles.Render("~/jqueryUI")
#Styles.Render("~/uiLayout")
#Styles.Render("~/jstree")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryUI")
<script src="#Url.Content("~/Scripts/angular.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-ui-router.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-resource.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-ui/ui-layout.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jstree/jstree.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jstree/jsTree.directive.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/JosefinaApp.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/Controllers/LandingPageController.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/Controllers/TreeViewController.js")" type="text/javascript"> </script>
</head>
<body>
<div ng-app="JosefinaApp">
<div ng-controller="TreeViewController">
<js-tree theme="default" tree-events="select_node:treeViewNodeSelected" tree-data="scope" tree-model="treeModel">
</js-tree>
</div>
</div>
#RenderBody()
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Browser stored images, internet explorer was caching empty images and showing them instead of geting them from server.
... kill me please
Related
I have written a simple script in jsPsych that welcomes the user to the page, then thanks them for their participation after they press any key. However, it does not load the CSS styling associated with the page. The style sheet is at the appropriate location, and there are no errors or warnings generated.
The entirety of the code is below:
<!DOCTYPE html>
><html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jsPsych/jspsych.js"></script>
<script type="text/javascript" src="jsPsych/plugins/jspsych-html-keyboard-response.js"></script>
<script type="text/javascript" src="jsPsych/plugins/jspsych-image-keyboard-response.js"></script>
<script type="text/javascript" src="jsPsych/plugins/jspsych-survey-text.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="jsPsych/css/jspsych.css" rel="stylesheet" type="text/css"/>
</head>
<body>
</body>
<script>
var timeline = []
var welcome = {type: "html-keyboard-response",
stimulus: "Welcome to the experiment, and thank you for your time! Press any key to continue."
};
timeline.push(welcome)
jsPsych.init({
timeline: timeline,
on_finish: function() {
$.ajax({
type: "POST",
url: "/experiment-data",
data: jsPsych.data.get().json(),
contentType: "application/json"
})
.done(function() {
alert("Thank you!")
window.location.href = "/";
})
.fail(function() {
alert("A problem occurred while writing to the database. Please contact the researcher for more information.")
window.location.href = "/";
})
}
})
</script>
</html>
Hi i want use the toastr notifications for angular js
this: https://github.com/Foxandxss/angular-toastr
I have my controller and my index, in mi index y imports all css's and js's for work with my app, but when i tried inject my toastr script in my controller the console show this error
Unknown provider: toastrProvider <- toastr <- clientController
my index:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="angular/angular-toastr/dist/angular-toastr.min.css" />
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="angular/angular.min.js"></script>
<script src="angular/angular-route/angular-route.min.js"></script>
<script src="angular/angular-toastr/dist/angular-toastr.min.js"></script>
<!-- <script src="resources/angular/angular-toastr/dist/angular-toastr.tpls.js"></script> also try -->
</head>
<body ng-app="app">
<li><a href="#!client">new client</li>
<div class="container">
<div ng-view></div>
</div>
<script src="app/runConfig.js"></script>
<script src="app/controllers/client.conroller.js"></script>
</body>
</html>
my controller:
(function () {
'use stritct';
angular
.module('app')
.controller('clientController', clientController);
clientController.inject = ['$rootScope', '$scope', '$location', 'toastr'];
function clientController($rootScope, $scope, $location, toastr) {
}
})();
You are almost there, you missed injecting the toastr service in to the app module. This is shown in the setup on the github.
angular.module('app', ['toastr'])
Creating a simple KendoUI drop down list using AngularJS. Not seeing the drop down with the correct styling.
Here's the html...
<div ng-controller="welcome2 as vm">
<select kendo-drop-down-list k-options="vm.phoneOptions"></select>
</div>
The js file:
(function () {
'use strict';
angular.module('app')
.controller('welcome3',
[welcome3]);
function welcome3() {
var vm = this;
vm.activate = activate;
activate();
function activate() {
vm.phoneOptions = {
dataSource: {
data: [
{name: "iPhone"},
{name: "Droid"},
{name: "Windows"}
]
},
dataTextField: "name",
dataValueField: "id",
optionLabel: "Select a phone..."
};
}
}
})();
Inside the index.js file I have (among other things) the following:
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<link href="content/bootstrap.css" rel="stylesheet" />
<link href="content/kendo.common.min.css" rel="stylesheet" />
<link href="content/kendo.default.min.css" rel="stylesheet.css" />
</head>
<body>
// ...
<div ng-view></div>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/kendo.all.min.js"></script>
<script src="scripts/angular-kendo.js"></script>
//....
<script src="app/welcome/welcome3.js"></script>
</body>
</html>
The drop down looks like this:
As opposed to this:
Thanks!!
Usually when you have an unstyled control like that, it's because you have a wrong stylesheet link. It looks like the common file is linked right, but check the other. Also, when using Bootstrap, make sure to use the common-bootstrap CSS file.
http://trykendoui.telerik.com/#burkeholland/UXav
With the release of famo.us, it has all the libraries as CDN hosted libs. How can I use these from within a meteor app?
I get a lot of problems with the "define" in the famo.us code...
What I've done is create a new meteor app, and then from the famo.us boilerplate, I've taken the html and put it into a client folder so it looks like
<head>
<title>famo.us App</title>
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- shims for backwards compatibility -->
<script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<!-- module loader -->
<script type="text/javascript" src="http://code.famo.us/lib/require.js"></script>
<!-- famous -->
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.2/famous.css" />
<script type="text/javascript" src="http://code.famo.us/famous/0.2/famous.min.js"></script>
<!-- app code -->
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script type="text/javascript">
require.config({'localhost:3000': 'public/'});
require(['main']);
</script>
</head>
<body>
</body>
Then I've taken the main.js in the src folder of the boiler plate and put it into the client/compatibility folder of meteor. But it doesn't really work. Comes back with
Uncaught ReferenceError: define is not defined
from main.js
and main.js looks like
define(function(require, exports, module) {
// import dependencies
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var ImageSurface = require('famous/surfaces/ImageSurface');
// create the main context
var mainContext = Engine.createContext();
// your app here
var logo = new ImageSurface({
size: [200, 200],
content: 'http://code.famo.us/assets/famous_logo.svg',
classes: ['double-sided']
});
var initialTime = Date.now();
var centerSpinModifier = new Modifier({
origin: [0.5, 0.5],
transform : function(){
return Transform.rotateY(.002 * (Date.now() - initialTime));
}
});
mainContext.add(centerSpinModifier).add(logo);
});
from looking at the source, it looks like its because meteor has compiled main.js and included before the famo.us stuff gets loaded.
Have you tried loading main.js directly in the script tag instead of using the script tag to "require" it in. I'm doing something similar where I inject the main.js code directly into the html, but here is an example where I've split it out and it works (although I'm not using meteor.)
Clearly I'm also making a bit of an alteration to the code and not using define, but this change is straight forward. Here are the html and js...
html:
<html>
<head>
<title>Debug Output</title>
<meta name='viewport' content='width=device-width, maximum-scale=1, user-scalable=no' />
<meta name='mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='black' />
<script type='text/javascript' src='http://code.famo.us/lib/functionPrototypeBind.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/classList.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/requestAnimationFrame.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/require.js'></script>
<link rel='stylesheet' type='text/css' href='http://code.famo.us/famous/0.2/famous.css' />
<script type='text/javascript' src='http://code.famo.us/famous/0.2/famous.min.js'></script>
<link rel='stylesheet' type='text/css' href='styles/app.css' />
<script type='text/javascript' src='tstPackage.js'>
</script>
</head>
<body>
</body>
</html>
js:
require(['famous/core/Engine','famous/core/Surface'],function(Engine,Surface) {
// Famo.us Context Example
//var Engine = require('famous/core/Engine');
//var Surface = require('famous/core/Surface');
var mainContext = Engine.createContext();
var surface = new Surface({
size: [200, 200],
content: 'Hello World',
classes: ['red-bg'],
properties: {
lineHeight: '200px',
textAlign: 'center'
}
});
mainContext.add(surface);
// from https://famo.us/examples/0.2.0/core/context/example
});
Have you tried to import mjn:famous package into your meteor project?
meteor add mjn:famous
great question; famo.us is moving away from Yeoman / Grunt
to clean up rich's answer, here's a simple index.html
<html>
<script src='http://code.famo.us/lib/require.js'></script>
<script src='http://code.famo.us/famous/0.2/famous.min.js'></script>
<script>
require([
'famous/core/Engine',
'famous/core/Surface',
'famous/core/Modifier'
], function(Engine, Surface, Modifier){
var context = Engine.createContext();
var helloSurf = new Surface({
content: 'hello world',
properties: {
backgroundColor:'red'
}
});
var helloMod = new Modifier({
size: [100, 100],
origin: [.5, 0]
});
context.add(helloMod).add(helloSurf);
});
</script>
<html>
Does anyone have some css styles and images to apply to jqTree to show the outline of the tree? Something like YUI treeview that shows a dotted border
http://developer.yahoo.com/yui/examples/treeview/default_tree.html
Turns out YUI treeview allows you to use existing html to render.
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/tree.jquery.js" type="text/javascript"></script>
<!-- Required CSS -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/treeview/assets/skins/sam/treeview.css">
<!-- Dependency source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js" ></script>
<!-- Optional dependency source file to decode contents of yuiConfig markup attribute-->
<script src="http://yui.yahooapis.com/2.9.0/build/json/json-min.js" ></script>
<!-- TreeView source file -->
<script src="http://yui.yahooapis.com/2.9.0/build/treeview/treeview-min.js" ></script>
<script>
var tree;
function treeInit() {
tree = new YAHOO.widget.TreeView("committeeTree");
// if required, add nodes here
tree.render();
}
$(function () {
$("#myTree").tree({
data: source
});
treeInit();
});
</script>