I am new to typeahead. I am getting the json data from remote and is shown in the network. The problem is The returned data is not autocompleted in the text box. Below is my code
Style and Script Used
<link href="{{ asset('css/bootstrap-tagsinput.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('css/bootstrap-tagsinput-typeahead.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ asset('js/bootstrap-tagsinput.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/handlebars.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/typeahead.bundle.min.js') }}" type="text/javascript"></script>
Textbox
<input type="text" name="language" placeholder="Language" id="typeahead_lang" class="tagsinput-typeahead"/>
Script
<script>
$(document).ready(function () {
var cities = new Bloodhound({
datumTokenizer : Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer : Bloodhound.tokenizers.whitespace,
remote: {
url: '{{ route("admin.packagelanguage") }}',
}
});
cities.initialize();
var elt = $('#typeahead_lang');
elt.tagsinput({
itemValue: 'value',
itemText: 'text',
typeaheadjs: {
name: 'cities',
displayKey: 'text',
source: cities.ttAdapter()
}
});
});
</script>
Json Returned data
[{text: 'English', value:'1' },{text: 'Afar', value:'2' },{text: 'Abkhazian', value:'3' },{text: 'Afrikaans', value:'4' },{text: 'Amharic', value:'5' }]
I am using laravel framework. How to autocomplete the returned the data in that text box. Please Help me.
A little late but,this code works for me.
var elt = $('#elt');
elt.tagsinput({
itemValue: 'value',
itemText: 'text',
typeaheadjs: [{
hint: true,
highlight: true,
minLength: 2
},{
name: 'cities',
displayKey: 'text',
source: cities.ttAdapter()
}
]
});
Related
I am using flask to develop my website and i often have to use graph to display data, so I'd like to have a route that display a graph and then use it as a template. The way I found to do it is the following:
Two html files : tender.html and template.html with the first one used as the file to display to the user and the second one used as a template for graph that can be re-used in other routes
template.html :
<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.1/chartjs-plugin-zoom.min.js" integrity="sha512-klQv6lz2YR+MecyFYMFRuU2eAl8IPRo6zHnsc9n142TJuJHS8CG0ix4Oq9na9ceeg1u5EkBfZsFcV3U7J51iew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="chart-container" style=""><canvas id="myChart-1"></canvas></div>
<div>div-test</div>
<script>
const dataset_1 = [{
label: "Spread of ",
type: 'line',
backgroundColor: "blue",
order : 3,
pointRadius:0,
borderWidth: 1,
borderWidth: 1,
borderColor:"blue",
data: {{ data | safe }},
yAxisID: 'y'
},
];
const data_1 = {
labels: {{ label | safe }},
datasets : dataset_1
};
const zoomOptions = {
animations: false,
tranistions: false,
pan: {
enabled: true,
mode: 'x',
},
zoom: {
wheel: {
enabled: true,
},
drag: {
enabled: true,
modifierKey: 'ctrl',
},
mode: 'x',
onZoomComplete({chart}) {
// This update is needed to display up to date zoom level in the title.
// Without this, previous zoom level is displayed.
// The reason is: title uses the same beforeUpdate hook, and is evaluated before zoom.
chart.update('none');
}
}
};
const config_1 = {
data: data_1,
options: {
animations:false,
transitions:false,
responsive: true,
interaction: {
},
stacked: false,
plugins: {
zoom : zoomOptions,
title: {
display: true,
text: "bla bla"
}
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
borderWidth : 0.001,
},
x: {
display: true,
grid :{
display:false
},
},
},
},
};
const myChart_1 = new Chart(document.getElementById('myChart-1'),config_1);
</script>
tender.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{% autoescape false %}
{{template}}
{% endautoescape %}
</body>
</html>
The route in my flask app that "join" the two files
#app.route('/test')
def test():
template = render_template('template.html',data=[2,4,1,9,5,2],label=[0,1,2,3,4,5])
return render_template('tender.html', template=template)
Obviously this solution is completely fine but i thought that render_template was meant to only be used with return, at the end of routes so i was wondering wether there was a more natural or prettier way to do the job. I was thinking there was as i have to use autoescape on my template variable to have my stuff rendered.
Thanks for your help already and I can clarify my point if it isn't clear enough !
I'm trying to get all "Title", "Year" and "imdbID" from this link.
I'm using Vuejs and Axios to do so. But I'm not sure how it's done ?
Here's my code :
<!DOCTYPE html>
<html>
<head>
<meta charset=""utf-8>
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<title>Web Project 2018</title>
<link rel="stylesheet" href="">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h2>Liste of films</h2>
<ul>
<li v-for="film in films">{{ film.Title }}, {{ film.Year }}, {{ film.imdbID }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data : {
films: [],
errors: []
},
created() {
axios.get('http://www.omdbapi.com/?apikey=xxxxx&s=iron%20man')
.then(function(response) {
this.films = response.data;
})
.catch(function(error) {
this.errors.push(error);
});
}
})
</script>
</body>
</html>
With this, I only get a page with {{ film.Title }}, {{ film.Year }}, {{ film.imdbID }}
I'm sure it's simple but I can't figure it out... Any help please ?
Worked with arrows :
axios.get('http://www.omdbapi.com/?apikey=xxxx&s=iron%20man')
.then(response => {
this.films = response.data.Search;
})
.catch(error => {
this.errors.push(error);
});
My Code:
HTML:
<select ng-model="selectedItem" ng-options="item.result as item.name for item in items"></select>
JS:
$scope.items = [{'name': 'Yes', 'result': true },{ 'name': 'No', 'result': false }];
I want to display Yes and No in the select box whereas I have to send true and false to the server when Yes or No is selected respectively.
I have another div where I have to display the option text (ie Yes or No (selected one) ). I used {{selectedItem.label}} but it is not working. Please help.
Used Sajeetharan's answer and updated it to meet your requirement.
Following is the code:
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>
<body ng-controller="dobController">
<select class="form-control" id="selection" ng-model="currentSelected" ng-options="selection.result as selection.name for selection in items"></select>
<div>
<h1> Selected one is : {{currentSelected? "Yes": (currentSelected == null)? "":"No"}} </h1>
</div>
<script>
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
$scope.items = [{'name': 'Yes', 'result': true },{ 'name': 'No', 'result': false }];
}
]);
</script>
</body>
</html>
Demo
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
$scope.items = [{'name': 'Yes', 'result': true },{ 'name': 'No', 'result': false }];
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>
<body ng-controller="dobController">
<select class="form-control" id="selection" ng-model="currentSelected" ng-options="selection.result as selection.name for selection in items"></select>
<div>
<h1> Selected one is : {{currentSelected}} </h1>
</div>
</body>
</html>
Use directive to get the desired result of displaying the selected item name value but send the result value to backend.
var app = angular.module('app', []);
app.controller("myctrl", ["$scope",
function($scope) {
$scope.items = [{
'name': 'Yes',
'result': true
}, {
'name': 'No',
'result': false
}];
}
]);
app.filter('getvalue', function() {
return function(value, array) {
if (value !== undefined && value !== null) {
var selectedOption = array.filter(function(l) {
if (l.result == value) {
return l;
}
})[0];
return selectedOption["name"];
} else {
return "";
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="myctrl">
<select class="form-control" id="selection" ng-model="currentSelected" ng-options="selection.result as selection.name for selection in items"></select>
<div>
Displayed Text : {{currentSelected | getvalue:items}}
</div>
<div>
Value which will be send : {{currentSelected}}
</div>
</body>
Is there any example of using ng-grid in partial pages. Whenever I try to use, an error pops up as TypeError: Cannot set property 'myData' of undefined.
My App.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers', 'ngGrid']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
Controller.js
'use strict';
/* Controllers */
angular.module('myApp.controllers', ['ngGrid']).
controller('MyCtrl1', [function ($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{ name: "Enos", age: 34 },];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: 'name', displayName: 'Name' },
{ field: 'age', displayName: 'Age', cellTemplate: '<div ng-class="{green: row.getProperty(col.field) > 30}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>' }],
showGroupPanel: true
};
}])
.controller('MyCtrl2', [function() {
}]);
//MyCtrl1.$inject = ['$scope'];
Partial1.html
<p>This is the partial for view 1.</p>
<div class="gridStyle" ng-grid="gridOptions"></div>
<div style="clear:both"/>
<p>{{ myData | json }}</p>
Partial2.html
<p>This is the partial for view 2.</p>
<p>
Showing of 'interpolate' filter:
{{ 'Current version is v%VERSION%.' | interpolate }}
</p>
And index.html
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/ng-grid.css">
<link rel="stylesheet" href="css/Style.css">
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="js/ng-grid-2.0.5.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
</body>
</html>
Can you please say, why 'myData' is unavailable in Partial1.html?
Thanks in advance.
It is probably too late, but for the code right here
{name: "Enos", age: 34 },];
you don't need the coma. It should read:
{name: "Enos", age: 34 }];
<html>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/ext-all-debug.js"></script>
<script type="text/javascript" src="http://dev.sencha.com/playpen/google-visualization/GVisualizationPanel.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
Ext.onReady(function() {
var lineChartDs = new Ext.data.SimpleStore({
fields: [
{name: 'yr', type: 'string'}
,{name: 'sales', type: 'int'}
,{name: 'expenses', type: 'int'}
],
data: [['2004',1000,400],['2005',1170,460],['2006',860,580],['2007',1030,540]]
});
var lineChart1 = new Ext.ux.GVisualizationPanel({
id: 'lineChart',
visualizationPkg: 'linechart',
title: 'Company Performance Sample',
store: lineChartDs,
columns: [
{dataIndex: 'yr', label: 'Year'}
,{dataIndex: 'sales', label: 'Sales'}
,{dataIndex: 'expenses', label: 'Expenses'}
]
})
new Ext.Viewport({
layout: 'fit',
items: [lineChart1]
});
});
</script>
there are problem with GVisualizationPanel.js file do the change in line no 23
tbl.addColumn(convert[f.type.type], c.label || c, id);
after that its working with extjs 3.3.1