This is my HTML file:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static',filename='styles/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href= "{{ url_for('static',filename='styles/style.css') }}">
<script src="https://npmcdn.com/react#15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.7/react-bootstrap.js"></script>
<meta charset="utf-8">
<title>Dashboard</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="/static/js/dashboard.js"></script>
</body>
</html>
The file is located in:
/Simple_flask_app
-hello.py
/static
-js
/styles
-boostrap.min.css
-style.css
I created a simple component just to try to get the CSS to load:
var Dashboard = React.createClass({
render: function(){
return (
<div>
<div class="jumbotron">
<h1>Test</h1>
</div>
</div>
)
ReactDOM.render(<Dashboard />, document.getElementById('content'));
I was trying to get this giant grey box to load - https://getbootstrap.com/examples/navbar/
Do I have to do something special because I'm in React?
Within JSX in React, you must use 'className' instead of 'class'.
So you should change <div class="jumbotron"> to <div className="jumbotron">
Related
I have a file called navbar.html which I want to load onto my index.html.
I am trying to load via jQuery, but this does not seem to be working.
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<title>Home | title</title>
<link rel="stylesheet" href = "style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="hello">testing</div>
<div id="nav-placeholder">
</div>
<script>
$(document).ready(function(){
$('#nav-placeholder').load("./navbar.html");
});
</script>
</body>
</html>
Here is my navbar.html
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href="style.css">
</head>
<body>
<!---Create the navigation bar.-->
<div class="top_navigation_bar">
<span>
nav title
</span>
Projects
About Me
Home
</header>
</body>
</html>
My HTML pages are not getting routed via ui-view used in index.html. However
I defined all declarations in my controller. I used $stateProvider in my controller to get into a particular HTML. This is showing
"....index.html#/welcome" in browser URL location but nothing is displayed into the page. Please help me to get out of this situation.
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="bower_components/font-awesome-
4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="lib/angular-loading-bar/loading-
bar.css">
<link rel="stylesheet"
href="bower_components/chosen/chosen.css">
<!-- endbuild -->
<!-- build:css content/css/main.css -->
<link rel="stylesheet" href="content/css/bootstrap.min.css">
<link rel="stylesheet" href="content/css/bootstrap-
select.min.css">
<link rel="stylesheet" href="content/css/style.css">
<link rel="stylesheet" href="content/css/common.css">
</head >
<body >
<!--[if lt IE 9]>
<p class="browserupgrade">You are using an
<strong>outdated</strong> browser. Please upgrade your browser to improve your
experience.</p>
<![endif]-->
<div>
<div class="body-overlay" style="z-index:1051;">
<div class="overlay-content" id="bodyOverlayContent">
<p></p>
</div>
</div>
<div class="main-section" ng-app="testApp">
<div ui-view="welcome" ng-cloak>
</div>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="angular-ui-router.js"></script>
<script src="mytest.controller.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
</body>
</html>
mytest.controller.js
var app = angular.module('testApp', ['ui.router']);
app.config(['$stateProvider',
'$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('welcome', {
url : '/welcome',
templateUrl : 'welcome.html',
controller : 'testController'
});
$urlRouterProvider.otherwise('/welcome');
console.log($stateProvider);
}]);
app.controller('testController', function($scope) {
$scope.showInfoMessages="Contact Information";
});
welcome.html
<div><p> Hi </p></div>
Remove the string assign to ui-view
change
<div ui-view="welcome" ng-cloak>
to this
<div ui-view ng-cloak=""></div>
also add the ng-app on html tag
Demo
So here I have my index.html and app.js. I'm trying to use prismjs to show a code block on my view .If you run the snippet below me. This is how I like my app to do. But in my real app I'd like to not include a tag that contain my secondview.html. I would like it to be in its own separate file. But when I do that the prism css file won't work inside the ui-view.
Is there any configuration I would have to do? I believe it has something to do with the ng-binding.Here is what it looks like inside the ui-view. I wish I can provide another link to show you what it looks like outside the ui-view but I don't have enough reputation to post more than 2 links...lol But it just pretty much has all of the classes that the prism js injected into the elements which the prism.css will render.
This is what it looks like when the view is in its own separate file(Not Working)
The Code below me has the secondview.html inside the index.html(Works)
myApp = angular.module("myApp", ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url: '/',
templateUrl: 'secondview.html'
});
});
<html ng-app="myApp">
<head>
<!-- <meta charset="utf-8" />-->
<title>AngularJS Prism</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism.min.css">
</head>
<body style="background-color: grey">
<h1>Firsts View(Not Inside ui-view)</h1>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
<script type="text/ng-template" id="secondview.html">
<h1>Second View(Inside ui-view)</h1>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
</script>
<div ui-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Need a directive :
.directive('ngPrism', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
Prism.highlightElement(element.find('code')[0]);
}
}
})
Then wrap your code html by <div ng-prism> ... </div>:
<div ng-prism>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
</div>
Then it worked.
Plunder demo here.
I'm quite the newbie at this, but I'm trying to get the bootstrap datepicker inline mode, but my divs are not showing anything once rendered. perhaps you might know what is wrong with my code?
<html>
<head>
<title>bootstrap datepicker examples</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href={%static "bootstrap-3.3.2-dist/css/bootstrap.min.css" %}>
<link rel="stylesheet" type="text/css" href="{%static 'css/datepicker.css' %}"/>
<link rel="stylesheet" type="text/css" href={%static "css/main.css"%}>
</head>
<body>
<div id="main">
<div class="datepicker"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> {# jQuery #}
<script src="{% static 'bootstrap-3.3.2-dist/js/bootstrap.min.js' %}"></script> {# Bootstrap #}
<script type="text/javascript" src="{% static 'js/bootstrap-datepicker.js' %}"></script>
<script>
$(document).ready(function() {
$(".datepicker").datepicker();
});
</script>
</body>
</html>
It works if i use an tag but then it is not in the inline mode.
put the following code to the first line of your template file.
{% load staticfiles %}
and change
<div class="datepicker"></div>
to
<input class="datepicker" />
I am trying to pull in data from a JSON file and use it to populate a navigation menu, composed of divs that collapse using the Angular UI collapsible function.
Here is my code (also on Plunker here):
<!DOCTYPE html>
<html ng-app="samApp">
<head>
<link data-require="bootstrap-css#3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body>
<div CollapseCtrl navdata ng-repeat="items in item">
<div class="nav-super">{{items.img}}</div>
<div collapse="isCollapsed">
<div class="nav-sub">{{items.img}}</div>
</div>
</div>
</body>
</html>
My issues are:
I cannot make the elements within the collapsible take the json information. If I set ng-repeat on one of the divs, the sub or super div will not take it. Setting ng-repeat on the outermost div results in none of the sub divs taking the repeat.
I have enclosed my controllers in directives and assigned both directives, for the collapsing function and the HTTP GET, to the same div.
I do believe you're looking for something like this:
<!DOCTYPE html>
<html ng-app="samApp">
<head>
<link data-require="bootstrap-css#3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-controller="navDataController">
<ul>
<li ng-repeat="item in items">
<span ng-click="action(item)">{{item.img}}</span>
<ul ng-show="item.isCollapsed">
<li ng-repeat="sub in item.subcontent">
<span>{{sub.title}} {{sub.}}</span>
</li>
</ul>
</li>
</ul>
</body>
</html>
http://plnkr.co/edit/DlVqJOzQwjxdCVjStvZg?p=preview
The example works, but it's a bit crude; learn basics to make it sweet.
Also modified your plunkr to work:
http://plnkr.co/edit/jxVGxl7h8gBlFLQ9zyTW?p=preview
HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-app="samApp" ng-controller="CollapseCtrl">
<div ng-repeat="item in items">
<div class="nav-super" ng-click="item.isCollapsed=!item.isCollapsed">{{item.img}}</div>
<div collapse="item.isCollapsed">
<div class="nav-sub" ng-repeat="subElement in item.subcontent">{{subElement.title}}</div>
</div>
</div>
</body>
</html>
JS
var app = angular.module('samApp', ['ui.bootstrap']);
app.service('navdata', function($http) {
var myServiceObj = {
myData: {},
getData: function() {
$http.get('data.json').success(function(data, status, headers, config) {
angular.copy(data, myServiceObj.myData);
});
}
}
myServiceObj.getData();
return myServiceObj;
});
app.controller('CollapseCtrl', function($scope, navdata) {
$scope.items = navdata.myData;
});
Basically directives are meant for adding encapsulated behavior or DOM element manipulation. I think a service makes more sense for taking care of the requests to the server and storing the data to be used by various controllers.
I also used the data to store the isCollapsed boolean so you may want to loop over the data and set that to false if you want them closed initially or otherwise just reverse your boolean logic in the collapse expression.
You had all the right logic just in the wrong places, also read up on the ng-repeat documentation it's a piece I visit often.