need to show tooltip on disabled button and hide tooltip on enabled button using dojo.
I am having a check box and a button.
On checking the checkbox i need to enable the button, on unchecking I want to disable the button and want a tootip to tell why the button is disabled.
In general scenario for disabled button the tooltip wont come.
I got a code to display the tooltip on a disabed button from the below link
displaying dojo tooltip on a disabled validation text box
but i want the tooltip to be hidden on enabling the button . Please provide a solution
I have modified the example in the link displaying dojo tooltip on a disabled validation text box to suit your need.
html
<span id="abcd">
<input type="button" disabled="true" dojoType="dijit.form.Button" id="button1" label="MyButton" />
</span>
<div dojoType="dijit.Tooltip" connectId="button1" jsId="tt1" label = "Why the button is disabled?" ></div>
Js part
<script>
dojo.require("dijit.form.Button");
dojo.require("dijit.Tooltip");
dojo.require("dijit.TooltipDialog");
dojo.require("dojox.fx");
var dialog;
dojo.addOnLoad(function() {
dojo.connect(dijit.byId('button1').domNode,'mouseenter', function(){
console.log("HI");
// Modified code ***START***
var button = dijit.byId('button1');
var disabled = button.get("disabled");
if (disabled){ // disabled == true
tt1.open(this);
};
// Modified code ***END***
})
dojo.connect(dojo.byId('abcd'),'mouseleave', function(e){
tt1.close();
console.log("HI2")
})
tt1.addTarget(dojo.query('input', dijit.byId('someId11').domNode));
});
</script>
Related
I'm trying to customize an out-of-the-box form in Vue.js where inputs are shown/hidden depending on the selection of 2 radio buttons:
<b-form-group label-class="ssrv-form-control">
<div class="ssrv-5">
<b-form-radio v-model="isOperator" name="operatorRad" value="false">Consultant</b-form-radio>
</div>
<div class="ssrv-0">
OR
</div>
<div class="ssrv-1 rad">
<b-form-radio v-model="isOperator" name="operatorRad" value="true">{{ userDetails.operator.description }}</b-form-radio>
</div>
</b-form-group>
I have defined isOperator in the data (am I defining data correctly? I'm trying to modify the out-of-the-box code, not sure what this means):
export default {
name: 'User-Details',
components: {...},
props: {...},
data () {
let data = {
...
isOperator: true,
...
};
and I'm trying to make this show/hide a button and input fields. I'm starting with the button as it seems simpler:
<b-button v-show="isOperator === true" #click="save" :block="true" size="lg" variant="primary" active-class="ssrv-form-button" class="ssrv-form-button">
{{$t("common.form.signUp")}}
</b-button>
My current problem, is the button isn't showing/hiding based on the two radio buttons. If I make isOperator: true in the data, the page loads with the 2nd radio button selected and the button showing. When I click the second radio button, it disappears. But then when I click the original radio button again, the button doesn't show back up. I get the same result when I try to show/hide an input field, I can get it to show initially by setting isOperator to true, but then when I select the other radio button to make it disappear I can't make it appear again. If isOperator is set to false, it just never shows.
I put a isOperator is {{ isOperator }} p element and I can see the value is change true/false as expected, but the buttons/inputs aren't showing back up.
From my very limited understanding of Vue.js, I set the v-model to a variable I want an element to modify, and the value what that variable will be set to when the radio button is selected. Then on a separate element I want to show/hide, I can use v-if/v-show with "myvalue === true/false" to show/hide. Is this an oversimplification and I'm missing steps?
That's because of a mismatch in the type of isOperator property. When you first mount the component the value of isOperator is a boolean (true), and then later on when you click on the radio buttons it becomes a string. You need to adjust the value property in your template as below:
<b-form-group label-class="ssrv-form-control">
<div class="ssrv-5">
<b-form-radio v-model="isOperator" name="operatorRad" :value="false">Consultant</b-form-radio>
</div>
<div class="ssrv-0">
OR
</div>
<div class="ssrv-1 rad">
<b-form-radio v-model="isOperator" name="operatorRad" :value="true">{{ userDetails.operator.description }}</b-form-radio>
</div>
</b-form-group>
How do I make this expansion-panel open content only on clicking icon?
Tried using readonly but it didn't help.
Thanks in advance!
https://vuetifyjs.com/en/components/expansion-panels#expansion-panel
You can put online the argument in all collapse like: expanded={!expanded}
and in the icon you put the onClick={toggle}
I was having the same problem and just found a solution for that.
You need to implement a custom button on the expansion panel, so it will accept custom events. You can achieve that using template and v-slot:
<v-expansion-panel #click.prevent="onClick()">
<v-expansion-panel-header>
...your expansion panel code here
<template v-slot:actions>
<v-btn icon #click.stop="onClick()">
<v-icon>mdi-filter-variant</v-icon>
</v-btn>
</template>
</v-expansion-panel-header>
</v-expansion-panel>
...and your onClick method would be like this:
onClick() {
/*this will toggle only by icon click. at the same time, will prevent toggle
by clicking on header. */
const curr = this.panel
this.panel = curr === undefined ? 0 : undefined
}
It may seem a little magical that the same function is toggling on icon click and preventing toggle on header click, but this happens because the custom icon button does not toggle itself, so we force that using the onClick method. On the other hand, the expansion panel header has its native property of toggling the panel. So when we click it, its value will automatically change and we need to change it back to what it was before the click.
To make the expansion-panel open only on clicking icon you can use css that disables all clicks on the header and only allows clicks on the icon:
<style>
.v-expansion-panel-header{
pointer-events: none;
}
.v-expansion-panel-header__icon{
pointer-events: All;
}
</style>
Keep in mind if you are using scoped style you have use >>>:
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
Here is the template example, I added #click to provide btn like experience when user clicks on an icon, it's not necessary:
<template>
<v-expansion-panel>
<v-expansion-panel-header>
<template #actions>
<v-icon class="icon Icon Icon--32 icon-utility-arrows-carrot_down-32"
#click/>
</template>
</v-expansion-panel-header>
<v-expansion-panels >
<v-expansion-panel-content >
<!--content here-->
</v-expansion-panel-content>
</v-expansion-panels>
</v-expansion-panel>
</template>
I read the documentation of vue but can't figure out what is the proper way to add keyboard event listener to my app. It just shows how to add one for input elements. I have something like:
<div>
<p>Some content</p>
<button>Go left</button>
<button>Go right</button>
</div>
I want to add an keyboard event listener so that when a user presses ← it goes left and → goes right.
It works for the button event listener, but I don't know how to make it work for keyboard.
Should I do document.addEventListener() or window.addEventListener()? I don't need the event listener for the whole app, just for that div.
It does work as expected. You just have to make sure your button is focused.
new Vue({
el: "#app",
methods: {
squack: function(text){
alert(text)
}
},
directives: {
focus: {
inserted(el) {
el.focus()
}
}
}
})
<div id="app">
<div>
<p>Some content</p>
<button #keyup.left="squack('left button clicked')" v-focus>Go left</button>
<button #keyup.right="squack('right button clicked')">Go right</button>
</div>
</div>
See this JSFiddle for example. Make sure you shift focus between buttons with Tab / Shift+Tab.
See this JS Fiddle.
Keyboard events work only when you have focus on that element. So having focus on whole <div> and having keyboard events can help. This also eliminates any need of those two left-right buttons. Elements like <button> and <a> have the ability to get focused, <div> doesn't. So we manually need to add tab index to it.
Learn more about tab index from here.
I've a custom dojo widget (reminder )which I want to reload on an event(on click of add button on widget a dialog will open where I'll fill reminder data and will click submit . on click of submit button widget should reload with data which I filled in dialog).
<body class="claro teller">
<form name="tellerForm">
<input type="hidden" name="expldQryStr" id="expldQryStr">
<input type="hidden" name="actionCode" id="actionCode">
</form>
<div class="row">
<div data-dojo-type="MyCashBalanceWidget.MyCashBalance" data-dojo-props="title:'Our Cash Balance Widget',data:CashBalData,data1:invtData"></div>
<div data-dojo-type="MyFrequentTasksWidget.MyFrequentTasks" data-dojo-props="pageName:'TellerLandingPage',title:'Our Some Widget',data:freqTskData"></div>
<div data-dojo-type="PendingTransactionWidget.PendingTransaction" data-dojo-props="title:'Pending Transaction Widget',data:pndTrnData,data1:pndVrfData"></div>
<div id="remWdgt" data-dojo-type="MyRemindersWidget.MyReminders" data-dojo-props="pageName:'TellerLandingPage',title:'My Reminders Widget',data:rmndrData"></div>
<div data-dojo-type="MyAppsWidget.MyApps" data-dojo-props="pageName:'TellerLandingPage',title:'My Apps Widget'"></div>
<div data-dojo-type="MyActivityWidget.MyActivity" data-dojo-props="pageName:'TellerLandingPage',title:'My Activity Widget',data:analData"></div>
</div>
<div data-dojo-type="TellerLandingPageGridWidget.TellerLandingPageGrid" data-dojo-props="title:'Teller Landing grid',data:lastTrans">
</div>
<script>
//including all the custom widgets
require(
[
"dojo/parser",
"CommonWidgets/MyFrequentTasksWidget",
"Widgets/MyCashBalanceWidget",
"Widgets/PendingTransactionWidget",
"CommonWidgets/MyRemindersWidget",
"CommonWidgets/MyAppsWidget",
"CommonWidgets/MyActivityWidget",
"Widgets/TellerLandingPageGridWidget"
],
function( parser) {
parser.parse();
});
</script>
</body>
</html>
please suggest how can I reload dojo widget .
I am not sure about your complete scenario. But in such situation, you have two ways:-
1) Add event listener to your custom widget, that will listen and modify itself
2) Recreate the widget, passing it's constructor with the new values.
Your question is quite unclear, but from the sound of it, you just want to set the innerHTML of a specific DOM node if a form within a dialog is submit. There's no reason to reload the widget for that, you could just add an event handler to the submit event of the dialog form, and use that to set the innerHTML of a specific element inside your widget.
First of all you need to add an onLoad event listener to your dialog so you know exactly when to add the event handlers to the form:
postCreate: function() {
this.myDialog = new Dialog();
this.myDialog.on("load", lang.hitch(this, this.loadDialog));
this.myDialog.set("content", "<div><form><input type='text' /><button type='submit'>Submit</button></div>");
},
This will call a function loadDialog on your widget, which could look like this:
loadDialog: function() {
var vm = this;
query("form", this.myDialog.domNode).on("submit", function(evt) {
evt.preventDefault();
vm.myLabel.innerHTML = query("input", this).val();
vm.myDialog.hide();
});
},
This function utilizes dojo/query and dojo/NodeList-manipulate to obtain the form field value when the form inside the dialog is submit. That value is then used to alter myLabel an element on the widget that I gave the attribute data-dojo-attach-point="myLabel" so that it's easily accessible from within the widget code:
templateString: "<div><label data-dojo-attach-point='myLabel'></label><button data-dojo-attach-event='onClick: openDialog'>Add</button></div>",
I'm totally new in MVC, I have info that I show in a jQuery pop-up dialog, but I need to compact and expand this dialog, as a small dialog has glance about my info, and a button when I click it expands to show all info, and click again to compact.
My project is in MVC 4.
Any help?
Hi I think you are speaking about the jQuery toogle functionality. Here i paste below a small demo. Hope it may help you.
**Html code**
<button type="button" id ="clickme" >Click Me!</button>
<div id ="toggleSection">
Toggle content here ...!
</div>
**Jquery Code**
$( "#clickme" ).click(function() {
$( "#toggleSection" ).toggle( "slow", function() {
});
});