Hello
i am coding a web page of posts, where I'd like to add a tag system, something like stack overflow.
I have found many useful codes already made like Tag it by: aehlke.
The problem it´s that i want to use almost all the code by vuejs.org.
I am at laravel 5.3 framework and vuejs also using jquery.
Coul you please help me with the js to make a "separated by comma" tag that only can use the tags already in Tags table.
i used the example in vuejs.org to make made a searchbox that searches at a vue var and displays it at the bottom, i tought i coul use laravel variables to make the vuejs var and then search, but how could i make that each time a value its clicked on the table at bottom, the text fields updates with a tag inside.
<script type="text/x-template" id="grid-template">
<table>
<tbody>
<tr v-for="
entry in data
| filterBy filterKey
| orderBy sortKey sortOrders[sortKey]">
<td v-for="key in columns">
{{entry[key]}}
</td>
</tr>
</tbody>
</table>
</script>
<div id="demo">
<form id="search">
Search <input name="query" v-model="searchQuery">
</form>
<demo-grid
:data="gridData"
:columns="gridColumns"
:filter-key="searchQuery">
</demo-grid>
</div>
Vue.component('demo-grid', {
template: '#grid-template',
props: {
data: Array,
columns: Array,
filterKey: String
},
methods: {
sortBy: function (key) {
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1
}
}
})
// bootstrap the demo
var demo = new Vue({
el: '#demo',
data: {
searchQuery: '',
gridColumns: ['tag'],
gridData: [
{ tag: 'Movies'},
{ tag: 'Tv Shows' },
{ tag: 'Books'},
{ tag: 'Comics' }
]
}
})
Help.
This isn't a "code-this-for-me"-site so if you want some help you need to post some code and someone might tell you what's wrong with it.
Anyhow, one of these JS libraries might be of interest to you:
https://select2.github.io/
http://selectize.github.io/selectize.js/
Related
I am using Datatables, Yadcf and Select2. I have an Error as soon as I click on any filter. The error is. The select2('close') method was called on an element that is not using Select2. Unable to get property 'close' of undefined or null reference. I have placed the select2 cdn above the yadcf cdn. I placed an example here. Watch the console. https://jsfiddle.net/Paul2167/zusvc4ra/
I am using filters that sit outside of the table. I only have 2 filters. If they are both of type select2 then there is no error. But if only 1 filter is set to use select2. Then the error occurs when clicking either filter.
This is the html snippet
<div>
<span id="external_filter_container1">
<!-- leave the wrapper contents empty -->
</span>
</div>
<div>
<span id="external_filter_container2">
<!-- leave the wrapper contents empty -->
</span>
</div>
<div>
<table class="mytable2 display table">
<tbody>
//table data...
</tbody>
</table>
</div>
My datatable init file is here:
var oTable;
jQuery( document ).ready( function($) {
'use strict';
// start datatable
oTable = $('.mytable2').DataTable( {
pageLength: 10,
searching: true
});
// end datatable
// start yadcf
yadcf.init(oTable,
[
{
column_number : 0,
filter_container_id: 'external_filter_container1',
filter_reset_button_text: false,
select_type: 'select2',
filter_default_label: 'First'
},
{
column_number : 1,
filter_container_id: 'external_filter_container2',
filter_reset_button_text: false,
//select_type: 'select2',
filter_default_label: 'Last'
}
]
);
// end yadcf
}); // end ready function
This is already fixed in version already fixed in 0.9.4.beta.12 which has not been released yet. github.com/vedmack/yadcf/issues/500
just a very new to Vue 2.0, i actually use if for Laravel 5.4, now you can see from below link that i created one component which name is "canvas-chart", what actually i want show is a filterable table, and then to get more Json data from next steps, but now it always show me "Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option." , can not understand that i follow the official documentation to use it why it's not work?
new Vue({
el:'#filterTest',
data:{
keywords:[{"id":"9","name":"missy","phone":"21324234532"},
{"id":"3","name":"Mahama","phone":"345604542"},
{"id":"2","name":"Bernard","phone":"241242542"}]
},
computed: {
filterM: function () {
var self = this
return self.filter(function (word) {
return user.name.indexOf(self.searchQuery) !== -1
})
}
}
});
Vue.component('canvas-chat',{
template:'#canvasChart',
props:['keywordsData']
})
<script type="text/x-template" id="canvasChart">
<table>
<thead>
<tr>
<th v-for="key.id in keywordsData">
<span class="arrow" ></span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="key.name in keywordsData">
<td v-for="key.phone in keywordsData"> {{key.name}}</td>
</tr>
</tbody>
</table>
</script>
<div id="filterTest">
<canvas-chat keywordsData="keywords" ></canvas-chat>
</div>
You have a few issues:
You must register the canvas-chat component first before you use it in the main component (put Vue.component('canvas-chat', ... before new Vue(...)).
Your v-for loops are wrong. They should be like v-for="key in keywordsData", not v-for="key.id in keywordsData".
The v-fors on the tr and td elements don't make sense; you will have to process the keywordsData first (perhaps in a computed property) to get it into the correct format you want, then loop over that.
You must bind the keywordsData prop in the template like this: :keywords-data="keywords".
I need a table structure using kendo binding for which I have a row-template and item-template ,as I had red telrik(kendo) documentation which says only one line is allowed within row-template.The requirement is that I want to have more than one row in row-template.But as soon as I add more than one line It renders only for the first row.
<script type="text/kendo-template" id="tableEditRows">
<tr class="tableRow" data-bind="source:cells" data-template="tableEditCell"></tr>
<tr>
<td >testsal</td>
</tr>
</script>
<script type="text/kendo-template" id="tableEditCell">
<td class="tableCell" align="center">
<p>value</p>
</td>
</script>
<div id="numeric" ></div>
<script>
var table = $('<table class="tableEdit" style="width:200px">' +
'<tbody align="center" data-bind="source:rows" data-template="tableEditRows">');
$("#numeric").append(table);
var viewModel = kendo.observable( {
rows:[{
cells:[{
Id:1,
Value:"asas"
}]
},{
cells:[{
Id:1,
Value:"asas"
}]
}]
});
kendo.bind($("#numeric").get(0), viewModel);
here a link http://dojo.telerik.com/ifoBA/3 to that I am trying to do.
Is there a way to achieve having more than one line in row-template
I was able to solve this issue by making use of static templating as I had a fixed set of rows.I created a html template within which I used a for loop for each row and for each rows I called a item-template within a <tr> tag. Along with this, I had a additional row template to how additional details.below is a code snippet to show what I had done.
<script type="text/html" id="testTemplate" >
#for(var i=0;i<rows.length;i++){#
<tr class="tableRow" data-bind="source:rows[#=i#].cells" data-template='tableEditCell'></tr>
#if(rows[i].index==0){#
<tr >
<td class="tableCell" >
some value
</td>
</tr>
#}#
#}#
</script>
And here is the compiling and appending of template
var table = $('<table class="elvi"><tbody align="center"></tbody></table>');
var template = kendo.template($("#testTemplate").html());
var itemHtml = template(self.viewModel);
table.append(itemHtml);
table.appendTo($(self.element));
I have the following KendoUI template bound to an observable. When I push a new item to the observable array, how do I apply the kendoNumericTextBox to only the new item in the template?
If I apply by class, it has a strange effect of doubling the spinners on the existing numeric textboxes.
<div id="slots">
<table class="table table-striped table-condensed" style="width:auto;">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Volunteers Needed</th>
<th>
Reservation Passcode <i class="icon-question-sign" title ="Only people with the reservation passcode can signup."></i>
</th>
</tr>
</thead>
<tbody data-template="row-template" data-bind="source: slots">
</tbody>
</table>
</div>
$(document).ready(function () {
var viewModel = kendo.observable({
slots: [{DateText:'1/8/1969', ShiftLabel: "3:00 to 5:00",Slots:2,ReservationCode:"ABC" }]
});
kendo.bind($("#slots"), viewModel);
$(".numeric").kendoNumericTextBox({
format: "n0"
});
viewModel.slots.push({DateText:'1/8/1969', ShiftLabel: "3:00 to 5:00",Slots:2,ReservationCode:"ABC" });
$(".numeric").kendoNumericTextBox({
format: "n0"
});
});
Thanks for any help!
Try defining your template as:
<script type="text/x-kendo-tmpl" id="row-template">
<tr>
<td>#= DateText #</td>
<td>#= ShiftLabel #</td>
<td class="numeric"><input data-role="numerictextbox" data-format="n0" data-bind="value: Slots"></td>
<td>#= ReservationCode #</td>
</tr>
</script>
and remove the $(".numeric").kendoNumericTextBox(...) initializations. Doing this you should have a NumericTextBox each time the template is run (one per row).
Your JavaScript is like this:
$(document).ready(function () {
var viewModel = kendo.observable({
slots: [
{DateText: '1/8/1969', ShiftLabel: "3:00 to 5:00", Slots: 2, ReservationCode: "ABC" }
]
});
kendo.bind($("#slots"), viewModel);
viewModel.slots.push({DateText: '1/8/1969', ShiftLabel: "3:00 to 5:00", Slots: 3, ReservationCode: "ABC" });
});
See it running here http://jsfiddle.net/OnaBai/BV48W/
Why:
The fact that you use a CSS class (.numeric) causes you end up having a KendoUI Numeric Text Box inside the other.
Example: You have the following HTML:
<label>Number 1: <input id="number1" class="numeric"/></label>
<label>Number 2: <input id="number2" class="numeric"/></label>
And the JavaScript
$(document).ready(function () {
$(".numeric").kendoNumericTextBox({
format: "n0"
});
$(".numeric").kendoNumericTextBox({
format: "n0"
});
});
You will see what you called strange effect of doubling the spinners on the existing numeric textboxes.
Each time that you invoke kendoNumericTextBox using .numeric selector you add one extra spinner to the element. If it does not have a spinner (data just added to viewModel) it gets one but if then you add data and invoke kendoNumericTextBox using .numeric selector, that previous element gets another.
can we use google AJAX Language API with EXTjs?????
i have tried example for translitration i have one html file
and typemarathi.js
google.load("elements", "1", { packages: "transliteration" });
function onLoad() {
var options = {
sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage: [google.elements.transliteration.LanguageCode.MARATHI],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control = new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the editable DIV with id
// 'transliterateDiv'.
control.makeTransliteratable([myname]);
}
google.setOnLoadCallback(onLoad);
it works fine.
but if i write the textfield in extjs
Ext.onReady(function(){
var form1=new Ext.FormPanel({
renderTo:document.body,
frame:true,
title:'My First Form',
widyh:250,
items:[{ xtype:'textfield', fieldLabel:'First name', name:'firstname'}]
});
});
and try to pass firstname (name attribute to control.makeTransliteratable([firstname])) then it does not work... it says invalid id error
but if i pass->(html textfiled name to it) control.makeTransliteratable([myname]) it works fine
(i want to type and display multiple nonEnglish languages data
programatically frontend i used EXTjs is there any another way to do so if yes the suggest me. pls..
Yes you can.
Besides someone should clean his code, thats hurrible.
Yes, you can. But you should know that ExtJs automatically generates identifiers for html elements:
html:
<div class="x-form-item x-form-label-left x-box-item" id="ext-gen27" style="left: 0px; top: 0px;">
<label style="width: 55px;" class="x-form-item-label" id="ext-gen28">Send To:</label>
<div style="padding-left: 60px; width: 668px;" class="x-form-element" id="ext-gen26">
<div class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" id="ext-gen24" style="width: 668px;">
<input type="text" name="to" id="ext-comp-1002" autocomplete="off" size="24" class=" x-form-text x-form-field x-form-focus" style="width: 651px;">
</div>
</div>
</div>
js:
....
items: [{
xtype: 'combo',
store: ['test#example.com', 'someone-else#example.com' ],
plugins: [ Ext.ux.FieldReplicator, Ext.ux.FieldLabeler ],
fieldLabel: 'Send To',
name: 'to'
}]
As I understand you need to translate the label. In order to do this you should get the id of the label. To do this you can use TextField's label property (myField.label.id). If you want to translate a lot of elements then probably it'll be better for you to use something like this:
var control = new google.elements.transliteration.TransliterationControl(options);
var labelIds = [];
Ext.each(Ext.select('label'), function(item){
labelIds.push(item.id);
});
control.makeTransliteratable(labelIds);
But be aware that you should call this only after rendering all elements. Also you can write a some plugin that will inject this functionality into 'render' method. Writing a plugin is a better but a bit more harder way.