I need to attach onClick event to tab, not to its content. For example, viewing the example, I want the event firing when I click "Drinks" tab.
The following code results in firing event when I click on tab's content, so it is not what I need:
<div
dojoType="dijit.layout.ContentPane"
href="test.php"
onClick="alert(1);"
>
</div>
Attaching event to tab container results in firing event when click both tabs and tab content.
You want to connect to the event onShow. Take a look at the "Event Summary" heading in the reference documentation:
http://dojotoolkit.org/api/dijit/layout/ContentPane
<div dojoType="dijit.layout.ContentPane" href="test.php" onShow="console.log('I'm being shown')"></div>
maybe you can write a something like this :
dojo.connect(
dojo.byId("myTab"),
"onclick",
function(){
alert('click');
}
);
Related
I have to execute a div like this. When the user clicks on the card, it will be redirected to a different page, but when the user clicks on the button inside the card, it will be redirected to another page.
<v-ons-card
#click="goToPage1()"
>
<div>
// content
</div>
<div class="card-btn">
<v-ons-button
#click="gotopage2()"
>
View
</v-ons-button>
</div>
</v-ons-card>
In this implementation, when I click the button, it also triggers the card click event and then triggers the button click event. Is there any way I can prevent this?
Yes you can use Event Modifier for that. In your case you are searching for #click.stop.
So you can do as follow:
<v-ons-button #click.stop="gotopage2()">
I have an icon, which when you hover, pops up some extra information in a bootstrap popover
This works as expected, however, if I then click on any field on the page, which then does a partial refresh of a div containing the icon, it then loses the hover functionality.
Icon code:
<!--INFO BUTTON START-->
<xp:text escape="false" id="computedField4">
<xp:this.value><![CDATA[#{javascript:try{
var text = #DbLookup(#DbName(), "LookupKeywordLists", "Info"+compositeData.fieldName, "Members");
return " <i class='fa fa-info-circle' data-container='body' data-toggle='popover' data-trigger='hover' data-placement='right' data-content='"+text+"'></i>"
}catch(e){
openLogBean.addError(e,this.getParent());
}
}]]></xp:this.value>
<xp:this.rendered><![CDATA[#{javascript:try{
return compositeData.showInfoIcon;
}catch(e){
openLogBean.addError(e,this.getParent());
}}]]></xp:this.rendered>
</xp:text>
<!--INFO BUTTON END-->
Script block on the page:
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[$(document).ready(function(){
$('[data-toggle="popover"]').popover({
trigger: 'hover',
title: 'Information'
});
});]]></xp:this.value>
</xp:scriptBlock>
The script block is currently outside the div that the partial refresh "refreshes" however I tried putting it within the div, which didn't resolve the issue. Any ideas? Thanks
You need to add the popover when the partial refresh occurs. In order to do so you use Dojo to subscribe to the partialrefresh-complete event.
This answer can help you: https://stackoverflow.com/a/49014247/785061.
I am trying to create a simple HTML Metro App for Windows 8. I want to display a list view, and based on the clicked item display different content on the screen. It sounds trivial, right?
But it doesn't work! Here is my code:
<div id="frameListViewTemplate" data-win-control="WinJS.Binding.Template">
<img data-win-bind="src: picture" class="thumbnail" />
</div>
<div id="basicListView" data-win-control="WinJS.UI.ListView"
data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#frameListViewTemplate'),onselectionchanged : handler}">
</div>
Than in the defult.js
var myListView = document.getElementById("basicListView").winControl;
myListView.addEventListener("selectionchanged", handler);
And the handler:
function handler() {
console.log("Inside the handler : ");
}
handler.supportedForProcessing = true;
So the handler is never called. My questions are: How can I add an event listener and its handler to the listview control.
How can I recognize which element on the list view was clicked.
P.S.
The listview is displayed properly in my app.
Thank you for help,
J
To get the item that is "clicked", you need to use itemInvoked. Selection changed would happen when the user cross slides on the item to select it, rather than taping/clicking to "invoke" it.
http://msdn.microsoft.com/en-us/library/windows/apps/br211827.aspx has some basic details.
I have a DataGrid that has items in it. When you right-click on one of the rows, a Dojo Context Menu is displayed with the option to delete that row. If you try to right-click on a blank area of the DataGrid, the context menu is NOT displayed.... BUT, if you first right click on a row, and then click the Cancel menu option (which does nothing) or if you left-click somewhere else on the page (which hides the Context Menu) and the go to right click on a blank area of the DataGrid, the Context Menu IS displayed and if you click the Delete Item option in the Context Menu, it removes the last item you right clicked on.
Why is it allowing the context menu to show when you right click in a blank area of the DataGrid but only AFTER you've already right clicked on a item in the DataGrid?
Any tips would be appreciated. Here is my code so far:
var selectedItem; // This has to be declared "globally" outside of any functions
function onRowContextMenuFunc(e) {
grid5_rowMenu.bindDomNode(e.grid.domNode);
selectedItem = e.grid.getItem(e.rowIndex);
}
function gridRowContextMenu_onClick(e) {
store3.deleteItem(selectedItem);
}
.
<div dojoType="dijit.Menu" id="grid5_rowMenu" jsId="grid5_rowMenu" style="display: none;">
<div dojoType="dijit.MenuItem" onClick="gridRowContextMenu_onClick">Delete</div>
<div dojoType="dijit.MenuItem">Cancel</div>
</div>
.
<div id="grid" dojoType="dojox.grid.DataGrid" jsId="grid5" store="store3" structure="layoutStructure" rowsPerPage="40" onRowContextMenu="onRowContextMenuFunc"></div>
Well, I'm not exactly sure why it's allowing the context menu to show when right clicking in a blank area only after first right clicking on an item, but I did come up with a work around to fix my root problem: Right clicking on a row item in a data grid, then clicking off to hide the context menu, then right clicking in a blank area of the data grid and selecting a menu item causes the rowIndex of the first right click to be passed
Here is my code; I hope this helps anyone in the future which has the same problem:
var selectedItem;
function onRowContextMenu(e) {
grid5_rowMenu.bindDomNode(e.grid.domNode);
selectedItem = e.grid.getItem(e.rowIndex);
}
function gridRowContextMenuExecute(task) {
if((task == "remove") && (selectedItem != null)) {
store3.deleteItem(selectedItem);
}
else {
selectedItem = null;
}
}
.
<div dojoType="dijit.Menu" id="grid5_rowMenu" jsId="grid5_rowMenu" style="display: none;" onBlur="gridRowContextMenuExecute('cancel')">
<div dojoType="dijit.MenuItem" onMouseDown="gridRowContextMenuExecute('remove')">Remove from Transaction</div>
<div dojoType="dijit.MenuItem">Cancel</div>
</div>
.
<div id="grid" dojoType="dojox.grid.DataGrid" jsId="grid5" store="store3" structure="layoutStructure" rowsPerPage="40" onRowContextMenu="onRowContextMenu"></div>
grid5_rowMenu is a menu.
e.grid.domNode is the DOM node of the datagrid.
*grid5_rowMenu.bindDomNode(e.grid.domNode);*
It is : give the context menu to the grid(anywhere inside the DOM node).
Because the content in datagrid changes allways, so it is not easy to assign the menu to the element inside the grid.
If your grid does not change its contents, you can do like this:
*grid5_rowMenu.bindDomNode(e.target.parentElement);*
I have created a declarative dojo wizard in dojo 1.5 that is embedded in a dojo dialog like this:
<div dojoType="dijit.Dialog" id="genWizardDialog" jsId="genWizardDialog" refreshOnShow="true" preventCache="true" title="Title">
<div dojoType="dojox.widget.Wizard" style='height: 375px; width:400px' hideDisabled="true" doneButtonLabel="someLabel">
<div id="wizard1" dojoType="dojox.widget.WizardPane" canGoBack="false" passFunction="panelOneDriver"></div>
<div id="wizard2" dojoType="dojox.widget.WizardPane" passFunction="validateBoxes" style="padding:8px; height:100%;"></div>
....I have some more panels.
</div>
<!-- Here I have setup the cancel method. -->
<script type="dojo/method" event="cancelFunction">
//dijit.byId("genWizardDialog").onSelected(0);
dijit.byId("genWizardDialog").hide();
</script>
</div>
Everything pretty much works. However, I have 4 panels. If I proceed to panel three and hit cancel. When I then click the button to start the dojo dialog I am already at panel 3! I want to start back at panel 1. As I have already invested time into the declarative approach I am hoping to avoid doing this programmatically. I found site that mentioned an onSelected() method to accomplish this -> http://dojo-toolkit.33424.n3.nabble.com/resetting-wizard-pane-and-contents-on-reopening-wizard-td158660.html, however, this didn't work and stands to reason since looking in the Wizard.js I don't see this method defined!
In your pasted code, you have the cancelFunction event in the dialog's div, not the wizard's. So move the <script> tag inside the div that has dojoType=dojox.widget.Wizard.
To select a specific wizard pane, you can use the selectChild function.
<script type="dojo/method" event="cancelFunction">
dijit.byId("genWizardDialog").hide();
dijit.byId("genWizard").selectChild("wizard1", false);
</script>
In the above, I've assumed that your wizard has an id "genWizard", so you'd have to add that to the wizard's div.
Now the wizard will jump to the first wizard pane when you click its cancel button.
It will not jump to the first wizard pane if you just click the dialog's X button. If you want that too, you need to use the dialog's onHide event.
<script type="dojo/method" event="onHide">
dijit.byId("genWizard").selectChild("wizard1", false);
</script>
This script tag has to be in the dialog's div, not the wizard's, make sure you get that right.