I have div like
var d=dojo.byId('elem');
and I want to put three buttons in d from my code ( when I click on some other div, I have connect on click event).
I tried
var button = new dijit.form.Button({
label: "Click me!",
onClick: function() {
}
},
"progButtonNode");
and
d.appendChild(button);
but it doesn't work. Can anybody help ?
Either:
var button = new dijit.form.Button({
id: "progButtonNode",
label: "Click me!",
onClick: function() {
}
}, d);
or
var button = new dijit.form.Button({
id: "progButtonNode",
label: "Click me!",
onClick: function() {
}
});
d.appendChild(button.domNode); // Should use dojo.place()
The second parameter of a dijit is the container DOM node (in your case "elem"), not your dijit's node.
The object returned is a dijit object, not a DOM node. Use the "domNode" property to get that dijit's DOM node.
Be careful to avoid having multiple buttons with the same id. Should generate a new id for each button, or let dijit generates them for you.
To create dojo button programmatically, node "progButtonNode" must exist on page. For example
HTML:
...
<body>
<button id="progButtonNode" type="button">
</button>
</body>
...
Javascript:
...
dojo.require("dijit.form.Button");
dojo.addOnLoad(function() {
// Create a button programmatically:
var button = new dijit.form.Button({
label: "Click me!",
onClick: function() {
// Do something:
dojo.byId("result1").innerHTML += "Thank you! ";
}
},
"progButtonNode");
});
...
Dojo button examples
Related
So I have a vuejs inline event that works great for one, but I want to expand it. Right now it checks for a specific property and the event changes based on what property is there. Issue is, I prefer to keep this inline instead of moving it all to a method in the model. So i guess this would become a big tenerary operation? So it checks to see if oil is there, if so it will trigger the click method. If its food, it will trigger that click2 method and anything else will trigger the click3 method. My goal is to keep this inline.
new Vue({
el: "#app",
data: {
todos: [
{ text: "food", done: false },
{ text: "pasta", done: false },
{ text: "oil", done: true },
{ text: "cheese", done: true }
]
},
methods: {
click:function(){
alert ("one clicked");
},
click2:function(){
alert ("two clicked");
},
click3:function(){
alert ("anything else");
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button v-on:click="todos.text==='tractor'?click(todos): todos.text==='jack'?click2(todos):click(todos)">
click me
</button>
</div>
Just send the todo as a param and do the logic there:
// template
<button v-on:click="click(todo)">
Then inside your component script:
methods: {
click(todo){
switch (todo.text){
case 'oil':
//Call a method or do logic here
this.handleOilTodo();
break;
....
I am trying to display charts with button clicks, i have used 3 buttons and i have also used 4 radio buttons just like the image shown below.
I am actually calling an API and fetching the data from there. I am trying to pass value in the function and then trying to use the same value in the button click.
Here is my code:
<template>
<div id="Displaying charts through buttons">
<div class="buttons" style="float:left">
<vs-button color="warning" #click="change('1')"> chart1</vs-button>
<vs-button color="warning" #click="change('2')"> chart2</vs-button>
<vs-button color="warning" #click="change('3')"> chart3</vs-button>
</div>
<ul class="radio" style=" float:right;">
<li>
<vs-radio #change="period" vs-value="all" val1="all">all</vs-radio>
</li>
<li>
<vs-radio #change="period" vs-value="6mon" >6mon</vs-radio>
</li>
<li>
<vs-radio #change="period" vs-value="3mon" >3mon</vs-radio>
</li>
<li>
<vs-radio #change="period" vs-value="1mon" >1mon</vs-radio>
</li>
</ul>
<div class="chart-container">
<charts-line :height="250" :data="datacoll" :options="options"></charts-line>
</div>
</div>
</template>
<script>
import ChartsLine from './ChartsLine'
export default {
components: {'charts-line' : ChartsLine},
data () {
return {
datacoll: {},
options: {
scales: {
yAxes: [
{
scaleLabel: {
display: false
},
ticks: {
callback (value) {
return `${value}k`
}
}
}
],
xAxes: [
{
type: 'time',
time: {
unit: 'month'
},
scaleLabel: {
}
}
]
}
},
date: [],
challenge: [],
data: [],
val1: 'all'
}
},
mounted () {
this.change()
},
methods: {
change (id) {
this.$http.get(`/apidata/real/${ id}`)
.then(res => {
this.date = res.date
this.challenge = res.challenge
this.data = this.date.map((date, index) => ({
x: new Date(date * 1000),
y: this.challenge[index]
}))
this.filldata(this.data)
})
},
filldata (data) {
this.datacoll = {
datasets: [
{
data
],
options: this.options
}
},
period (event) {
const period = event.target.value
let minValue = new Date(Math.max(...this.date) * 1000)
const axisXMin = new Date(Math.min(...this.date) * 1000)
switch (period) {
case '1m':
minValue.setMonth(minValue.getMonth() - 1)
break
case '3m':
minValue.setMonth(minValue.getMonth() - 3)
break
case '6m':
minValue.setMonth(minValue.getMonth() - 6)
break
default:
minValue = axisXMin
}
const data = this.data.filter(el => {
return el.x >= minValue
})
this.filldata(data)
}
}
}
</script>
Here i am unable to display charts by button click, but if i just directly display chart without buttons, then i am able to display charts and change their time interval by radio buttons.
So someone please help me to display charts on button click, my chart id are 1, 2 & 3 respectively. And i want to display chart1 with 'all' radio button checked while loading the page or on refreshing the page, please do help me in doing this.
Objective: To display charts on button click, suppose i have clicked chart2, then chart2 must be display, if the user wishes to change the time interval of chart he can do it by changing the radio buttons. So how to do this in a proper way.
There are quite a few ways to go about this, I'll explain a simple one:
Using a variable and v-if to toggle the charts visibility*:
<div class="chart-container" v-if="selectedChart > ''">
<charts-line :height="250" :data="datacoll" :options="options"></charts-line>
</div>
*) technically it does not toggle it's visibility, it toggles its existence. v-show toggles visibility. v-if decides if the node will be added to DOM (and creating all its children, etc).
This will ensure that only one chart is rendered when selectedChart has a value. On Button click you should hide the currently displayed chart (maybe show a loading message), then you load the requested data. Once the data is loaded you set the this.selectedChart to the appropriate chart.
example:
change (id) {
this.selectedChart = null; // Makes the current displayed chart `disappear`
this.$http.get(`/apidata/real/${ id}`)
.then(res => {
this.date = res.date
this.challenge = res.challenge
this.data = this.date.map((date, index) => ({
x: new Date(date * 1000),
y: this.challenge[index]
}))
this.filldata(this.data)
this.selectedChart = id;
})
},
Dont forget to add selectedChart: null to the data function.
How I can capture key press and click on a tr element ?
I need to implement a table that can handle a single row selection, or multiple-row selection.
Right now, I tried to bind the key ctrl:
Vue.directive('on').keyCodes.ctrl = 17;
But, if i use #keyup.ctrl sure this dont works, because I need to check what key is pressed when the user click on a row.
The click event includes properties that indicate whether Control, Shift, Alt, or Meta keys were pressed during the click.
new Vue({
el: 'body',
data: {
controlled: false,
shifted: false,
meta: false,
alted: false
},
methods: {
clicked: function(event) {
console.debug(event);
this.controlled = event.ctrlKey;
this.shifted = event.shiftKey;
this.meta = event.metaKey;
this.alted = event.altKey;
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<button #click="clicked">Click me!</button>
<div v-if="controlled">Control was pressed</div>
<div v-if="shifted">Shift was pressed</div>
<div v-if="alted">Alt was pressed</div>
<div v-if="meta">Meta was pressed</div>
I have a widget on dojo, but it does not display the datagrid. If I make the example outside the widget works. I see the code by firebug, you can not mistake, however, I can see the div inspect and there is nothing inside. The Builder runs, but does not load the grid in div.
Widget.js
define([ "dojo/_base/declare",
"dojo/text!./FormularioQCI.html",
"icm/base/_BaseWidget",
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/store/Cache",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore"
],
function(declare, template, _BaseWidget, JsonRest, Memory, Cache, DataGrid, ObjectStore){
return declare("icm.custom.pgwidget.formularioQCI.FormularioQCIWidget", [_BaseWidget], {
templateString: template,
widgetsInTemplate: true,
constructor: function(){
alert("X");
myStore = dojo.store.Cache(dojo.store.JsonRest({target:"rest/formularioQCI/get"}), dojo.store.Memory());
grid = new dojox.grid.DataGrid({
store: dataStore = dojo.data.ObjectStore({objectStore: myStore}),
structure: [
{name:"State Name", field:"name", width: "200px"},
{name:"Abbreviation", field:"abbreviation", width: "200px", editable: true}
]
}, "target-node-id"); // make sure you have a target HTML element with this id
grid.startup();
alert("Y");
dojo.query("#save").onclick(function(){
alert("X");
dataStore.save();
});
var id = 0;
dojo.query("#add").onclick(function(){
dataStore.newItem({
name: "col2-" + id,
abbreviation: "col3-" + id
});
id++;
});
},
/**
* #private destroys this widget
*/
destroy: function() {
//Do any custom clean up here
this.inherited(arguments);
}
});});
Widget.html
<div style="width: 100%; height: 100%;">
<div id="target-node-id">
</div>
<button id="save">Save
</button>
<button id="add">Add Linha
</button>
</div>
you need to write you code in the postCreate function.
Simplest way would be to replace the constructor keyword with postCreate.
The reason being that the "target-node-id" will not be available until the postCreate function call.
postCreate: function(){
this.inherited(arguments);
// Rest of your code here.
alert("X");
...
}
i have a modal dialog conataining an ajax.beginform.
on a view i have a list of roles for a selected user, when i click add, the dialog is created using ajax
view:
<div id="popupAgregarRolModal" title="#Res_String.AsaignRol">
<!-- Client Partial, empty for now -->
</div>
<script>
$(document).ready(function () {
$(".AddRolButton").on("click", function (event) {
event.preventDefault();
$.ajax({
url: "Permiso/_GestionarRol?idSelectedUser=" + $("#AdmPerGridBUsquedaUsuarioSelectedRow").val(),
type: "GET",
})
.done(function (result) {
$("#popupAgregarRolModal").html(result).dialog({ modal: true, height: 'auto', width: 'auto', resizable: false });
});
});
});
function closeDialogNuevoRol(Result) {
$("#popupAgregarRolModal").dialog('destroy');
}
</script>
, the dialog contains an ajax.beginform like:
using (Ajax.BeginForm("SetPermiso", "Permiso", new AjaxOptions
{
UpdateTargetId = "ABMPermisos",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "closeDialogNuevoRol"
}, new { #id = "AddRolForm" }
)
)
{
.
.
.
the idea is that after i add a new rol to my user, the ajax target upload the list of roles on the view, this is done on my controler by using redirecttoaction if all comprobation and insertion logic hapends, then i whant to close the dialg but i only get
Uncaught Error: cannot call methods on dialog prior to initialization;
attempted to call method 'destroy'
To close a jQuery modal dialog, you can use this:
$("#popupAgregarRolModal").dialog("close");
Hope this helps.
EDIT: Try initializing the modal like this and not inside the click event of the button:
$(document).ready(function () {
$("#popupAgregarRolModal").dialog({ autoOpen: false, modal: true, resizable: false, draggable: false });
});
Then you can have a separate function for the click event.
$(".AddRolButton").click(function () {
//Do stuff
});
This post might help