Related
I am new to angular 4. I am working in pagination using angular 4.I ahve installed "npm install ngx-pagination --save". I followed the instruction which was in internet. But I am getting error like "The pipe 'paginate' could not be found ("
]game of games | paginate: { itemsPerPage: 2, currentPage: p }">
{{i}}
"): ng:///ActivityChartModule/ActivityComponent.html#235:32
'pagination-controls' is not a known element:". I tried More. Can any one help me to comeout from this problem. Below are my code,
app.module.ts
import {NgxPaginationModule} from 'ngx-pagination';
imports: [NgxPaginationModule]
in component.ts
p: number = 1;
games = [
{
"id": "1",
"name": "DOTA 2",
"genre": "Strategy"
},
{
"id": "2",
"name": "AOE 3",
"genre": "Strategy"
},
{
"id": "3",
"name": "GTA 5",
"genre": "RPG"
},
{
"id": "4",
"name": "Far Cry 3",
"genre": "Action"
},
{
"id": "5",
"name": "GTA San Andreas",
"genre": "RPG"
},
{
"id": "6",
"name": "Hitman",
"genre": "Action"
},
{
"id": "7",
"name": "NFS MW",
"genre": "Sport"
}, {
"id": "8",
"name": "Fifa 16",
"genre": "Sport"
}, {
"id": "9",
"name": "NFS Sen 2",
"genre": "Sport"
}, {
"id": "10",
"name": "Witcher Assasins on King",
"genre": "Adventure"
}
];
in component.html
<div class="container">
<div class="row">
<nav class="navbar">
<input class="form-control" type="text" name="search">
</nav>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Genre</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let game of games | paginate: { itemsPerPage: 2, currentPage: p }">
<td>{{i}}</td>
<td>{{game.name}}</td>
<td>{{game.genre}}</td>
</tr>
</tbody>
</table>
<div>
<pagination-controls (pageChange)="p($event)"></pagination-controls>
</div>
</div>
</div>
If you have already import NgxPaginationModule into app.module.ts, I think it is because you need to restart your project after npm install.
Try ctrl+c and ng serve to restart it again.
I resolved this problem, you need to include in your module.ts following code:
import {NgxPaginationModule} from 'ngx-pagination';
#NgModule({
imports: [ NgxPaginationModule ]
})
You should add CUSTOM_ELEMENTS_SCHEMA in angular-core
and
schemas: [ CUSTOM_ELEMENTS_SCHEMA ] ----add it in your #NgModule({})
refer this link: https://hassantariqblog.wordpress.com/2016/10/12/angular2-template-parse-errors-add-custom_elements_schema-to-the-ngmodule-schemas/
I copied your code and did not face the error you faced. However, the variable p used is actually an event and not a number[].
Replace the table and pagination-control element as per below in app.component.html:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Genre</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let game of games | paginate: { itemsPerPage: 2, currentPage: p }">
<td>{{game.id}}</td>
<td>{{game.name}}</td>
<td>{{game.genre}}</td>
</tr>
</tbody>
</table>
<div>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>
Also, declaring p within app.component.ts isn't required as its the paginationApi that gets used internally.
Side note: The error you are getting suggests that the ngx-pagination is not installed successfully. Please check if you have the ngx-pagination folder copied within your project's node_modules folder successfully.
Demo: https://angular-ijtgcv.stackblitz.io
Try changing the order of "import {NgxPaginationModule} from 'ngx-pagination';"
in app.module.ts
It works out for me
after importing NgxPaginationModule to app.module.ts and stop the local server 'npm update' worked for me !
I have a json and I'm trying to display a form using the json data. I tried to display the indexes using the Switch case, so based on the html control type the index will be displayed. Below is my code
var React = require('react');
var ReactDOM = require('react-dom');
var DATA = {
"indexList": [{
"Label": "Name",
"Type": "text",
"Regex": "",
"Default_Val": "",
"Values": {
"Key": "",
"Value": ""
},
"Validtion Msg": "",
"Script": "",
"Mandatory": "required",
"maxLength":"16",
"minLength":"7",
"format":"Alphanumeric",
"cssClassName": "form-control",
"Placeholder": ""
},
{
"Label": "Select Language",
"Type": "dropdown",
"Regex": "",
"Default_Val": "English",
"Values": [{
"Key": "option1",
"Value": "English"
},{
"Key": "option2",
"Value": "Spanish"
}],
"Validtion Msg": "",
"Script": "",
"Mandatory": "Y",
"maxLength":"",
"minLength":"",
"format":"",
"cssClassName": "form-control",
"Placeholder": ""
},
{
"Label": "Type",
"Field_Type": "radio",
"Regex": "",
"Default_Val": "",
"Values": [{
"Key": "option1",
"Value": "Form1"
}, {
"Key": "option2",
"Value": "Form2"
}, {
"Key": "option3",
"Value": "Form3"
},{
"Key": "option4",
"Value": "Form4"
},{
"Key": "option5",
"Value": "Form5"
}],
"Validtion Msg": "",
"Script": "",
"Mandatory": "Y",
"maxLength":"",
"minLength":"",
"format":"",
"cssClassName": "form-control",
"Placeholder": ""
}
]
};
var Menu = React.createClass({
renderForm: function () {
var data = DATA.indexList;
console.log(data);
return data.map(group =>{
return <div>
<label for={group.Label}>{group.Label}</label>
<div>
switch(group.Type) {
case 'text':
return <input className={group.cssClassName}
id={group.Label}
placeholder={group.Placeholder}
{group.Mandatory}/>
case 'dropdown':
return <select className={group.cssClassName}>
<option value="">{group.Placeholder}</option>
<option for="let values of group.Values.value">{values}</option>
</select>
case 'radio':
return <div className={group.Type}>
<div for="let value of group.Values">
<label><input
name="radios"/>{value}</label>
</div>
</div>
case 'chekbox'
return <div className={group.Type}>
<div for="let value of group.Values">
<label><input name="checkbox"/>{value}</label>
</div>
</div>
}
</div>
</div>
});
},
render: function() {
return (
<div className="container">
<br/>
<div className="panel panel-primary">
<div className="panel-heading">Form</div>
<div className="panel-body">
<form>
<div className="form-group">
<div className="col-xs-5">
{this.renderForm()}
<button type="button" className="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
)}
});
module.exports = Menu
With the above code Im getting an error "Unexpexcted token" and the error is pointing towards the "case". Can anyone help to resolve the issue, Im new to react and Im not able to resolve this issue. Any syntax error in the code?
Because you forgot to put {}, use this:
<div>
{
}
To use any javascript code inside HTML element we need to use {}.
Note: We can't directly use if-else/switch statement inside JSX, use either ternary operator or call a function from JSX and use if-else/switch inside that.
Reference: http://reactjs.cn/react/tips/if-else-in-JSX.html
Check the working example:
var DATA = {
"indexList": [{
"Label": "Name",
"Type": "text",
"Regex": "",
"Default_Val": "",
"Values": {
"Key": "",
"Value": ""
},
"Validtion Msg": "",
"Script": "",
"Mandatory": "Y",
"maxLength":"16",
"minLength":"7",
"format":"Alphanumeric",
"cssClassName": "form-control",
"Placeholder": ""
},
{
"Label": "Select Language",
"Type": "dropdown",
"Regex": "",
"Default_Val": "English",
"Values": [{
"Key": "option1",
"Value": "English"
},{
"Key": "option2",
"Value": "Spanish"
}],
"Validtion Msg": "",
"Script": "",
"Mandatory": "Y",
"maxLength":"",
"minLength":"",
"format":"",
"cssClassName": "form-control",
"Placeholder": ""
},
{
"Label": "Type",
"Type": "radio",
"Regex": "",
"Default_Val": "",
"Values": [{
"Key": "option1",
"Value": "Form1"
}, {
"Key": "option2",
"Value": "Form2"
}, {
"Key": "option3",
"Value": "Form3"
},{
"Key": "option4",
"Value": "Form4"
},{
"Key": "option5",
"Value": "Form5"
}],
"Validtion Msg": "",
"Script": "",
"Mandatory": "Y",
"maxLength":"",
"minLength":"",
"format":"",
"cssClassName": "form-control",
"Placeholder": ""
}
]
};
var Menu = React.createClass({
_renderElement: function(group){
switch(group.Type){
case 'text':
return <input className={group.cssClassName}
id={group.Label}
placeholder={group.Placeholder}
required={group.Mandatory == 'Y'? true: false}/>
case 'dropdown':
return <select className={group.cssClassName}>
<option value="">{group.Placeholder}</option>
{group.Values.map(el => <option key={el.Key} for="let values of group.Values.value">{el.Value}</option>)}
</select>
case 'radio':
return <div className={group.Type}>
<div for="let value of group.Values">
{group.Values.map(el=> <label key={el.Value}><input
name="radios"/>{el.Value}</label>)}
</div>
</div>
case 'checkbox':
return <div className={group.Type}>
<div for="let value of group.Values">
<label><input name="checkbox"/>{value}</label>
</div>
</div>
}
},
renderForm: function () {
var data = DATA.indexList;
return data.map(group =>{
return <div>
<label for={group.Label}>{group.Label}</label>
<div>
{
this._renderElement(group)
}
</div>
</div>
});
},
render: function() {
return (
<div className="container">
<br/>
<div className="panel panel-primary">
<div className="panel-heading">Form</div>
<div className="panel-body">
<form>
<div className="form-group">
<div className="col-xs-5">
{this.renderForm()}
<button type="button" className="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
)}
});
ReactDOM.render(<Menu/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>
swithc-case should be within braces
renderForm: function() {
var data = DATA.indexList;
console.log(data);
return data.map(group => {
return <div >
< label
for = {
group.Label
} > {
group.Label
} < /label> < div >{
switch (group.Type) {
case 'text':
return <input className = {
group.cssClassName
}
id = {
group.Label
}
placeholder = {
group.Placeholder
}
/>
case 'dropdown':
return;
}} < /div> < /div>
});
},
I'm using jquery autocomplete in my project,
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
Json file
[
{ "value": "Saree",
"url": "/collection/saree" },
{ "value": "Lehangas",
"url": "/collection/lehangas" },
{ "value": "Dresses",
"url": "/collection/dresses" },
{ "value": "Tunics",
"url": "/collection/tunics" },
{ "value": "Kurtis",
"url": "/collection/kurtis" },
{ "value": "Blouses",
"url": "/collection/blouses" },
{ "value": "Duppattas",
"url": "/collection/duppattas" },
{ "value": "Shawls",
"url": "/collection/shawls" },
{ "value": "Plazos",
"url": "/collection/plazos" },
{ "value": "Skirts",
"url": "/collection/skirts" },
{ "value": "Patiala",
"url": "/collection/patiala" }
]
my js file:
$( function (){
$( "#tags" ).autocomplete({
source: "/static/admin/json/search.json",
select: function (event, ui) {
window.location = ui.item.url;
}
});
});
It displays all the results no matter which character i enter. I want the string to be matched according to its first letter and the following letters. And also, i want to limit the number of rows displayed to 10.
So , please some one help me with this.
Thanks in advance.
HTML
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
Here I have no idea whether you are getting json data in your js file or not , So In my case json data is available in js file and I am accessing json data in my own way I hope you can manage those things.
JS File
var data = [
{ "value": "Saree",
"url": "/collection/saree" },
{ "value": "Lehangas",
"url": "/collection/lehangas" },
{ "value": "Dresses",
"url": "/collection/dresses" },
{ "value": "Tunics",
"url": "/collection/tunics" },
{ "value": "Kurtis",
"url": "/collection/kurtis" },
{ "value": "Blouses",
"url": "/collection/blouses" },
{ "value": "Duppattas",
"url": "/collection/duppattas" },
{ "value": "Shawls",
"url": "/collection/shawls" },
{ "value": "Plazos",
"url": "/collection/plazos" },
{ "value": "Skirts",
"url": "/collection/skirts" },
{ "value": "Patiala",
"url": "/collection/patiala" }
]
$( function (){
$( "#tags" ).autocomplete({
source: function(request, response){
var lengthOfSearch= request.term.length;
var arr = jQuery.map(data, function( element, index ) {
if(element.value.substr(0,lengthOfSearch).toLowerCase() === request.term.toLowerCase()){
return element;
}
});
response(arr.slice(0,10));
},
select: function (event, ui) {
window.location = ui.item.url;
}
});
});
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
My question refers specifically to http://api.jquery.com/event.target/#example-1
If you use a span in the <li> or other tag to change the style such as <b> as I have done here, that part of the element won't trigger the JQuery function to toggle it's children. How might one go about making this work?
HTML:
<ul>
<li><b>This doesn't work,</b> this does
<ul>
<li>sub item 1-a</li>
<li>sub item 1-b</li>
</ul>
</li>
<li>item 2
<ul>
<li>sub item 2-a</li>
<li>sub item 2-b</li>
</ul>
</li>
</ul>
JavaScript:
function handler(event) {
var $target = $(event.target);
if( $target.is("li") ) {
$target.children("ul").toggle();
}
}
$("ul").click(handler).find("ul").hide();
To keep using your current form, I'd suggest using closest():
function handler(event) {
$(event.target).closest('li').children("ul").toggle();
}
$("ul").click(handler).find("ul").hide();
JS Fiddle demo.
Though for my own use I'd prefer:
$('li').on('click', function(e){
e.stopPropagation();
$(this).find('ul').toggle();
});
JS Fiddle demo.
References:
closest().
on().
A complete example of e.target children and closest with datatable and external data.
HtML
<!DOCTYPE html>
<html lang="en">
<head>
<title>example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="js/jquery.dataTables.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="col-md-12 sectionone">
<div id="coxtable">
<div class="col-md-3 outerblock" id="section1"><div class="blocks section1"><h6 class="span1">Section1</h6><span class="span1a">Section1a</span></div></div>
<div class="col-md-3 outerblock" id="section2"><div class="blocks section2"><h6 class="span1">Section2</h6><span class="span1a">Section2a</span></div></div>
<div class="col-md-3 outerblock" id="section3"><div class="blocks section3"><h6 class="span1">Section3</h6><span class="span1a">Section3a</span></div></div>
<div class="col-md-3 outerblock" id="section4"><div class="blocks section4"><h6 class="span1">Section4</h6><span class="span1a">Section4a</span></div></div>
</div>
</div>
<div class="sectiontwo col-md-12">
<table id="example">
<thead>
<tr>
<th>name</th>
<th>stargazerscount</th>
<th>forkscount</th>
<th>description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="testmodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="modalbtn btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Javascript
$(document).ready( function () {
var tables=$('#example').DataTable( {
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json",
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
/*onclick filter*/
$(".outerblock").click(function(e){
$("#testmodal").modal('show');
var item=$(e.target).closest('span').text();
$( ".modalbtn" ).one( "click", function(event) {
$(this).off(event);
alert(item)
var tables=$('#example').DataTable( {
"destroy":true,
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json?id="+item,
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
});
});
$("#example").delegate("tbody tr td:first-child", "click", function(e){
var item=$(e.target).text();
//alert(item);
$("#testmodal").modal('show');
$( ".modalbtn" ).one( "click", function(event) {
$(this).off(event);
alert(item);
var tables=$('#example').DataTable( {
"destroy":true,
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json?id="+item,
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
});
});
});
json
[{
"name": "mango",
"stargazerscount": 526,
"forkscount": "critical",
"description": "fruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
}
]
Can't get jsTree nodes to expand collapse. I must be missing something very simple.
This is the script
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.jstree.js") %>"></script>
<script type="text/javascript">
$(document).ready(function () {
Refresh();
});
function Refresh() {
$('#technologyTree').jstree({
"json_data": {
"ajax": {
"url": "/TechnologyVersions/TechnologiesTreeAjax",
"type": "GET",
"dataType": "json"
}
},
"plugins": ["themes", "json_data", "ui"],
"themes": {
"theme": "default",
"dots": true,
"icons": true,
"url": " <%= Url.Content("~/Content/jsTree/themes/default/style.css") %> "
}
});
}
</script>
I can see the tree populated correctly and the json result from the controller seems correct. However when I click on those expand/collapse arrows nothing happens.
The problem was that conflict with jQuery validation plugin. Upgrading to latest version of jQuery validation plugin solves the problem.
JsTree conflicts with jquery.validate