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.
Related
I'm learning Dojo Toolkit and I'm fighting with adding dijit into dijit. There was simmilar post about it but wih DIV's. I just simply want to programmatically insert a button or anything else to a ContentPane like this:
I have a script (with required items to insert button):
require(["dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dojo/domReady!", "dijit/form/Button", "dijit/_WidgetBase"],
function(AccordionContainer, ContentPane, Button){
var aContainer = new AccordionContainer({style:"height: 300px"}, "markup");
var aChild1 = new ContentPane({
title: "Date selectors",
content: "Test"
});
var aChild2 = new ContentPane({
title:"Group 2",
content:"Test"
});
var aChild3 = new ContentPane({
title:"Group 3",
content:"Test"
});
aContainer.addChild(aChild1);
aContainer.addChild(aChild2);
aContainer.addChild(aChild3);
aContainer.startup();
});
And my DIV is simply:
<div id="markup" style="width: 250px; height: 300px">
This ContentPane should work as left toolbar with rollable panes. In first one I'd like to add date pickers or button or anything else. Above code works until I try to add subChild. I tried to create var with button and make it child of a content pane like:
var btn as new Button([...]);
and place it here:
aContainer.addChild(aChild1);
aChild1.addChild(btn);
aContainer.addChild(aChild2);
aContainer.addChild(aChild3);
aContainer.startup();
but it not works. How can I build my layout in this case? Thanks in advance for help.
Problem solved. I applied declarative instead of programatic creation:
In script, I simply added this line:
require(["dojo/parser", "dijit/layout/ContentPane"]);
Then I wrote some divs like:
<div data-dojo-type="dijit/layout/ContentPane">
Some text
</div>
I found a tip (inside the code of demos) that:
content pane has no children so just use dojo's builtin after advice
dojo.connect(dijit.layout.ContentPane.prototype, "resize",
function(mb)
... so all I had to do was:
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='selected:true, title:"Calendar"'>
<!-- calendar widget pane -->
<input id="calendar1" data-dojo-type="dijit.Calendar">
</div>
If you would like to see, how to place any of layout items in one place, see Dojo Theme Tester (view source):
https://download.dojotoolkit.org/release-1.7.0/dojo-release-1.7.0/dijit/themes/themeTester.html?theme=tundra
You will find every fragment well described. For me, it is more useful than documentation.
I hope that by solving my problem, this solution will be helpful to someone.
I have a strange behavior of TestCafe on my site. I have two checkboxes on a site and a button that brings me to the next step as soon as I click on it. When the page load, de button is visible and does not get manipulated at any time.
Here is the markup of the button:
<button id="confirmation-submit" type="submit" class="btn btn-success pull-right hidden-xs">
<span class="glyphicon glyphicon-flag"></span>
order now
</button>
Here is what my code looks like (the relevant part for this problem):
const submitOrderBtn = Selector('button[type="submit"].btn-success');
//const submitOrderBtn = Selector('#confirmation-submit');
test('complete order', async t =>{
await t
.click(submitOrderBtn)
In chrome it shows me this picture:
The output of the command line is this:
The button is visible the whole time and even when I look over the site with the developer tools, the button is there and it has the id (confirmation-submit) that I want to be clicked.
How can I get around this problem? On other pages, I can use the .click function without any problems.
As #Andrey Belym mentioned in his comment, TestCafe will consider element visibile if its width or height have a non-zero value and it is not hided using CSS properties like display: hidden and visibility: none.
You can check it in Computed CSS Properties in DevTools. In your case, #confirmation-button might be an invisible button hidden somewhere in an actual visible element.
Also, you can try to resize browser window using resizeWindow action. It may help if your layout is adaptive or it is a scrolling issue.
As a workaround you could try to click on the button parent container:
const submitOrderBtn = Selector('#confirmation-submit');
const confirmSelector = submitOrderBtn.parent();
test('complete order', async t =>{
await t
.click(confirmSelector)
if this does not work for the immediate parent, you could try to fetch the first parent div like this:
const submitOrderBtn = Selector('#confirmation-submit');
const confirmSelector = submitOrderBtn.parent('div');
test('complete order', async t =>{
await t
.click(confirmSelector)
<button data-se-id="confirmation-submit" type="submit" class="btn btn-success pull-right hidden-xs">
order now
</button
and in test add like this : for click specified element :
const submitOrderBtn =Selector('[data-se-id="confirmation-submit"]')
test('complete order', async t =>{
await t
.click(submitOrderBtn)
I need to open Google's latest reCAPTCHA widget in a popup (modal) dialog, a Dojo Dialog in my case, and I've got that working fine, but I just realized that the user cannot keyboard navigate to it.
When the reCAPTCHA widget is displayed in the main view, not a modal dialog, then of course the user can easily keyboard navigate to it.
Has anyone found a way to set focus on the reCAPTCHA widget so that the user can access it without a mouse when the reCAPTCHA is in a Dojo Dialog?
I did see that reCAPTCHA is generated within an <iframe>. Is that part of the hurdle - that keyboard navigation can't reach content within an iframe? I've even tried to call document.getElementById("recaptcha-anchor") since I saw that that's the id of the <span> that holds the "checkbox" - but that is returning null. How to reach an element within an iframe?
I have a jsfiddle example available for demonstration at
https://jsfiddle.net/gregorco/xqs8w5pm/5/
<script>
var onloadCaptchaCallback = function() {
console.log("jsfiddle: rendering captcha");
globalRecaptchaWidgetId = grecaptcha.render('captchaDiv', {
'sitekey' : '6LcgSAMTAAAAACc2C7rc6HB9ZmEX4SyB0bbAJvTG',
'callback' : verifyCaptchaCallback,
'tabindex' : 2
});
grecaptcha.reset();
}
var verifyCaptchaCallback = function(g_recaptcha_response) {
console.log("Response validated. Not a robot.");
};
</script>
<script src='https://www.google.com/recaptcha/api.js?onload=onloadCaptchaCallback&render=explicit' async defer></script>
<div id="testDiv">
<button type="dojo/form/Button" onClick="captchaPopup.show();">Open reCAPTCHA</button>
</div>
<div data-dojo-type="dijit/Dialog" data-dojo-id="captchaPopup" title="Human Verification" style="width:350px;">
Cannot keyboard navigate to the checkbox!
<table>
<tr>
<td>
<div id="captchaDiv"></div><br/>
</td>
</tr>
</table>
</div>
Give this fiddle a try. Normally Dijit dialogs don't work too well with iframes in them because it doesn't know how to parse the content inside an iframe. In this case, we can use some of Dojo's functions to work around it. One notable thing to point out is that I've disabled autofocus of the Dijit Dialog so that it won't automatically focus the closeNode inside the dialog.
After the dialog loads, tab>space will select the captcha.
This may help others facing similar issue, but with Bootstrap modal dialog. I found the following solution on GitHub. Add the following Javascript to override Bootstrap:
Bootstrap 3x
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
Bootstrap 4x
$.fn.modal.Constructor.prototype._enforceFocus = function () { };
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 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');
}
);