I have added the cdn of semantic ui in my html file but now I want to write react code using semantic ui in my js file. How to use semantic-ui in the js file?
I have used material-ui where we use MaterialUi keyword to get the components.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Transaction Entry</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="{% static 'images/icons/favicon.ico' %}"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button,
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
</style>
</head>
<body style="background-color: #0747A6">
<!-- DO NOT CHANGE THE FOLLOWING DIV-->
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/#material-ui/core#latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script crossorigin src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/react-autosuggest/dist/standalone/autosuggest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.8/uuid.js" crossorigin="anonymous"></script>
<script type="text/babel" src={% static 'js/Signup.js' %}></script>
</body>
</html>
Html file
js/Signup.js will have my js code.
As you can see in semantic-ui-react docs, there is no CDN usage for Components, just only for CSS. (In playarround CDN is fine, but dont use it in prod.)
resource: https://react.semantic-ui.com/usage/
This is the code which i have in my controller..I have used 2 elements in the json and passed it to scope.
var app = angular.module('starter', []);
app.controller('customersCtrl',function($scope){
$scope.response=
[
[{
"VisitName":"Brand",
"ClientName":"Software Solutions",
"POC":" Name",
"ClientID":"1",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null},
{
"VisitName":"Service",
"ClientName":"Software Solutions",
"POC":"Name",
"ClientID":"2",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null
}]
]
});
Below is the html code which i used to repeat json array..
<!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>Service</title>
<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="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/angular-aria.min.js"></script>
<script src="js/angular-material.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">
<div ng-controller="customersCtrl" ng-cloak>
<h1>Values</h1>
<ul class="chosen" dnd-list="model">
<li ng-repeat="chosen in response track by chosen.ClientID">
{{chosen.VisitName}}
{{chosen.Phone}}
{{chosen.POC}}
</li>
</ul>
<!-- <div>
<span>{{response}}</span>
</div>
<span>{{error}}</span>-->
</div>
</body>
</html>
There is not output comes in the html page, searched all examples and stackoverflow solutions, but i can't find the exact solutions guys, Please help me guys..
You have array in array at $scope.response
just use only one array
$scope.response= [{...},{...}]
or chose first element in array at template (if you cant change $scope.response)
<li ng-repeat="chosen in response[0] track by chosen.ClientID">
var app = angular.module('starter', []);
app.controller('customersCtrl',function($scope){
$scope.response=
[
[{
"VisitName":"Brand",
"ClientName":"Software Solutions",
"POC":" Name",
"ClientID":"1",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null},
{
"VisitName":"Service",
"ClientName":"Software Solutions",
"POC":"Name",
"ClientID":"2",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null
}]
]
});
Below is the html code which i used to repeat json array..
<!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>Service</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.3/angular-material.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="
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.3/angular-material.jss"></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">
<div ng-controller="customersCtrl" ng-cloak>
<h1>Values</h1>
<ul class="chosen" dnd-list="model">
<li ng-repeat="chosen in response[0] track by chosen.ClientID">
{{chosen.VisitName}}
{{chosen.Phone}}
{{chosen.POC}}
</li>
</ul>
<!-- <div>
<span>{{response}}</span>
</div>
<span>{{error}}</span>-->
</div>
</body>
</html>
It's because response is an array of an array not just a single dimension array get rid of the extra angle brackets:
var app = angular.module('starter', []);
app.controller('customersCtrl',function($scope){
$scope.response=
[
{
"VisitName":"Brand",
"ClientName":" Software Solutions",
"POC":"Name",
"ClientID":"1",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null},
{
"VisitName":"Service",
"ClientName":"Software Solutions",
"POC":"Name",
"ClientID":"2",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null
}
];
});
I have started an ionic app for work, and one of the features of the cross platform arm is integrating a a Google map api. Currently I choose angular-google-maps
Now I try config it with ionic like this:
seems eveything is ok but why it dosen't work?
<html ng-app="appMaps">
<head>
<meta charset="utf-8">
<title>Map</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src="https://raw.github.com/lodash/lodash/3.10.1/lodash.min.js"></script>
<script src="https://raw.github.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script>
</head>
<body>
<ion-header-bar class="bar-dark" >
<h1 class="title">Google Maps Example</h1>
</ion-header-bar>
<ion-content>
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="options"></ui-gmap-google-map>
</div>
</ion-content>
<SCRIPT>
angular.module('appMaps', ['uiGmapgoogle-maps','ionic'])
.controller('mainCtrl', function($scope) {
$scope.map = {center: {latitude: 51.219053, longitude: 4.404418 }, zoom: 14 };
$scope.options = {scrollwheel: false};
});
</SCRIPT>
</body>
</html>
You missed some stuff:
the link to angular-simple-logger.js (angular-google-maps has a dependency)
the CSS height for angular-google-map-container (see http://angular-ui.github.io/angular-google-maps/#!/use bullet number 7)
to convert raw.github.com to rawgit.com when linking directly to JS libraries on GitHub.
Here is the working snippet:
<html ng-app="appMaps">
<head>
<meta charset="utf-8">
<title>Map</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//rawgit.com/lodash/lodash/3.10.1/lodash.min.js"></script>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src="//rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
<script src="//rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script>
<style>
#map_canvas {
width: 100%;
height: 100%;
}
.angular-google-map-container { height: 400px; }
</style>
</head>
<body>
<ion-header-bar class="bar-dark">
<h1 class="title">Google Maps Example</h1>
</ion-header-bar>
<ion-content>
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options"></ui-gmap-google-map>
</div>
</ion-content>
<SCRIPT>
angular.module('appMaps', ['uiGmapgoogle-maps', 'ionic'])
.controller('mainCtrl', function($scope) {
$scope.map = {
center: {
latitude: 51.219053,
longitude: 4.404418
},
zoom: 14,
options: {
scrollwheel: false
}
};
});
</SCRIPT>
</body>
</html>
Goole chrome is giving this error
http://localhost:63342/an1/images/%7B%7Bitem.image%7D%7D.png Failed to load resource: the server responded with a status of 404 (Not Found)
But I am able to see "left image" fine when the app is run.
//---mainMenu.json----------------------------------------
[
{
"name": "item1",
"image": "abc"
},
{
"name": "item2",
"image": "abc"
},
{
"name": "item3",
"image": "abc"
}
]
//---index.html----------------------------------------
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<base href="http://localhost:63342/an1/">
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/headerCtrl.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<main ng-view></main>
</body>
</html>
//---mainMenu.html----------------------------------------
<section class="mainMenu">
<ul>
<li ng-repeat="item in menuItems" ng-click="mainMenuSelection(item.name)">
<image src="images/{{item.image}}.png"></image>
{{item.name}}
</li>
</ul>
</section>
The browser is trying to load your unparsed template variable as a url before the desired item.image value is substituted in.
You can fix this by using ng-src instead of src on your image tag: https://docs.angularjs.org/api/ng/directive/ngSrc.
I'm brand new to using Angular JS so forgive me if this is a basic question. I'm having problems using the date picker add on with Angular Schema Form (http://schemaform.io) I've followed the instructions on the datepicker github page, but I simply can't get a datepicker to display on my page. Here is a snippet of the code I've been using. Can anyone help or suggest any mistakes I've made?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unilever Data Centre Site Survey</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/tv4/tv4.js"></script>
<script type="text/javascript" src="bower_components/objectpath/lib/ObjectPath.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script>
<script type="text/javascript" src="bower_components/datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/jscript" src="bower_components/jquery-2.1.4.min.js"></script>
<script type="text/jscript" src="bower_components/pickadate.js-master/lib/picker.js"></script>
<script type="text/jscript" src="bower_components/pickadate.js-master/lib/picker.date.js"></script>
<link rel="stylesheet" href="bower_components/pickadate.js-master/lib/themes/default.css"> </link>
<link rel="stylesheet" href="bower_components/pickadate.js-master/lib/themes/default.date.css"> </link>
</head>
<body ng-app="test" ng-controller="TestCtrl">
<nav class="navbar navbar-default"> </nav>
<div style="width:950px;" class="container-fluid">
<div ng-controller="TestCtrl">
<form name="test" sf-schema="schema" sf-form="form" sf-model="model" ng-submit="onSubmit(test,modelData)">
</form>
<h3>Model</h3>
<div>{{prettyModel}}</div>
<script>
angular.module('test',['schemaForm']).controller('TestCtrl', function($scope,$http){
$scope.schema = {
"type": "object",
"properties": {
"birthDate": {
"title": "Bday",
"type": "string",
"format": "date"
},
$scope.form = [
{
"key": "birthDate",
"minDate": "1995-09-01",
"maxDate": new Date(),
"format": "yyyy-mm-dd"
},
$scope.model = {};
$scope.$watch('model', function(value){
if (value) {
$scope.prettyModel = JSON.stringify(value, undefined, 2);
}
}, true);
})
</script>
</div>
</body>
It's don't work because Textalk/angular-schema-form-datepicker is missing.
You need to install angular-schema-form-datepicker
https://github.com/Textalk/angular-schema-form-datepicker