I want to convert this very useful example of a kendo-ui autocomplete in an angular2 app into a proper angular2 web component that I can then export and use in an html page:
$(function () {
var data = [
"Angular",
"Kendo UI",
"TypeScript"
];
var input = document.createElement("input");
input.id = "technologies";
var technologies = document.body.appendChild(input);
<kendo.ui.AutoComplete>$(technologies).kendoAutoComplete({
dataSource: data,
filter: "startswith",
placeholder: "Select technology...",
separator: ", "
}).data("kendoAutoComplete");
});
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script src="//cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<script src="app.js"></script>
This is as far I've got:
/// <reference path="../../typings/jquery/jquery.d.ts" />
/// <reference path="../../typings/kendo-all/kendo.all.d.ts" />
import {Component, View} from 'angular2/angular2';
#Component({
selector: 'auto-complete'
})
#View({
template: '<input id="autocomplete" />'
})
export class AutoComplete extends kendo.ui.AutoComplete {
// PROPERTIES AND METHODS GO HERE. BUT WHAT ONES?
// http://docs.telerik.com/KENDO-UI/api/javascript/ui/autocomplete
}
This is a start point code sample:
#Component({
selector: 'auto-complete',
properties: ['datasource']
})
export class AutoComplete implements AfterContentInit {
items: string[];
selectedValue: string;
constructor(elelemtRef: ElementRef) {
var _this = this;
this.elementRef = elementRef;
this.filter: "startswith",
this.placeholder: "Select technology...",
this.separator: ", "
}
afterContentInit() {
$(this.elementRef.domElement).kendoAutoComplete(this).data("kendoAutoComplete");
}
}
Related
I had grabbed some code for test purpose, I have tried to fixing "item not define" error but I am stuck.
//Blade View
<v-app id="app" v-cloak><div class="card" :posts="{{$posts}}"></div></v-app>
//Vuejs template
<table striped hover :items="imageList"> <img :scr="'/storage/image/'+data.items.image"></table>
Vue Js:
<script>
export default {
// name: "ExampleComponent",
props: \['posts'\],
data() {
return {
imageList: \[\]
};
},
mounted() {
const fetch = this.fetch_image_list();
},
methods: {
fetch_image_list() {
let items = \[\];
if (Array.isArray(this.posts.data) && this.posts.length.data) {
this.posts.data.forEach((post, key) => {
let currentImage = {
id: post.id,
name: post.name,
image: post.img
};
items.push(currentImage);
});
this.imageList = items;
}
}
}
};
</script>]
item is not define
Isn't it because you are "calling" :
data.items.image instead of items[index].image ?
I'm using laravel-vue-i18n-generator package to handle text translation in vuejs component in my laravel project. I've set up app.js like below:
import VueInternationalization from 'vue-i18n';
import Locale from './vue-i18n-locales.generated';
Vue.use(VueInternationalization);
const lang = 'fa';
const i18n = new VueInternationalization({
locale: lang,
messages: Locale
});
const app = new Vue({
el: '#app',
i18n,
});
And in component:
<template>
<a href="#" class="tip" title="" :title="$t('component.delete.title')" #click.prevent="deleteAction">
<i :class="icon"></i>
</a>
</template>
<script>
import swal from 'sweetalert';
import axios from 'axios';
export default {
inject: ['$i18n'],
props:{
endpoint: {
type: String,
required: true,
},
icon: {
type: String,
default: 'fa fa-trash'
},
message: {
type: String,
default: this.$i18n.t('component.delete.are_you_sure'),
},
confirm: {
type: String,
default: this.$i18n.t('component.delete.confirm'),
},
cancel: {
type: String,
default: this.$i18n.t('component.delete.cancel'),
},
success: {
type: String,
default: this.$i18n.t('component.delete.success'),
},
failed: {
type: String,
default: this.$i18n.t('component.delete.failed'),
},
},
mounted() {
console.log(this);
},
methods:{
deleteAction(){
const vm = this;
swal({
text: this.message,
buttons: {
catch: {
text: this.confirm,
value: "delete",
},
cancel: this.cancel
},
dangerMode: true
}).then(name => {
if (!name) return false;
axios.delete(vm.endpoint)
.then(function (response) {
swal( vm.$i18n.t('component.delete.congrats'),vm.success, 'success').then(() => {
location.reload();
});
})
.catch(function (error) {
swal( vm.$i18n.t('component.delete.error'), vm.failed, 'error');
});
});
}
}
}
</script>
<style scoped>
</style>
Fortunately $t('component.delete.title') works correctly on template part, but in script part, I've got this error:
Uncaught TypeError: Cannot read property 't' of undefined
Where do I go wrong?
This worked for me inside the script part of a component:
this.$t('message')
In vue.js if you get an error like
"_vm.translate is not a function"
It is most probably that you havent import the i18n package which contains translate method.This error occures sometimes when you try to add translate using v-bind to html attributes. Example:
<a-form-item class="mb-0" :label="`${translate('person_name.firstname')}`">
following steps can solve the error.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script lang="ts">
import { translate, i18n } from '#/i18n';
#Component({
components: {
AgIconBase
},
methods:{
translate
}
})
</script>
This works for me.
I have a locales folder with index.js importing the two language files im using,
in this file add.
global.$t = Vue.t
Referred to in the script part directly as
return $t('backend.faq.main')
I'm developing a function on my website where a user should be able to edit his or hers own topic using ckeditor 5 and a textarea. The textarea is placed inside a modal. However, when I try to prefill the textarea when a user pushes a button, nothing goes inside the textarea. I have tried the following:
var editor;
ClassicEditor
.create(document.querySelector('#edit-reply-modal'))
.then(editor => {
editor = editor;
})
$(".toggle-edit-modal").click(function(e) {
e.preventDefault();
editor.setData("<p>Testing</p>"));
$("#edit-reply-modal").html("<p>Testing</p>");
});
Any help is appreciated.
I see you have one ')' more than needed editor.data.set("<p>Testing</p>"));
If you still can't set data, than try to set data like this :
editor.data.set("<p>Testing</p>");
Html :
<!-- The editable element in the editor's DOM structure. -->
<div class="... ck-editor__editable ..." contenteditable="true">
<!-- Editable content. -->
</div>
vanilla Javascript :
// A reference to the editor editable element in the DOM.
const domEditableElement = document.querySelector( '.ck-editor__editable' );
// Get the editor instance from the editable element.
const editorInstance = domEditableElement.ckeditorInstance;
// Use the editor instance API.
editorInstance.setData( '<p>Hello world!<p>' );
Docs : https://ckeditor.com/docs/ckeditor5/latest/builds/guides/faq.html
HTML Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/24.0.0/classic/ckeditor.js"></script>
<textarea id="edit-reply-modal"><p>Old Data</p></textarea>
<button id="toggle-edit-modal">Fill New Data</button>
JAVASCRIPT Code:
let YourEditor;
ClassicEditor
.create(document.querySelector('#edit-reply-modal'))
.then(editor => {
window.editor = editor;
YourEditor = editor;
})
$('#toggle-edit-modal').on('click', function() {
YourEditor.setData('<p>This is the new Data!</p>');
})
let YourEditor;
ClassicEditor
.create(document.querySelector('#edit-reply-modal'))
.then(editor => {
window.editor = editor;
YourEditor = editor;
})
$('#toggle-edit-modal').on('click', function() {
YourEditor.setData('<p>This is the new Data!</p>');
})
button{
margin-top:20px;
padding: 5px;
color: white;
background: #00F;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/24.0.0/classic/ckeditor.js"></script>
<textarea id="edit-reply-modal"><p>Old Data</p></textarea>
<button id="toggle-edit-modal">Fill New Data</button>
According to the documentation unlike ckeditor4 there is not any CKEDITOR.instances, so if you want to update your editor content, you can create a global instance of yor editor and then use setData() in order to update content by ajax.
Sample Code:
let myEditor;
ClassicEditor
.create(document.querySelector('#menuContent'), {
language: {
// The UI will be English.
ui: 'fa',
// But the content will be edited in Arabic.
content: 'fa'
},
placeholder: 'متن منو را وارد نمایید...'
})
.then(editor => {
window.editor = editor;
myEditor = editor;
})
.catch(err => {
console.error(err.stack);
});
function ShowMenuDetails(id) {
$.ajax({
url: '#Url.Action("MenuDetails", "Admin")',
type: 'POST',
data: JSON.stringify({ id: id }),
dataType: 'json',
contentType: 'application/json; charset=utf-8',
cache: false,
success: function (data) {
$("#menuTitle").val(data.MenuTitle);
$("#order").val(data.MenuOrder);
myEditor.setData(data.MenuContent);
$("#myModal").modal();
},
error: function (err) {
alert(err);
},
statusCode: {
404: function (content) { alert(content); },
500: function (content) { alert(content); }
}
});
}
Sorry, my English is so bad!
File: app.js
window.auth_id = 0;
Vue.component('block-header-user-control', require('./HeaderComponent.vue'));
new Vue({
el: '#application'
});
File HeaderComponent.vue
<template lang="html">
<header-guest v-if="!auth"></header-guest>
<header-auth v-else></header-auth>
</template>
<script>
import HeaderGuest from './HeaderUserGuest.vue';
import HeaderAuth from './HeaderUserAuth.vue';
export default {
data: function () {
return {
auth: window.auth_id
}
},
components: {
'header-guest': HeaderGuest,
'header-auth': HeaderAuth,
},
methods: {},
}
</script>
File: HeaderUserGuest.vue
<script>
export default {
template: '#header-user-auth', // Not working,
// template: `<div>cascaaSA</div>`, // working
data() {
return {}
},
mounted() {
console.log('Created Guest');
},
}
</script>
File: HeaderUserAuth.vue
<script>
export default {
template: '#header-user-auth',
name: 'header-auth',
data() {
return {}
},
created() {
console.log('Created Auth');
},
}
</script>
File: index.blade.php
<div id="application">
<script type="text/x-template" id="header-user-guest">
Guest
</script>
<script type="text/x-template" id="header-user-auth">
Logged
</script>
<block-header-user-control></block-header-user-control>
</div>
"Created Guest" is displayed in browser console, but the "block-header-user-control" menu does not display "Guest".
Please help me. SPECIAL THANKS!!
====================
Thank all! It worked with html. Text not working
<div id="application">
<script type="text/x-template" id="header-user-guest">
<div>Guest</div>
</script>
<script type="text/x-template" id="header-user-auth">
<div>Logged</div>
</script>
<block-header-user-control></block-header-user-control>
</div>
You might need to move your templates outside of the scope of the application - move them below #application.
I am trying to code two filteringselects which should both change according to data entered into any of the forms.
So data entered into fs1 should trigger changes in fs2.
Data entered into fs2 should trigger changes in fs1.
I am in a spring environment which in my case means that the dojo code is in a jsp file and the filtering select fields are populated through a Controller class on the server side using #ModelAttribute annotations to make the data available as a variable in the jsp file.
I have the relation data on the Java side so it's available through the controller.
Here is what confuses me at the moment.
I am new to DOJO and the documentation on the DOJO support site is a little hard to grasp for me. I would like to see a conceptual list of what is needed to accopmplish and connect the separate stores of my filteringselects.
When there is a change in one of the filteringselects, how do I inform the controllerclass of the changes and send the data that remains in the filteringselect?
This question could also be read as: how can I call a method with input parameters that hold the data available in the edited filteringselect?
I suggest we work on this in two incremental parts:
Get the first FilteringSelect's onChange event working
Wire them up to use server data stores
The following code sample takes a Dojo Campus' codependent FilteringSelect example and simplifies it so that its data stores are local. It shows how to programmatically instantiate two FilteringSelects with the second being dependent on the first by an onChange event handler.
Can you please try running it and let me know if you get it working?
Once we get your first FilteringSelect triggering filtering on the second, I will edit to add an explanation on how to convert them to use server side data stores.
<html>
<head>
<title>Test File</title>
<link type="text/css" rel="stylesheet" href="dijit/themes/tundra/tundra.css"/>
</head>
<body class="tundra">
<label for="state">State:</label>
<input id="state">
<label for="city">City:</label>
<input id="city">
<script type="text/javascript" src="dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.FilteringSelect");
dojo.require("dojo.data.ItemFileReadStore");
dojo.addOnLoad(function() {
var cityJson = {
label: 'name',
items: [{ name: 'Albany', state: 'NY' },
{ name: 'New York City', state: 'NY' },
{ name: 'Buffalo', state: 'NY' },
{ name: 'Austin', state: 'TX' },
{ name: 'Houston', state: 'TX' }]
};
var stateJson = {
identifier: 'abbreviation',
label: 'name',
items: [ { name: 'New York', abbreviation: 'NY' },
{ name: 'Texas', abbreviation: 'TX' } ]
};
new dijit.form.ComboBox({
store: new dojo.data.ItemFileReadStore({
data: cityJson
}),
autoComplete: true,
query: {
state: "*"
},
style: "width: 150px;",
required: true,
id: "city",
onChange: function(city) {
dijit.byId('state').attr('value', (dijit.byId('city').item || {
state: ''
}).state);
}
},
"city");
new dijit.form.FilteringSelect({
store: new dojo.data.ItemFileReadStore({
data: stateJson
}),
autoComplete: true,
style: "width: 150px;",
id: "state",
onChange: function(state) {
dijit.byId('city').query.state = state || "*";
}
},
"state");
});
</script>
</body>
</html>
in the namespace of the jsp:
xmlns:springform="http://www.springframework.org/tags/form"
sample form:
<springform:form action="#" >
<label for="country">Country:</label>
<springform:select id="country" path="country" items="${countryList}" itemLabel="country" itemValue="id"/>
<div id="citySelectDiv"></div>
</springform:form>
javascript code:
<script type="text/javascript">
<![CDATA[
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileReadStore");
function countryChanged(dataFromServer){
//convert json to dojo filteringSelect options
var options = {
identifier: 'id',
label: 'city',
items: dataFromServer
};
var cityStore =new dojo.data.ItemFileReadStore({data : options});
// create Select widget, populating its options from the store
if (!dijit.byId("citySelectDiv")) {
//create city selction combo
new dijit.form.FilteringSelect({
name: "citySelectDiv",
store: cityStore,
searchAttr : "city",
}, "citySelectDiv");
}else{
//if already created the combo before
dijit.byId('citySelectDiv').set('value',null);
dijit.byId('citySelectDiv').store = cityStore;
}
}
Spring.addDecoration(new Spring.ElementDecoration({
elementId : "country",
widgetType : "dijit.form.FilteringSelect",
widgetAttrs : {
promptMessage: "Select a Country",
required : true,
onChange : function(){
var xhrArgs = {
url: "ajax/country/" +dijit.byId('country').get('value'),
handleAs: 'json',
load: function(dataFromServer) {
countryChanged(dataFromServer);
}
};
//make the ajax call
dojo.xhrGet(xhrArgs);
}
}
}));
Sample Controller method:
#ResponseBody
#RequestMapping("/ajax/country/{country}")
public List<City> clientSelection(#PathVariable("country") String country ) {
log.info("Country = {} ",country);
return cityService.findCitiesByCountry(country);
}