I am trying to convert JSON to HTML. I am able to create the HTML element and ID attribute. However I can not create the onclick events. I am using the npm json2htmll.js npm module.
let jsontoHtml: {
"<>": "div",
"html": [
{
"<>": "button",
"id":"button1",
"onclick": "ButtonClicked()",
"text": "Click"
}
]
};
let html = json2html.transform({}, jsontoHtml);
Current output:
</button id="button1">click</button>
Expected output:
<button id="button1" onclick="buttonClicked()">Click</button>
Do you know how I can achieve the expected output?
json2html doesn't support on events using the npm module. Instead I would look at using the jquery plugin for json2html. You'll be able to add events there that will directly hook into the jquery event. See this example on json2html.com
{'<>':'button','onclick':function(e){
//e.event : the jQuery event
//e.data : user specified data from the the json2html options variable eventData (see Usage)
//e.obj : the source object that we are transforming
//e.index : the index of the array in which the source object was found
}}
Related
I'm using this library for autocomplete select, and in my logic, I also want to trigger require validation (from vuelidate library) on the fly. I want to trigger the require validation rule when the user focuses out the input and when the user selects some value from the suggestion list.
And for some reason when I'm selecting a value by the first time from the suggestion list it's triggering focusout event not a select, probably b-z list is out of input focus, but when I'm selecting an item from the list by the second time it's triggering select event not focusout (as it should). NOTE: vue trigger select event only when I select value for the second time, first, third and all next times it's always triggering focusout event.
Question: why it's not triggering select event and how to force triggering it??
Code snippet:
<vue-simple-suggest v-model="city.searchInput"
:debounce="300"
:min-length="2"
display-attribute="name"
value-attribute="id"
:list="getCity"
:filter-by-query="true"
#select="citySelect">
<input type="search"
class="form-control"
placeholder="Place of birth"
#focusout="cityError" />
</vue-simple-suggest>
methods: {
cityError() {
console.log('cityError');, // <== when I select some item from suggestions list by the first time this event triggered
},
citySelect() {
console.log('citySelect'); // <== when I'm clicking by input second time (the suggestions list already loaded) and select some (or same) value from suggestions list this event triggered
},
getCity() {
// here should be ajax call, but for now just dummy data
return [{
"id": "691b237b0322f28988f3ce03e321ff72a12167fd",
"name": "Paris",
"lat": -33.8599358,
"lng": 151.2090295
},
{
"id": "691b237b0322f28988f3ce03e321ff72a12167fs",
"name": "New York",
"lat": -33.8599358,
"lng": 151.2090295
},
]
}
}
I open an issue on github https://github.com/KazanExpress/vue-simple-suggest/issues/353 (it has detailed information and small video which showing the issue, you can check browser console), but I'm not sure it's related to the library.
Thanks in advance!
I saw in the documentation of the library that it allows blur event. Could you try #blur in vue-simple-suggest component instead of #focusout in the input?
Otherwise you can run a controller in the #select="checkCitySelection" to avoid the #focusout event in the input:
checkCitySelection(citySelected) {
this.$v.city.value.$touch();
if (this.$v.city.value.$invalid) this.cityError()
else this.citySelect();
}
I'm getting this error: "TypeError: Event.$emit is not a function" whenever the watcher fires.
I can console log the Event object since I imported it in my main.js file.
I use a named prop because I have 3 different client tables on 1 page. I named the table as rmTable
<v-client-table name="rmTable" :data="filteredRMInvData" :columns="rmColumns" :options="rmOptions" v-if="rmInventoryData.length">
In my watcher:
materialType(value) {
Event.$emit('vue-tables.rmTable.filter::materialtype', value)
}
This is my customFilters in my rmOptions variable:
customFilters: [{
name: 'materialtype',
callback(row, query) {
console.log(row)
console.log(query)
return query.code.includes(row.material_group)
}
}],
How can I do this correctly? At least I should be able to see the row and query logs. I checked the guide on the github page and it seems I followed it correctly.
Assuming you have
Vue.use(VueTables.Event);
Then
materialType(value) {
VueTables.Event.$emit('vue-tables.rmTable.filter::materialtype', value)
}
Event is already a browser interface, which I'm guess is the reason it doesn't work.
I'm building a small application in vuejs 2 where I'm using v-select package for select box, Problem I'm facing is:
I've declared v-select in my component something like this:
<div class="form-group"><label class="col-sm-2 control-label">Company name:</label>
<div class="col-sm-6">
<v-select :options="companyOptions" v-model="company_name" :on-search="getOptions" placeholder="Company name"></v-select>
</div>
</div>
So accordingly I'm having data defined as company_name, and I'm calling an axios event to get the searchable data, while the component is being loaded I'm calling index data of first 50 set for initial selection and if anybody types then I'm calling a function getOptions to get data related to the input, now suppose if somebody selects any data and then removes it again from the selection and again search with key press event the searchable data is not displayed, I can see that my axios call is working fine and I'm able to get the relevant data. but it is not displaying in dropdown as it says:
Error in render function: "TypeError: Cannot read property 'label' of null"
Which is coming from the company_name model which was selected. Following is my code in codepen
In this my axios is not working as it says mixed content:
https://codepen.io/anon/pen/Bdeqam?editors=1011' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://connect.stellar-ir.com/api/companies'. This request has been blocked; the content must be served over HTTPS.
So I'm unable to explain properly in this code set. But my code looks same as declared in codepen.
Help me out in this.
The error is because your computed values are undefined and undefined is not a string, so no string methods (toLowerCase()) are available. The response.data.model.data must look like this:
[
{
id: 1234,
name: 'example'
}, {
id: 12345,
name: 'example2'
}
]
if you get an object instead of an array push it to the array: this.serverData.push(response.data.model.data)
Replace your axios call with:
this.serverData = [
{
id: 1234,
name: 'example'
}, {
id: 12345,
name: 'example2'
}
]
to test it.
In your getOptions() method you calling loading(true or false), but your fetchIndexData() method has an asynchronous axios call. Use async/await, a callback function or a promise chain to wait for the data and show the loading indicator correctly.
On every keypress an request is send to the server i would recommend to use a debounce function.
Tipp
Line 42: https://stackoverflow.com/a/42028776/6429774
axios.post('http://connect.stellar-ir.com/api/companies', searchData).then(response => {
if(response.status === 200)
{
this.serverData = response.data.model.data
}
}).catch(error => {
console.log(error)
});
I think it is a common sense that providing a simple way to hide/show and enable/disable a button, but I cannot find any document that describe dojo has done such thing.
Any way, I hope it is my fault that I have missed out something while googling, thanks!
The following coding is what I have tried but they just make the button's text invisible:
dojo.style(btnInsert, {'visibility':'hidden'});
dojo.style(btnInsert, {'display':'none'});
UPDATE Question:
To oborden2:
I have tried your code, the result is same as the above code, here is the captured screen:
To MiBrock:
I have also tried your code and also get the result that same as the above code:
Form widgets in Dijit are special. For all normal Dijit widgets, the domNode (outermost node) of the widget receives the id property. However, with form widgets, the focusNode (which corresponds to the <input> element) receives the ID instead, so that things like <label for="foo"> work properly. In this case, the outermost node has no ID, and you’re actually just hiding the inner HTML input element.
If you already have reference to the widget:
require([ 'dojo/dom-style' ], function (domStyle) {
domStyle.set(widget.domNode, 'display', 'none');
});
If you only have a reference to the ID of the widget/original DOM node:
require([ 'dojo/dom-style', 'dijit/registry' ], function (domStyle, registry) {
domStyle.set(registry.byId(nodeId).domNode, 'display', 'none');
});
Try
require(["dojo/dom-style","dojo/domReady!"], function(domStyle){
domStyle.set(dojo.byId(domNode),'display','none');
});
The variable "domNode" stays for the id of the Node that should be influenced. This is the way we make it.
Regards, Miriam
Try using the Toggler module
require(["dojo/fx/Toggler"], function(Toggler),{
// Create a new Toggler with default options
var toggler = new Toggler({
node: "btnInsert"
});
// Hide the node
toggler.hide();
// Show the node
toggler.show();
});
http://dojotoolkit.org/reference-guide/1.9/dojo/fx/Toggler.html
I imagine you would want to link this to some event using Dojo's on module. Link it up to whatever condition triggers the button's need to be hidden.
I am rather new to sencha touch, I've done a lot of research and tutorials to learn the basics but now that I am experimenting I have run into a problem that I can't figure out.
I have a basic DataList which gets its data from a store which displays in a xtemplate.
Within this template I have created a member function which requires store field data to be parsed as a parameter.
I would like to make a thumbnail image (that's source is pulled from the store) execute the member function on click/tap.
I can't find any information on this within the docs, does anyone know the best way to go about this?
Here is a code example (pulled from docs as I can't access my actual code right now).
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>'
{
tapFunction: function(name){
alert(name);
}
}
);
tpl.overwrite(panel.body, data);
I want to make the paragraph clickable which will then execute the tapFunction() member function and pass the {name} variable.
Doing something like onclick="{[this.tapFunction(values.name)]} " does not seem to work.
I think functions in template are executed as soon as the view is rendered so I don't think this is the proper solution.
What I would do in your case is :
Add a unique class to your < p > tag
tpl : '<p class="my-p-tag">{name}</p>'
Detect the itemtap event on the list
In your dataview controller, you add an tap event listener on your list.
refs: {
myList: 'WHATEVER_REFERENCE_MATCHES_YOUR_LIST'
},
control: {
myList: {
itemtap: 'listItemTap'
}
}
Check if the target of the tap is the < p > tag
To do so, implement your listItemTap function like so :
listItemTap: function(list,index,target,record,e){
var node = e.target;
if (node.className && node.className.indexOf('my-p-tag') > -1) {
console.log(record.get('name'));
}
}
Hope this helps