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
Related
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 have 2 components. I have some checkboxes in first component.It resides in left side of the Web Page like Nav bar. In second component I would like to load some HTML Div element on the basis of those checkbox. Now I can load the divs while clicking on those checkboxes using below code.
mounted () {
EventBus.$on('change',this.formated);
},
But when I am clicking on a new checkboxes the loaded divs of previous checkboxes will not disappear. I can see both output of current and previous checkboxes as like output of .append() of jQuery.
How can I clear/disappear previous HTML outputs ?
You need use jQuery's clear() on the elements innerHTML which you're appending too. A better approach would be to instead of appending content, use a v-for directive and maintain an array in the data property with the content you want visible. That would be leveraging vue's reactivity for its intended purposes and offer a more flexible implementation.
I have a bootstrapped template with datatables.net, I'd like to use the same datatables grid (same functionality/data) within the page, and a modal popup that gets fired from within the same page somewhere.
How would I be able to duplicate the exact same grid without duplicating my code?
I'm trying to change the color of a tab in a tabpanel I have when my app goes online or offline. I have the online and offline events already setup but now I need to be able to change the color of the tab from these events.
How do I go about accessing an individual tab and setting it's CSS?
you could use ext component query to get the handle of the component and then add/remove class
Ext.ComponentQuery.query('yourselector')[0].addCls('yourclass')
You can get the individual tab from tabpanel by referring it as following inside the controller class (inside the refs):
myDesiredTab: '#myTabPanelId container[title=myDesiredTabTitle]'
and afterward you can try:
this.getMyDesiredTab().tab.setCls('myDesiredCssClass');
This idea hasn't been tested but might just work as the tabbar does have cls config and we have a way to access the individual tab.
I have a StackContaner which contains multiple ContentPanes. When I try to add content to a nested ContentPane (after it has been created and rendered), it doesn't resize, it always keeps it's initially size. Is there an easy way to get around this? Here is how it is laid out:
StackContainer
-ContentPane
--ContentPane (nested)
-ContentPane
Here is working example example:
http://jsfiddle.net/zzdyM/1/
Click the add button in the sample, I want to make it so the divs automatically resize the height to show the new content, instead of keeping the same height with scrollbars. Clicking the button should add another span element to the innerPane, not replace what is currently there.
Any ideas what I'm doing wrong?
Are you trying to achieve a specific layout or just replace the existing content "Blah Blah Blah" with new content?
If you just wish to replace existing content with new content, the following is the best option:
dijit.byId('innerPane').attr('content','<span>Added Content</span>');
See updated fiddle: http://jsfiddle.net/YdZyZ/1/