I would like to create an element which changes the parameters of an iron-ajax element located in another root (its parent)
Parent:
<iron-ajax id="ajaxService"
auto
url="http://..."
method="GET"
handle-as="json"
params="{{ajaxParams}}"
last-response="{{datas}}"></iron-ajax>
<template is="dom-repeat" items="[[datas]]">
<div>[[item]]</div>
</template>
and the child:
<dom-module id="my-pagination">
<template>
<style include="shared-styles">
:host {
display: block;
}
.disabledButton
{
color: #DDDDDD;
}
</style>
<div class="horizontal center layout">
<div class="flex"></div>
<span>
<span id="rangeStart"></span>-<span id="rangeEnd"></span> sur <span>[[data.total_count]]</span>
</span>
<paper-icon-button id="prevPage" class="disabledButton" icon="mdi:chevron-left" on-tap="prevPage" disabled></paper-icon-button>
<paper-icon-button id="nextPage" icon="mdi:chevron-right" on-tap="nextPage"></paper-icon-button>
</div>
Polymer({
is: 'my-pagination',
properties: {
ajaxId: String,
offset: {
type: Number,
value: 0
},
limit: {
type: Number,
value: 6
},
usersAjaxParams: {
type: String,
computed: "processParams(offset, limit)"
}
},
processParams: function (offset, limit) {
return {
offset: offset,
limit: limit,
};
},
computeRange: function (offset, limit, nodeRangeStart, nodeRangeEnd) {
nodeRangeStart.innerText = offset;
nodeRangeEnd.innerText = offset + limit;
},
prevPage: function () {
this.offset = this.offset - this.limit;
this.computeRange(this.offset, this.limit, this.$.rangeStart, this.$.rangeEnd);
};
},
nextPage: function () {
// pretty much same code as above, but for the "next" page
}
},
attached: function () {
this.computeRange(this.offset, this.limit, this.$.rangeStart, this.$.rangeEnd);
}
});
So what I am trying to achieve here is to create a '' element which i could use by providing the ajax node ID as property, and the pagination element would change the ajax parameters whenever I click the "next" or "previous" page button.
And while we're at it, how I can pass datas to the child as weel? (I will need '[[data.total_count]]' later on)
Thanks in advance!!
Related
Here's the template where my button and contactList1 reside:-
<template>
<div class="chat-app">
<button v-on:click="displayList1()">Contacts List 1</button> //Button
<Conversation :contact="selectedContact" :messages="messages" #new="saveNewMessage" v-bind:class="{conversation:conversation}" />
<ContactsList :contacts="contacts" #selected="startConversationWith" v-bind:class="{contactsList1:contactsList1}"/> //contactsList
</div>
</template>
The object is default set to false
data() {
return {
contactsList1: {
default: false,
},
},
Method:-
displayList1()
{
this.contactsList1 = false;
},
Style:-
<style lang="scss" scoped>
.chat-app {
display: flex;
}
.contactsList1 {
background-color: black;
}
</style>
Even after the object being false the css is being applied, can anyone tell me what's wrong. I am just a beginner, Please help.
Your data function is returning the object contactsList1 and the full path to check the data type is this.contactsList1.default
You should also name your variables differently.
So here is a basic example on how to bind a Boolean datatype to your component class:
new Vue({
el: "#app",
data() {
return {
firstClass: {
status: false
}
}
},
methods: {
changeColour() {
this.firstClass.status = true
}
}
})
.styleFirstClass {
background: red
}
.itemBox {
padding:30px;
margin:30px;
border: 1px solid #444;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button #click="changeColour()">Click to bind class</button>
<div class="itemBox" :class="{styleFirstClass: firstClass.status}">
This is some text
</div>
</div>
When I dispatch "REMOVE_TODO" on button click it does what I want it to do, the problem I'm having is that when it executes. It doesn't return the correct current array length.
Now when I click an item, it will dispatch "TOGGLE_TODO" which will change the font color and put a line-through the text.
Now while toggled and I click the "Clear Completed" button, it toggles "REMOVE_TODO" and works fine. It removes the items toggled. The problem I'm having is that The number doesn't reflex the current amount of items left in the list when I click the button once..
However if I click the button once more (or however many more times) the number updates to the correct total
This is my app code
import React, { useState, useReducer } from 'react';
import { Reducer } from './reducers/reducer';
import './App.css';
function App() {
const [{ todos, todoCount }, dispatch] = useReducer(Reducer, {
todos: [],
todoCount: 0,
completedCount: 0
});
const [text, setText] = useState("");
return (
<div className="App">
<header className="App-header">
<div>ToDo List [ <span style={{color: '#61dafb', margin: '0px', padding: '0px'}}>{ todoCount }</span> ]</div>
<div>
{ todos.map((todo, index) => (
<div
key={index}
onClick={() => dispatch(
{ type: "TOGGLE_TODO", index }
)}
style={{
fontFamily: 'Tahoma',
fontSize: '1.5rem',
textDecoration: todo.completed ? 'line-through' : "",
color: todo.completed ? '#61dafb' : 'dimgray',
cursor: 'pointer'
}}
>
{ todo.text }
</div>
))
}
<form
onSubmit={e => {
e.preventDefault();
text.length === 0 ? alert("No Task To Add!") : dispatch({ type: "ADD_TODO", text });
setText("");
}}
>
<input
type="text"
name="input"
value={ text }
onChange={e => setText(e.target.value)}
/><br />
<button>
Add
</button>
</form>
<button onClick={() => {dispatch({ type: "REMOVE_TODO" })}}>
Clear Completed
</button>
</div>
</header>
</div>
);
}
export default App;
and this is my reducer code
export const Reducer = (state, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
todos: [...state.todos, { text: action.text, completed: false, id: Date.now() }],
todoCount: state.todoCount + 1,
completedCount: 0
};
case 'TOGGLE_TODO':
return {
todos: state.todos.map((todo, index) => index === action.index ? { ...todo, completed: !todo.completed } : todo),
todoCount: state.todoCount,
completedCount: 0
};
case 'REMOVE_TODO':
return {
todos: state.todos.filter(t => !t.completed),
todoCount: state.todos.length
}
default:
return state;
};
};
Does anyone have any idea what I'm doing wrong, or what I'm not doing? Thanks in advance!
Remove "todoCount" from reducer, then derive count using "todos":
<div>
ToDo List [{" "}
<span style={{ color: "#61dafb", margin: "0px", padding: "0px" }}>
{todos.filter((todo) => !todo.completed).length}
</span>{" "}
]
</div>
View in CodeSandbox here
I am trying to build vue js applications but I am getting following errors .
Severity Code Description Project File Line Suppression State
Warning TS1005 (JS) ':' expected. VuejsApp JavaScript Content Files C:\Users\Khundokar Nirjor\Documents\Visual Studio 2017\Projects\VuejsApp\VuejsApp\src\App.vue 19 Active
This is Home.vue code
<template>
<div id="databinding">
<div id="counter-event-example">
<p style="font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
<button-counter v-for="(item, index) in languages"
v-bind:item="item"
v-bind:index="index"
v-on:showlanguage="languagedisp"></button-counter>
</div>
</div>
</template>
<script>
// import Home from './components/Home.vue';
// import component1 from './components/component1.vue';
export default {
name: 'app',
Vue.components('button-counter', {
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
data: function () {
return {
counter: 0
}
},
props: ['item'],
methods: {
displayLanguage: function (lng) {
console.log(lng);
this.$emit('showlanguage', lng);
}
},
});
new Vue({
el: '#databinding',
data: {
languageclicked: "",
languages: ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
},
methods: {
languagedisp: function (a) {
this.languageclicked = a;
}
}
})
};
</script>
<style>
</style>
I want to display list of buttons and when i clicked the any of them button , I want to display the message that button is clicked.
I believe your error is related to the component. First, the function name is wrong. The correct name is Vue.component and it is Vue.components. Second, your component declaration is not correct.
I created this codepen where you can see how to declare the component globally and locally.
const buttonCounter = {
template:
`<button #click="displayLanguage(item)">
<span style="font-size:25px;">{{ item }}</span>
</button>`,
props: ["item"],
methods: {
displayLanguage: function(lng) {
this.$emit("show-language", lng);
}
}
}
// Declare your component globally, will be able to access it in any another component in the application
Vue.component("button-counter", buttonCounter );
new Vue({
el: "#databinding",
// declarete your component locally, it only will be available inside this context
components:{
'button-counter-2' : buttonCounter
},
data: function() {
return {
languageclicked: "",
languages: ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
};
},
methods: {
languageDisp: function(a) {
this.languageclicked = a;
}
}
});
body {
margin: 20px;
}
.btn-wrapper {
display: flex;
margin-bottom: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="databinding">
<div id="counter-event-example">
<p style="font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
<div class="btn-wrapper">
<button-counter v-for="(item, index) in languages" :item="item" :key="item" #show-language="languageDisp"/>
</div>
<button-counter-2 v-for="(item, index) in languages" :item="item" :key="item" #show-language="languageDisp"/>
</div>
</div>
In AmMap, "homeButtonClicked" event is present which got triggered when you click on home button.
I want to trigger that event manually.
Is there any way to do so?
To completely zoom out the map, use zoomToSelectedObject() ant pass in map.dataProvider as a parameter.
I.e.:
map.zoomToSelectedObject(map.dataProvider);
Working demo:
var map = AmCharts.makeChart( "chartdiv", {
"type": "map",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true
},
"areasSettings": {
"autoZoom": true
}
} );
function zoomOut() {
map.zoomToSelectedObject(map.dataProvider);
}
#chartdiv {
width: 100%;
height: 250px;
}
<script src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<input type="button" value="Zoom Out" onclick="zoomOut();" />
<div id="chartdiv"></div>
To trigger an event on the map or any amCharts object for that matter, you can use fire() method. I.e.:
map.fire("homeButtonClicked", {
type: "homeButtonClicked",
chart: map
});
Here's a working example:
var map = AmCharts.makeChart( "chartdiv", {
"type": "map",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true
},
"areasSettings": {
"autoZoom": true
}
} );
map.addListener("homeButtonClicked", function(event) {
alert('homeButtonClicked');
});
function testEvent() {
map.fire("homeButtonClicked", {
type: "homeButtonClicked",
chart: map
});
}
#chartdiv {
width: 100%;
height: 280px;
}
<script src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<input type="button" value="trigger event" onclick="testEvent();" />
<div id="chartdiv"></div>
It seems the code has changed since this was last answered. For me, this is what works.
map.clickMapObject(map.dataProvider)
(For martynasma) You still have an error on trigger event method (testEvent). Correct is:
map.fire({
type: "homeButtonClicked",
chart: map
});
List item
I have a page which loads a kendo TreeList by pressing a button. The data is for the moment statically defined in a variable where it stays as a basis for the Kendo TreeList datasource.
I have a datasource definition which I mostly copied from Telerik Website.
I have a treelist with a couple of requirements in terms of CRUD.
level1 - nothing
level2 - add new childnodes only
level3 - edit and delete
Edit should be doubleclick on a level3 item
CRUD command buttons need to be icon-only (no text in the buttons)
I could not achieve this with the buildin CRUD controls unfortunately so I used a Template column where the buttons are placed based on their "Type" field.
Now this has worked but after some changes which I can't undo somehow the add function does not work anymore. It works but new childnode is only visible after a edit ordelete of another node. (as if the change event is not triggered during add). The Add button in the treeList calls a function addProduct where at the end I try to pushCreate directly to the datasource. However the Transport.create is never invoked. It only gets invoked after another Crud action triggers it
Can anybody see what's wrong and couldn't this all be achieve with much easier approach?
Here's the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Grid - CRUD operations with local data</title>
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="Scripts/jquery-2.1.3.min.js"></script>
<!--<script src="Scripts/kendo.all.min.js"></script>-->
<script src="Scripts/kendo.all.js"></script>
</head>
<body>
<style>
.hidden {
display: none;
}
.k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {
min-width: 0px;
padding-left: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
}
</style>
<div id="buttons">
<br />
<p>
<button name="clear" id="clear" onclick="myclear()">Clear grid</button>
<button name="load" id="load" onclick="loadLocal()">Load from local DB</button>
</p>
<br />
version 1.01<br />
<br />
</div>
<div id="treelist"></div>
<script id="btn-template" type="text/x-kendo-template">
# if (Code == "Product") { #
<a id="btnupdate" class="k-button k-button-icontext k-grid-update column hidden" title="Update product" onclick="update(this)" href="\#"><span class="k-icon k-update"></span></a>
<a id="btndelete" class="k-button k-button-icontext k-grid-delete column" title="Delete product" data-command="destroy" href="\#"><span class="k-icon k-delete"></span></a>
# } else if (Code == "Requirement") { #
<a class="k-button k-button-icontext k-grid-add column" title="Add a product to this requirement" onclick="addProduct(this)" href="\#"><span class="k-icon k-add"></span></a>
# } #
</script>
<script>
var EPDdata // For holding the data of the TreeList
function loadLocal() {
EPDdata = [
{ Id: 1, Description: "Item1", Code: "Category", parentId: null },
{ Id: 2, Description: "Item2", Code: "Requirement", parentId: 1 },
{ Id: 3, Description: "Item3", Code: "Product", parentId: 2 },
{ Id: 4, Description: "Item4", Code: "Requirement", parentId: 1 },
{ Id: 5, Description: "Item5", Code: "Product", parentId: 4 },
{ Id: 6, Description: "Item6", Code: "Product", parentId: 4 },
{ Id: 7, Description: "Item7", Code: "Requirement", parentId: 1 },
{ Id: 8, Description: "Item8", Code: "Requirement", parentId: 1 },
{ Id: 9, Description: "Item9", Code: "Product", parentId: 8 },
{ Id: 10, Description: "Item10", Code: "Product", parentId: 8 }
]
LoadTree();
};
function LoadTree() {
var EPDdataNextID = EPDdata.length + 1;
var LocaldataSource = new kendo.data.TreeListDataSource({
transport: {
read: function (e) {
// on success
e.success(EPDdata);
},
create: function (e) {
// assign an ID to the new item
e.data.Id = EPDdataNextID++;
// save data item to the original datasource
EPDdata.push(e.data);
// on success
e.success(e.data);
},
update: function (e) {
// locate item in original datasource and update it
EPDdata[getIndexById(e.data.Id)] = e.data;
// on success
e.success();
},
destroy: function (e) {
// locate item in original datasource and remove it
EPDdata.splice(getIndexById(e.data.Id), 1);
// on success
e.success();
}
},
error: function (e) {
// handle data operation error
alert("Status: " + e.status + "; Error message: " + e.errorThrown);
},
pageSize: 10,
expanded: true,
batch: false,
schema: {
model: {
id: "Id",
expanded: true,
fields: {
Id: { type: "number", editable: false, nullable: true },
Description: { type: "string", validation: { required: true } },
Code: { type: "string" },
parentId: { type: "number", editable: true, nullable: true }
}
}
}
});
$("#treelist").empty(); // only 1 treelist on the page please
$("#treelist").kendoTreeList({
dataSource: LocaldataSource,
pageable: false,
edit: onEdit,
columns: [
{ field: "Description", title: "Description", width: "400px" },
{ field: "Code", width: "120px" },
{ field: "Id", title: "ID", width: "30px" },
{ field: "parentId", title: "PID", width: "30px" },
{ width: "35px", template: $("#btn-template").html() },
{ command: ["create", "edit", "destroy"] }
],
editable: "inline"
});
var treeList = $("#treelist").on("dblclick", function (e) {
var treeList = $("#treelist").data("kendoTreeList");
var rowindex = e.target.parentNode.rowIndex; // get rowindex
var tr = $(e.target).closest("tr"); // get the current table row (tr)
var dataItem = $("#treelist").data("kendoTreeList").dataItem(tr);
if (dataItem.Code == "Product") {
$("#treelist").find(".edit").addClass("hidden");
$("#treelist").find(".edit").removeClass("edit");
$("#treelist").find(".delete").removeClass("hidden");
$("#treelist").find(".delete").removeClass("delete");
treeList.saveRow(); // first save all other rows
treeList.editRow(tr[0]);
};
}); // double click function
}; // Function CreatetreeList
function onEdit(arg) {
var tr = $(arg.container);//.closest("tr"); // get the current table row (tr)
tr.find("#btndelete").addClass("hidden"); //remove btndelete from commandcolumn
tr.find("#btndelete").addClass("delete"); //put class to select the btn later on
tr.find("#btnupdate").removeClass("hidden"); //make btnupdate visible in commandcolumn
tr.find("#btnupdate").addClass("edit"); //put class to select the btn later on
};
function update(e) { // update the edited row
var tr = $(e).closest("tr"); // get the current table row (tr)
var treeList = $("#treelist").data("kendoTreeList");
treeList.saveRow();
tr.find("#btndelete").removeClass("hidden");
tr.find("#btndelete").removeClass("delete");
tr.find("#btnupdate").addClass("hidden");
tr.find("#btnupdate").removeClass("edit");
};
function addProduct(e) {
var treeList = $("#treelist").data("kendoTreeList");
var dataSource = treeList.dataSource;
var data = dataSource.data;
var tr = $(e).closest("tr"); // get the current table row (tr)
var dataItem = treeList.dataItem(tr);
dataSource.pushCreate({ Id: 15, Description: "New", Code: "Product", parentId: dataItem.Id });
alert("Done");
};
function getIndexById(id) {
var idx,
l = EPDdata.length;
for (var j; j < l; j++) {
if (EPDdata[j].Id == id) {
return j;
}
}
return null;
}
</script>
</body>
</html>
I found the answer !!!
The datasource pagesize is set to 10 and the TreeList was set to paging: false. In all my tests I started with sample data of 10 nodes. All the time I was adding an 11th and 12th record which wasn't showing up until I deleted another node...
Do these things only happen to me?