Richtext custom buttons do not load initially when using content control - dojo

I have a rich text field inside a dynamic content control from exension library. In the rich text field I have set a few attributes to show specific buttons.
My problem is that the initial load of the rich text field does not display the custom buttons, I need to click the link to load the buttons. It does not seem to matter if the key is in the url or not, same results.
How can I make sure the attributes buttons are loaded initially?
Here is the code for you to try for your self, paste it in to a new xpage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex"
xmlns:xc="http://www.ibm.com/xsp/custom">
<div style="width:300px;padding:20px">
<xp:link escape="true" text="Load Content"
id="link2">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[XSP.showContent("#{id:dynC}","key1")]]></xp:this.script>
</xp:eventHandler>
</xp:link>
<br /><br />
<xe:dynamicContent id="dynC" useHash="true">
<xp:this.facets>
<xp:panel xp:key="key1">
<xp:this.data>
<xp:dominoDocument var="d" formName="Doc"></xp:dominoDocument>
</xp:this.data>
<xp:inputRichText id="inputRichText1"
value="#{d.Body}">
<xp:this.dojoAttributes>
<xp:dojoAttribute name="toolbar">
<xp:this.value>
<![CDATA[#{javascript:"[['FontSize'],['Bold','Italic','Underline','Strike'],['TextColor','BGColor']," +
"['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','NumberedList','BulletedList']," +
"['Outdent','Indent']," +
"['RemoveFormat','-','MenuPaste','-','Undo','Redo','-', 'Image','Table','Link'],['Source']]"}]]>
</xp:this.value>
</xp:dojoAttribute>
</xp:this.dojoAttributes>
</xp:inputRichText>
</xp:panel>
</xp:this.facets>
</xe:dynamicContent>
</div>
</xp:view>
This is what it looks like after initial load
This is what it looks like after clicking the link

Related

Xpages: How to toggle searchClear glypicon from search field

My Xpage has a Bootstrap style search field. When the user types something in the search field I want the clear glypicon to appear, allowing the user to clear the search field and reset the view.
I found some code to do this but am unable to integrate it into my Xpages app. When I try to run this and enter text into the field, Chrome throws the error:
Uncaught TypeError: Cannot read property
'toLowerCase' of undefined
My code is below:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:styleSheet href="/cc_CommonSearchBar.css"></xp:styleSheet>
</xp:this.resources>
<xp:div style="width:300px" styleClass="btn-group">
<xp:div styleClass="input-group add-on">
<xp:inputText styleClass="input-medium search-query"
id="searchinput" type="text">
<xp:this.attrs>
<xp:attr name="placeholder" value="Search"></xp:attr>
</xp:this.attrs>
<xp:eventHandler event="onkeyup" submit="false">
<xp:this.script><![CDATA[var srcClr = XSP.getElementById("#{id:searchclear}");
srcClr.toggle(Boolean($(this).val()));
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(this).parent().find('.searchinput').val('').focus();
$(this).hide();
});]]></xp:this.script>
</xp:eventHandler></xp:inputText>
<xp:span id="searchclear"
styleClass="searchclear glyphicon glyphicon-remove-circle">
</xp:span>
<xp:div styleClass="input-group-btn">
<xp:button styleClass="btn btn-default" type="submit"
style="height:34px">
<i class="glyphicon glyphicon-search" />
</xp:button>
</xp:div>
</xp:div>
</xp:div>
</xp:view>
With Frank's answer below I was able to get this to almost work. My only problem now is a bootstrap issue; the reset x appears over the search button. But I almost have it:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:styleSheet href="/cc_CommonSearchBar.css" />
</xp:this.resources>
<div class="input-group" style="width:300px">
<!-- <div class="btn-group">-->
<input id="searchinput" type="text" class="form-control"
placeholder="Search for..." />
<span id="searchclear" class="glyphicon glyphicon-remove-circle" />
<span class="input-group-addon" id="basic-addon2">
<i class="glyphicon glyphicon-search" />
</span>
</div>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[$(document).ready(function(){
$("#searchinput").keyup(function(){
$("#searchclear").toggle(Boolean(this.value));
});
$("#searchclear").toggle(Boolean($("#searchinput").val()));
$("#searchclear").click(function(){
$("#searchinput").val("").focus();
$("#searchclear").hide();
});
});]]></xp:this.value>
</xp:scriptBlock>
</xp:view>
first you need to identify where exactly it is going wrong.
You are calling $(".searchinput").val(), but in your code there is no element with a class 'searchinput'.
Either add 'searchinput' class to the search box.
<xp:inputText styleClass="searchinput input-medium search-query"
id="searchinput" type="text">
</xp:inputText>

Bootstrap4XPages plugin: how to catch a change event with Select2 Picker?

I am using the BS4XSP plugin and the Select2 Picker/Combo for a Listbox. Unfortunately when using it I am not able to catch the change/click/keyup event of that Listbox to execute code. This is my code extract:
<xp:div rendererType="bootstrap.Panel" title="Facets" id="facets">
<p>
<xp:listBox id="searchFacets" multiple="true" value="#{sessionScope.searchFacets}">
<xp:selectItems>
<xp:this.value>
<![CDATA[#{javascript:search.getFacets()}]]>
</xp:this.value>
</xp:selectItems>
</xp:listBox>
<bx:select2PickerCombo id="select2PickerCombo1" for="searchFacets" formatSelection="#{javascript:search.init()}">
</bx:select2PickerCombo>
</p>
<xp:button value="Update" id="button2" styleClass="btn-sm btn-primary">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="result">
<xp:this.action>
<![CDATA[#{javascript:search.init();}]]>
</xp:this.action>
<xp:this.onComplete>
<![CDATA[XSP.partialRefreshGet("#{id:facets}");]]>
</xp:this.onComplete>
</xp:eventHandler>
</xp:button>
</xp:div>
Any ideas how to trigger my code that is currently in the button below the listbox directly through the Listbox / Select2 picker?
I don't think it can be done when using the bx:select2PickerCombo control. The only way I can think of to do this would be to manually invoke the select2 plugin.
Note that I'm still loading the select2 library from the Bootstrap4XPages plugin, but in this scenario you can also just add it directly to your application, no need to only use the Bootstrap4XPages plugin for that.
<xp:this.resources>
<xp:script
src="/.ibmxspres/.extlib/bootstrap/select2/select2.min.js"
clientSide="true">
</xp:script>
<xp:styleSheet
href="/.ibmxspres/.extlib/bootstrap/select2/select2.css"></xp:styleSheet>
<xp:styleSheet
href="/.ibmxspres/.extlib/bootstrap/select2/select2-bootstrap.css"></xp:styleSheet>
</xp:this.resources>
<xp:div
title="Facets"
id="facets">
<xp:text
escape="true"
id="computedField2"
value="#{javascript:(new Date()).getTime()}">
</xp:text>
<p>
<xp:listBox
id="searchFacets"
multiple="true"
value="#{sessionScope.searchFacets}">
<xp:selectItems>
<xp:this.value>
<![CDATA[#{javascript:['option 1', 'option 2']}]]>
</xp:this.value>
</xp:selectItems>
</xp:listBox>
</p>
<xp:scriptBlock
id="scriptBlock1">
<xp:this.value><![CDATA[
x$("#{id:searchFacets}").select2().on('change', function() {
console.log('value of select2 has changed...');
//call the event handler on the server, refresh a different target when it's done
$('[name="$$xspsubmitid"]').val('#{id:myEventHandler}');
XSP._partialRefresh("post", $("form")[0], '#{id:result}', {
onComplete : function() {
console.log('calling function in onComplete event');
XSP.partialRefreshGet("#{id:facets}");
}
});
});
]]></xp:this.value>
</xp:scriptBlock>
</xp:div>
<!--this is the event handler that gets called when the value changes -->
<xp:eventHandler
event="onclick"
id="myEventHandler"
submit="true"
refreshMode="none">
<xp:this.action>
<![CDATA[#{javascript:print('call init function here' + getComponent('searchFacets').getValue() );}]]>
</xp:this.action>
<xp:this.onComplete>
<![CDATA[XSP.partialRefreshGet("#{id:facets}");]]>
</xp:this.onComplete>
</xp:eventHandler>
<xp:div
id="result">
<xp:text
escape="true"
id="computedField1"
value="#{javascript:(new Date()).getTime()}">
</xp:text>
</xp:div>

dojo textbox value is not visible in chrome after using disable attribute

I'm using DOJO 1.7 for UI and i have problem with dojo textbox if i disabled a textbox value in that text box is not visible fully gray color is appears in chrome please help me how to solve it. thanks in advance. and code snippet is:
<td><input dojoType="dijit.form.TextBox" trim="true" id="testId" name="test" maxlength="10" value="value is there" disable="disable" />
You should be using the disabled attribute, not disable, so for example:
<input dojoType="dijit.form.TextBox" trim="true" id="testId" name="test" maxlength="10" value="value is there" disabled="disabled" />
This should work fine, also in Google Chrome as you can see in the following fiddle.

Dojo autocomplete=on for textfields

I had changed my app from using normal html textfields to dijit textfields. After adding the dojo the textfields are not showing the previously entered values in the textfields as soon as i type the first character so that i need not type the text again.. is this the default behaviour of dijit textfield widget. how can i make the textfield autocomplete. please help me. i tried using the below statement in addOnLoad method but no luck
dojo.attr(dijit.byId('username').textbox, "autocomplete", "on");
How did you declare your textfield ? The following works for me :
<div id="form1" data-dojo-type="dijit.form.Form" method="post">
<input data-dojo-type="dijit.form.TextBox" name="text" id="text" autocomplete="on"/>
<input type="hidden" name="delay" value="2"/>
<button data-dojo-type="dijit.form.Button" type="submit">Send</button>
</div>
See http://jsfiddle.net/psoares/YZeTB/

How to select default tab in sx:tabbedPanel struts 2.1.6 dojo

I am using struts2.1.6 with DOJO plugin.
I have three tabs shown as TabValue1, TabValue2 and TabValue3. I want to show TabValue2 as the default tab if a certain url is clicked otherwise TabValue1 is the default tab.
Here is the code:
<sx:tabbedpanel cssStyle="width: 630px; height: 600px;" doLayout="true"
id="tabbedPanel2" selectedTab="TabValue2">
<s:if test="apptypes.size>0">
<s:iterator value="apptypes" id="apptype" status="app_stat">
<img id="indicator" src="/jctaylor/images/loader.gif"
style="display: none" />
<sx:div label="%{name}" id="%{name}" indicator="indicator"
loadingText="Loading..." href="%{showTab}%{typeid}"
refreshOnShow="true" preload="false" >
</sx:div>
</s:iterator>
</s:if>
</sx:tabbedpanel>
Its working for the default tab selection which is the first tab. But when I click on the link which is supposed to select the TabValue2 tab its not working. I have created a separate page for it and put the selectedTab="TabValue2" but still its showing the TabValue1 selected.
If you have any suggestion please so let me know.
I have figured out the solution
The solution is: instead of specifying the value of the tab selectedTab="TabValue2" specify the id of the corresponding tab. As shown:
<sx:tabbedpanel cssStyle="width: 630px; height: 600px;" doLayout="true"
id="tabbedPanel2" selectedTab="tab2">
<s:if test="apptypes.size>0">
<s:iterator value="apptypes" id="apptype" status="app_stat">
<img id="indicator" src="/images/loader.gif"
style="display: none" />
<s:set var="i" name="counter1" value="#app_stat.count"/>
<sx:div label="%{name}" id="tab%{counter1}" indicator="indicator"
loadingText="Loading..." href="%{showTab}%{typeid}"
refreshOnShow="true" preload="false" >
</sx:div>
</s:iterator>
</s:if>
</sx:tabbedpanel>