I'm trying to make a pop up selector using the Dialog control. My idea is to have a list box with a list and upon selection it should set a sessionScope and close. On the pc i have finished it and it works perfectly. On the ipad i get an empty dialog.
Im thinking its some of the reoccurring issues with IOS and datasources? Anyway here is my code:
<unp:unpDialog callback="SetCoolList" title="List of Choices"> <xp:this.facets> <xp:panel xp:key="facet_1"> <xp:listBox id="listBox1" styleClass="mychooser"> <xp:selectItems> <xp:this.value><![CDATA[#{javascript:sessionScope.bitsnbobs;}]]></xp:this.value> </xp:selectItems> <xp:this.attrs> <xp:attr name="onchange"> <xp:this.value><![CDATA[#{javascript: return "$('.OptionsButton').click();"; }]]></xp:this.value> </xp:attr> </xp:this.attrs> </xp:listBox> <xp:button id="OptionsButton" styleClass="OptionsButton hidden"> <xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="true"> <xp:this.action> <xp:actionGroup> <xp:executeScript> <xp:this.script><![CDATA[#{javascript:sessionScope.coollistwa = getComponent("listBox1").getValue();}]]></xp:this.script> </xp:executeScript> </xp:actionGroup> </xp:this.action> </xp:eventHandler> </xp:button> </xp:panel> </xp:this.facets> </unp:unpDialog>Is there a workaround for providing a collection of strings to the listbox that works with a dialog control and on the ios?
I tested your code using the Unplugged Controls 3.3 database and you're right in seeing a different behaviour in a desktop browser vs iOS: in the desktop browser you'll get a <select> control that shows multiple entries at once, on iOS you'll see a blank box. Tapping on that blank box brings up the standard iOS value picker. The only issue I see is that the blank box looks strange in the dialog.
This doesn't seem to me like an Unplugged issue, but rather the result of the way these controls are rendered in different browsers. See also this thread for some background. There are some workarounds discussed there.
If you want to display a list of choices you can also use an <xp:repeat> control in the dialog that shows the text of each entry and attach an onclick handler to each entry like you did in your code to the options of the <xp:listBox>.
Related
The Office UI Fabric DetailsList component has an odd behavior when viewed on a mobile device. When you check a selected item in the list, all of the checkboxes suddenly appear (unselected).
Before selecting:
After selecting:
You can repro using this codepen: https://codepen.io/elegault/pen/GPwNMQ
Simply open the browser dev tools and select any device from the emulators list, and then toggle on a selection. You'll notice the checkboxes do not all appear when in full browser mode.
I can't find any properties for the DetailsList component that controls this. My component's settings are below. Is this behavior by design or a bug?
const projects = <Fabric.DetailsList
items={this.state.items}
componentRef={this._detailsListRef}
columns={columns}
selectionMode={Fabric.SelectionMode.single}
selectionPreservedOnEmptyClick={true}
enterModalSelectionOnTouch={true}
selection={this._selection}
/>;
Looking at this simple detailslist example I don't see the same behavior.
https://codepen.io/dzearing/pen/EgqMZq
<p>
Can you create a reduced test case and then if you still see the problem, submit an issue to https://github.com/OfficeDev/office-ui-fabric-react/
Microsoft has verified that this behavior is by design:
https://github.com/OfficeDev/office-ui-fabric-react/issues/7808
"The idea is that on a touchscreen device, it shows you the checkboxes so you know what can and can't be selected (contrary to a mouse controlled device where they have the option to hover over a row to see the checkbox visible)."
I'm using dojo 1.9 inside Ibm Content Navigator and my dropdowns(dijit.form.DropDownButton) suddenly stop working after opening and closing the same screen about 15-20x. I click on the arrow and the options are not displayed. That happens with DateTextBox(dijit/form/DateTextBox) as well. And not only my screen dropdowns stop work but every single dropdown and DateTextBox in the system dont work anymore. All the other widgets are working fine. I have to refresh the page to make everything work again. Not doing anything special here.
these are 2 examples of dropdown and datetextbox
Does anyone have a clue of what is happening here ?
<div
data-dojo-attach-point="invoiceDateMisc"
data-dojo-attach-event="onChange: setCAVATCodes"
name="${id}_invoiceDateMisc" id="${id}_invoiceDateMisc"
tabindex="13"
data-dojo-type="dijit/form/DateTextBox"
constraints="{ min: '01/01/1950', max: new Date()}"
missingMessage="Invoice Date is a required field."
rangeMessage="Invoice Date must not be a future date."
required="true" >
</div>
<div data-dojo-attach-point="dbCrMisc"
name="${id}_dbCrMisc"
id="${id}_dbCrMisc"
data-dojo-type="ecm.widget.Select"
tabindex="14" >
</div>
It turned out there were some no modal dialogs where I show error/warning messages to users that were not being properly closed, just hidden, so after some time of system usage, it breaks the dropdowns and calendars for some unknow reason. Really tought one, no error messages, nothing on console, not a clue and I still dont know why it happened. And my attempt to fix this was just a guess, a feeling, knowing a bit more of Dojo behavior.
I have a straightforward XPage that lets a user answer a question with a simple Yes/No/NA response using radio buttons. I have restyled the radio buttons to look like a bootstrap button group to make it visually more interesting for the user. If the user chooses "Fail" then they are informed that they need to do something else - easily done with a simple partial refresh to a div further down the page.
This all works fine.
The problem I'm having is that I'd like it so that when the user selects an option, I would like to add a new class of "active" to the selected option so that it highlights in a pretty colour. But for the life of me I can't get this to work and though I'm sure it's a straight forward problem, I can no longer see the wood for the trees.
My current (abridged) iteration of the radio button code is this:
<xp:div styleClass="btn-group item-result" id="edit-result" loaded="${Question.open}">
<xp:radio text="${lbl.kwPass1}" id="itemPass"
styleClass="btn btn-pass #{(item.itemResult eq '0')?'active':''}" groupName="itemResult"
selectedValue="1">
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="actionAlert">
<xp:this.script><![CDATA[XSP.partialRefreshPost('#{id:edit-result}');]]></xp:this.script>
</xp:eventHandler>
</xp:radio>
<!-- other radio buttons -->
</xp:div>
<!-- other page compenents -->
<xp:panel id="actionAlert">
<!-- panel content and appropriate rendered value -->
</xp:panel>
This was attempting to do a chained partial refresh on the radio button container so that the EL would evaluate and apply/remove the 'active' style based on the document datasource ('item') value. I have also tried using dojo.addClass, dojo.removeClass, XSP.partialRefreshGet and other options. I don't mind what the solution is as long as it's efficient and works. I'd prefer not to move the actionAlert panel to within the same container as the radio buttons and I can't do a full page refresh because there are other fields which will lose their values.
Some notes:
I'm not using a RadioGroup control because it outputs a table and I haven't got around to writing my own renderer for it yet. Single Radio button controls work fine for what I need them to do.
I originally tried using the full Bootstrap solution of using "data-toggle='buttons'" (source) which sorts out applying the "active" style fine but then, inevitably, prevents the partial refresh from working.
the radio button styles are clearly not Bootstrap standard
Any assistance pointers or, preferably, working solutions would be appreciated.
You need to aim your partial refresh at the div containing all your radio buttons. Give it an id, so you can address it.
Partial refresh, as the name implies, refreshes one element and its content only. So you target the element that covers all of the items you need to recompute.
Stepping away from the problem, a couple of beers and an episode of iZombie later, I realized what I was doing wrong and sorted it out. So, for posterity, here is the simple solution that I swear I tried earlier but clearly works now:
<xp:div styleClass="btn-group item-result" id="edit-result" loaded="${Question.open}">
<xp:radio text="${lbl.kwPass1}" id="itemPass" value="#{item.ItemResult}"
styleClass="btn btn-pass" groupName="itemResult" selectedValue="1">
<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="actionAlert">
<xp:this.script><![CDATA[dojo.query('.item-result > .btn').removeClass('active');
dojo.query('.btn-pass').addClass('active');]]></xp:this.script>
</xp:eventHandler>
</xp:radio>
<!-- et cetera -->
The many places I was going wrong:
In my code in the question, I was calling XSP.partialRefreshPost in the CSJS script of the radio button when it should have been in the onComplete of the eventHandler. It has to be chained to another partial refresh so that it runs after it, not at the same time. I did end up getting this right - but overlooked something I'll come to in point 3.
In my original attempt to use Dojo, my first mistake was to try and target the ID of the radio button, something like:
dojo.addClass(dojo.byId('#{id:radio2}'),'active');
This actually works as expected, so long as you remember that the ID of the radio button on the XPage refers to the actual radio button control and not the label wrapping; and the label is what I wanted to style. So the class "active" was being actually being added, just not to the element I thought it was. I should have spotted this in my browser code inspector except for the third thing I got wrong:
Ironically, I sorted out the first issue, remembering to put the XSP.partialRefreshPost into the onComplete - and then didn't remove it when trying to run the Dojo.addClass(). So I didn't notice the mistake with the addClass targeting the wrong element because after it ran, the partial refresh updated the container and removed the class I had just added which made me think that nothing was working.
So now I have some neatly styled radio buttons that don't look like radio buttons and it's all managed client side without any unnecessary partial refresh trips to the server barring the one where I actually need to look stuff up from the server. And the vital lesson is - sometimes you just need to step away from a problem and come back to it with fresh eyes later on.
I make a partialRefresh on a tab container with 4 tabs:
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="djContentPane1">
<xp:this.action><![CDATA[#{javascript:viewScope.put("hideRelatedDocuments", true);}]]></xp:this.action>
</xp:eventHandler>
The viewScope is then used to some fields which I want to hide/show. Those fields lay on the tab container.
And after this, the tab container looks strange:
What might be the problem? Thanks for your time.
I tried adding a mainPanel, and on this panel I added the TabContainer. Then, I updated the panel but sttill, no work. The result:
You can refresh the fields to show/hide them depending on current value in combobox field if you
put the fields into panels which have an id and always gets rendered
place the panels into the Tab Panels
refresh all panels on onchange event of your combobox with XSP.partialRefreshPosts
Look for the sample code here.
It's because you're refreshing the content pane. I've not pinned down the cause, but refresh either an area outside the Dojo Tab Container or a panel/div that's inside the Tab Container Pane you want to refresh.
I suspect it's something to do with Dojo then processing the response HTML. As a client-side framework, I don't think Dojo is really designed to handle replacing HTML by injection into an existing page.
Tommy Valand added a snippet to handle this problem: http://dontpanic82.blogspot.co.uk/2013/03/fix-for-partial-refresh-on-dojo-tab.html
I've built a form, and next to my form element I've placed a flash object. When the page is loaded, the form is display: block, and the flash object is display: none.
The layout looks something like (the img is there so that if the user doesn't have flash, the gif animation will play instead):
<form id="form"></form>
<div id="upload-anim-div">
<object type="application/x-shockwave-flash"
data="<?= PAL_STATIC_HOST ?>/music/introducing/flash/upload_animation.swf"
width="626"
height="600">
<param name="movie" value="<?= PAL_STATIC_HOST ?>/music/introducing/flash/upload_animation.swf"/>
<img src="<?= PAL_STATIC_HOST ?>/music/introducing/img/Anim-placeholder.gif" alt="upload animation (gif)"/>
</object>
</div>
When I submit my form, which is just to upload a file, I hide the form and display my animation div as follows in javascript:
$('#form').hide();
$('#upload-anim-div').show();
This works great in all browsers except Safari, where a big white space appears. Right clicking this white space simply gives me the following menu:
Flash movie not loaded... _not clickable_
About Adobe Flash Player 10.5.blah...
Why is the movie not loaded/loading?! If I simply display the movie when the document first loads (by removing the javascript line that initially hides it) it loads and displays fine! Any ideas would be greatly appreciated!
---EDIT---
I've now tried using swfobject, but get exactly the same problem. I used this kind of code in my javascript to embed my swf with javascript after displaying the upload-anim-div:
swfobject.embedSWF("myContent.swf", "upload-anim-div", "626", "600", "10");
Anyone have any further ideas?
Sounds like Safari tries to shave the page load time by not rendering Flash in a hidden div. How are you putting the Flash into the div, is it just an object tag, or are you using something like swfobject? If you're using swfobject you could write the Flash to the div when you reveal it.
I think you should try to embed your Flash content with swfobject: