I am trying to hide a component and update the image in a button when I click said button. I have managed to hide the component by doing the follow:
{<MyAwesomeComponent /> unless #state.hide}
And I change the state by doing:
toggleComponent = ->
#setState
hide: !#state.hide
. . .
<div
onClick={#toggleComponent}>
<img
src="img/interface/icon-chevron-left.png"
className={if #hide then "hidden"}/>
</div>
Unfortunatelly the {if #hide then "hidden"} doesn't seem to work. Any ideas on how to do this?
The hide property is set on #state, not on the component instance.
if #state.hide then "hidden"
Related
Spinner refers to the spinner that appears on the input on the right corner when isLoading = {true}.
clearButton refers to the clearButton to clear data in input box.
You can customize those items by passing your own components via the typeahead's child render prop:
<Typeahead ... >
{({ onClear, selected }) => (
<div className="rbt-aux">
{!!selected.length && <MyClearButton onClick={onClear} />}
{!selected.length && isLoading && <MySpinner />}
</div>
)}
</Typeahead>
Working example: https://codesandbox.io/s/rbt-custom-aux-components-gn3kn
Note that the .rbt-aux classname is used internally to position the built-in clear button and loader components and can be re-used. You may also add your own styles to position the custom components however you want.
I have the following Javascript code and I'm trying to make it dynamic within a sightly component.
<script type="text/javascript">
$('#map').usmap({
showLabels: true
});
</script>
I need the "true" to toggle based on a checkbox in the dialog. And it needs to be a boolean, not a string.
example.html
<script type="text/javascript">
var fillColor = '#${properties.fillColor #context="scriptString"}';
var hoverColor = '#${properties.hoverColor #context="scriptString"}';
var showStateLabels = '${properties.option2 #context="text"}';
var defaultStateColor = ${properties.option2 ? '#fff' : '#AAA' #context='scriptString'};
console.log("showStateLabels");
$('#map').usmap({
showLabels: showStateLabels
});
</script>
<div id="map" style="width: 800px; height: 500px;"></div>
dialog.xml
<option2 jcr:primaryType="cq:Widget"
fieldLabel="Map Option 2?"
name="./option2"
width="150"
xtype="selection"
type="checkbox"/>
I'm able to get it to console.log "true" if the checkbox is checked, but nothing if the checkbox isn't checked. How can I make this variable toggle true/false based on a dialog checkbox?
It looks like this is a question regarding Classic UI dialogs.
If so, please refer to: https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/xtypes.html, see "checkbox" section.
your widget should have xtype="checkbox"
And the classic UI docs for it are here: https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.Checkbox
you could try adding defaultValue="false"
additionally, you can try Nate's suggestions in the post: http://www.nateyolles.com/blog/2015/11/aem-checkboxes-using-sling-post-servlet. in your case, this would be:
<option2 jcr:primaryType="cq:Widget"
fieldLabel="Map Option 2?"
name="./option2"
width="150"
defaultValue="false"
xtype="checkbox"/>
<option2Type
jcr:primaryType="cq:Widget"
ignoreData="{Boolean}true"
name="./option2#TypeHint"
value="Boolean"
xtype="hidden"/>
Alternatively. and if you don't want to play with classic widgets, you could just render false when the property does not exist:
var showStateLabels = ${properties.option2 ? 'true' : 'false' #context='scriptString'};
could also try context='scriptToken', cant remember which one is applicable in this case, but easy to verify.
Hope this helps.
If the checkbox is not checked, the property will be empty or will not exist at all in AEM. If the property is not empty, you know that the checkbox is checked.
So you can just do something like this:
showLabels = '${properties.option2 #context="text"}' ? true : false;
Hope that helps.
I want to remove the loading window, that appears when report loads/refresh.
How to do this?
Can anyone tell me the file name in the jasper server installation directory that should I change at least?
On loading.jsp file in the Jasper Server installation directory(tomcat\webapps\jasperserver\WEB-INF\jsp\templates\loading.jsp) comment below part
<t:insertTemplate template="/WEB-INF/jsp/templates/container.jsp">
<t:putAttribute name="containerID" value="${not empty containerID ? containerID : 'loading'}"/>
<t:putAttribute name="containerClass">panel dialog loading overlay moveable centered_horz centered_vert ${containerClass}</t:putAttribute>
<t:putAttribute name="containerTitle"><spring:message code='jsp.wait'/></t:putAttribute>
<t:putAttribute name="headerClass" value="mover"/>
<t:putAttribute name="bodyContent" >
<p class="message" role="alert" aria-live="assertive"><spring:message code='jsp.loading'/></p>
<button id="cancel" class="button action up"><span class="wrap"><spring:message code="button.cancel"/></span><span class="icon"></span></button>
</t:putAttribute>
</t:insertTemplate>
When you do like above example, loading window will be disappear from everywhere.
To remove loading for a specific report,
put two div tags with id attribute. then hide the div using js code.
Below I shown the example;
<div id="prabu">
<div id="x3">
<t:insertTemplate template="/WEB-INF/jsp/templates/container.jsp">
<t:putAttribute name="containerID" value="${not empty containerID ? containerID : 'loading'}"/>
<t:putAttribute name="containerClass">panel dialog loading overlay moveable centered_horz centered_vert ${containerClass}</t:putAttribute>
<t:putAttribute name="containerTitle"><spring:message code='jsp.wait'/></t:putAttribute>
<t:putAttribute name="headerClass" value="mover"/>
<t:putAttribute name="bodyContent" >
<p class="message" role="alert" aria-live="assertive"><spring:message code='jsp.loading'/></p>
<button id="cancel" class="button action up"><span class="wrap"><spring:message code="button.cancel"/></span><span class="icon"></span></button>
</t:putAttribute>
</t:insertTemplate>
</div>
</div>
Then add below javascript code;
<script>
var url = window.location.href; //take current tab url
var dash = 'http://localhost:8080/jasperserver/flow.html?_flowId=viewReportFlow&_flowId=viewReportFlow&ParentFolderUri=%2FMy_Reports&reportUnit=%2FMy_Reports%2FDashboard_Report_Original__2_&standAlone=true';
if(url === dash ){
removeElement("x3");
}
function removeElement(elementId) {
// Removes an element from the document
var element = document.getElementById(elementId);
element.parentNode.removeChild(element);
}
</script>
In my case, I use a report as my dashboard and I refresh it in every 1 minute.So I want to remove loading window for my dashboard report only.
On js code,
url is current url from the browser.
dash is the my dashboard report url.
I'm using Reactjs together with the tinyMCE 4.1.10 html editor (together with the code plugin) and bootsrap css + js elements. A fairly working setup after a few quirks with the editor have been removed (manual destruction if the parent element unmounts)
Now the question: The textarea input of the code plugin does not receive any focus, click or key events and is basically dissabled. Setting the value via javascript works just fine, but it does not function as a normal html input.
It is opened as the following:
datatable as react components
opens bootsrap modal as react component
initializes tinymce on textareas inside of the modal
loads the code plugin (which itself then is not accepting any kind of input anymore)
My initilization of the editor looks like this:
componentDidMount: function(){
tinymce.init({
selector: '.widget-tinymce'
, height : 200
, resize : true
, plugins : 'code'
})
}
My guess would be, that react.js is somehow blocking or intersepting the events here. If I remove the react modal DOM, it is just working fine.
Does anybody has an idea, what is causing this or how to simply debug it further?
Thx a lot!
if you are using Material UI. disable Material UI Dialog's enforce focus by adding a prop disableEnforceFocus={true} and optionally disableAutoFocus={ true}
What does your html/jsx look like in your component?
My guess is that react might be treating your input as a Controlled Component
If you're setting the value attribute when you render, you'll want to wait, and do that via props or state instead.
Alright, so it turned out that bootstrap modals javascript is somehow highjacking this. In favor of saving some time I decided not to dig realy into this but just to create my own modal js inside of the jsx.
Aparently there is also React Bootstrap, but it looks at the moment to much beta for me in order to take this additional dependency in.
The final code looks like this, in case it becomes handy at some point:
Modal = React.createClass({
show: function() {
appBody.addClass('modal-open');
$(this.getDOMNode()).css('opacity', 0).show().scrollTop(0).animate({opacity: 1}, 500);
}
, hide: function(e){
if (e) e.stopPropagation();
if (!e || $(e.target).data('close') == true) {
appBody.removeClass('modal-open');
$(this.getDOMNode()).animate({opacity: 0}, 300, function(){
$(this).hide();
});
}
}
, showLoading: function(){
this.refs.loader.show();
}
, hideLoading: function(){
this.refs.loader.hide();
}
, render: function() {
return (
<div className="modal overlay" tabIndex="-1" role="dialog" data-close="true" onClick={this.hide}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" onClick={this.hide} data-close="true" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 className="modal-title" id="myModalLabel">{this.props.title}</h4>
</div>
<div className="modal-body" id="overlay-body">
{this.props.children}
<AjaxLoader ref="loader"/>
</div>
</div>
</div>
</div>
);
}
})
Best wishes
Andreas
Material UI: disable Dialog's enforce focus by adding a prop disableEnforceFocus={true} and optionally disableAutoFocus={ true}
I don't know if it is an easy question but i couldn't find the solution. I want to create 10 buttons in dojo like the button below.
<div style="right: 1px">
<button data-dojo-type="dijit.form.Button" id="SaveChangesDataGrid1" onclick="SaveChanges()">
Save</button>
</div>
but each button with different ID but the same function onClick. so what i want is when the button is clicked the id of the clicked button will be known in the function.
I am using dojo 1.8 any ideas?.
Change your onclick="SaveChanges()" to onclick="SaveChanges(event)" or get rid of it and use data-dojo-props:
<button
data-dojo-type="dijit.form.Button"
data-dojo-props="onClick:SaveChanges"
id="SaveChangesDataGrid2"
>
SaveChangesDataGrid2
</button>
Start your SaveChanges() this way to get id:
require([
"dijit/registry",
"dijit/form/Button",
], function(
registry
) {
window.SaveChanges = function(event) {
var button = registry.getEnclosingWidget(event.target);
console.log("onclick id:", button.id);
}
});
See it in action at jsFiddle: http://jsfiddle.net/phusick/WfdKF/