I'm using a material checkbox but it doesn't return true or false. This is my code:
<FormControlLabel
control={
<Checkbox defaultValue={data.hasPhone} defaultChecked={data.hasPhone} color="primary" {...register("hasPhone")}/>
}
label="Do you have a phone"
/>
{hasPhone && (
<Input
{...register("phoneNumber")}
id="phoneNumber"
type="tel"
label="Cellulare"
name="phoneNumber"
/>
)}
When the checkbox is true, we have a condition, "hasPhone" that open another input field.
If i use a my checkbox like this:
<input type="checkbox" placeholder="Developer" {...register("hasPhone")} />
in above case the condition working correctly.
Can you help me please? thx
The reason why it is working for your "hasPhone" <input /> is that it is a native form element in contrast to the Material UI <Checkbox /> component, which is an external controlled input.
So for native form elements you can use register, but for external controlled components you have to use RHF's <Controller /> component. Check this section in documentation for more infos.
Related
I'm trying to build on react-admin. The base structure is this:
<Show {...props} >
<SimpleShowLayout>
<TextField source="id" />
<TextField source="name" />
</SimpleShowLayout>
</Show>
I'm looking to do something like this:
<Show {...props} >
<div className="row">
<div className="col-sm-6">
<TextField source="id" />
</div>
<div className="col-sm-6">
<TextField source="name" />
</div>
</div>
</Show>
We need to update our documentation about this. We recently decoupled components with logic, that we name XXXController (ListController, CreateController, etc) in the ra-core package and UI components (List, Create, etc) in the ra-ui-materialui package which the controllers.
Think about the react-admin package as a distribution of react-admin with material-ui UI. When heavy customization is needed, you can use the controllers directly.
For now, you'll have to explore the source code to fully understand how to use them.
Here's an example:
import { ShowController, ShowView, SimpleShowLayout, TextField } from 'react-admin';
const UserShow = props => (
<ShowController {...props}>
{controllerProps =>
// You're on your own here
}
</ShowController>
);
I'm learning Material UI and I'm trying to display an checkbox with a label. Following the samples in the online docs, I'm rendering a checkbox, but no label. What am I doing wrong?
return (
<div className="entryForm" >
<div style={{width:'100%'}}>
<h3 style={ {display:'inline-block' } }>
User Details
</h3>
<span style={{float:'right'}}>
<Checkbox
label="Active"
labelPosition="left"
/>
</span>
</div>...
I think it depends on the MUI version you are using.
If you're using version 1.0 and above you should use FormControlLabel:
import {FormControlLabel} from 'material-ui/Form';
<FormControlLabel
control={
<Checkbox
name="SomeName"
value="SomeValue"
/>
}
label="MyLabel"/>
More in the documentation:
https://material-ui-next.com/demos/selection-controls/
FormControlLabel would be the way to go, here is what it looks like with the updated import v4.11.1
import { FormControlLabel } from '#material-ui/core';
<FormControlLabel
control={
<Checkbox
name="SomeName"
value="SomeValue"
/>
}
label="MyLabel"/>
i need to make all component editable when i clicked on h:commandLink
This my code
<p:dataTable styleClass="borderless" id="projectsTable" var="o" value="#{order.orderList}">
<p:column>
<div class="tasks">
<div class="task-item task-success">
<h:form>
<div class="task-text">
<div class="form-group">
<h:outputLabel for="projectName" value="Project Name:" />
<p:inplace effectSpeed="fast" editor="true">
<p:inputText styleClass="form-control" value="#{o.productName}" required="true" label="text" />
</p:inplace>
</div>
<div class="form-group">
<h:outputLabel for="projectURL" value="Project URL:" />
<p:inplace effectSpeed="fast" editor="true">
<p:inputText styleClass="form-control" value="#{o.price}" required="true" label="text" />
</p:inplace>
</div>
</div>
<div class="task-footer">
<div class="pull-left">
<h:commandLink >
<span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span> EDIT
</h:commandLink>
</div>
<div class="pull-right">
<h:commandLink action="#{order.deleteAction(o)}" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> Delete
</h:commandLink>
</div>
</div>
</h:form>
</div>
</div>
that's link i need to click on it and open all h:inputText
<h:commandLink action="#{order.update(o)}">
<span class="glyphicon glyphicon-ok-circle" aria-hidden="true">
</span> EDIT
</h:commandLink>
Such as linkedIn in editProfile page when click on button appear all editable components
Examples:
Befor click button
After clicked button
First of all, every PrimeFaces component has a javascript representation which is acessible through the widgetVar.
The Inplace's widget has a method called show() that you can use to show the input field for it. Check this code out:
<p:inplace ... widgetVar="myinplace">
<p:inputText ... />
</p:inplace>
<!-- this button's click will show the input -->
<button onclick="myinplace.show()">Click Me</button>
I suggest you to set the widgetVar attribute for the inplace components and call the show method on each one of them inside a function that you can use everywhere you want:
<script>
function showInplaces() {
myinplace1.show();
myinplace2.show();
...
}
Cheers
During my lunchbreak I was curious, so I did have a quick look.
I looked at the generated source in the showcase of the first item:
<span id="j_idt88:basic" class="ui-inplace ui-hidden-container" data-widget="widget_j_idt88_basic">
<span id="j_idt88:basic_display" class="ui-inplace-display" style="display:inline">Edit Me</span>
<span id="j_idt88:basic_content" class="ui-inplace-content" style="display:none">
<input id="j_idt88:j_idt91" name="j_idt88:j_idt91" value="Edit Me" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" role="textbox" aria-disabled="false" aria-readonly="false" type="text" />
</span>
</span>
I noticed the class='ui-inplace-display' class which is on each 'component. The following jquery code selects all inplace components that can be clicked:
$('.ui-inplace-display')
I tried this in the FireFox developer console resulting in the following output:
Object { length: 5, prevObject: Object, context: HTMLDocument → inplace.xhtml, selector: ".ui-inplace-display", 5 more… }
I know you can enable the editing by clicking on an item and so I had to find a way to click on each one. Fortunately, you can give each of them a click by just appending .click() to the selector. It will be applied to each of the components:
$('.ui-inplace-display').click()
And like mentioned, you do not need any jsf button for this, just a plain html one to execute the javascript in an onlclick:
<input onclick="$('.ui-inplace-display').click()" value="Click to edit" type="button">
works perfectly.
As you can see, it pays to learn the basics of webdevelopment before diving into using more complex frameworks since no framework ever solves all of your problems and from time to time (more often then you think), you do need a little low-level javascript
I am new to liferay development.
I have done good work to display the liferay grid by using liferay search container.
But now the requirement is that some of the fields in the grid should have provision to be modified by user.
Is it possible through liferay search container or do I need to follow any other approach to achieve editable liferay grid?
You can use <liferay-ui:search-container-column-jsp tag or directly use <aui-input /> inside the <liferay-ui:search-container-column-text tag.
Example (I have included code comments with the code sample for your understanding):
<liferay-ui:search-container
emptyResultsMessage="no-assets-selected"
iteratorURL="<%= configurationRenderURL %>"
total="<%= assetEntries.size() %>"
>
<liferay-ui:search-container-results
results="<%= assetEntries.subList(searchContainer.getStart(), searchContainer.getResultEnd()) %>"
/>
<liferay-ui:search-container-row
className="com.liferay.portlet.asset.model.AssetEntry"
escapedModel="<%= true %>"
keyProperty="entryId"
modelVar="assetEntry"
>
<aui:form action="doesThisWork?">
<%-- this is the normal way --%>
<liferay-ui:search-container-column-text
name="type"
value="<%= assetRendererFactory.getTypeName(locale, false) %>"
/>
<liferay-ui:search-container-column-date
name="modified-date"
value="<%= assetEntry.getModifiedDate() %>"
/>
<%--
this is the JSP way
You can include anything in the JSP like <input /> fields, textarea, select drop-down etc.
--%>
<liferay-ui:search-container-column-jsp
align="right"
path="/html/portlet/asset_publisher/asset_selection_action.jsp"
/>
<%--
Here is including <input /> field inside the column text field.
Notice I am not using the "value" attribute of this tag, instead I am
writing HTML inside the body of this tag.
--%>
<liferay-ui:search-container-column-text
name="type"
>
<aui:input type="text" name="enterSomething" value="I can enter input here" />
<aui:input type="text" name="enterSomething" value="<%=assetEntry.getTitle %>" />
<aui:input type="hidden" name="enterSomething" value="this is a hidden field of the form" />
</liferay-ui:search-container-column-text>
</aui:form>
</liferay-ui:search-container-row>
<liferay-ui:search-iterator paginate="<%= total > SearchContainer.DEFAULT_DELTA %>" />
</liferay-ui:search-container>
In the above example, there would be a <form> for each row, so you can have a submit button at the end of each row to submit the data for that row.
But you can do it in other ways as well:
You can write the <form> outside the Search-container tag so that you just have one form and can submit all the row data togather
Or else you can have a <form> somewhere down the page and through javascript populate the value in the form and then submit.
Or else you can use ajax and other stuff to accomplish this. Or a combination of several approaches.
I leave this upto you to figure out.
Disclaimer: I have not test this code. But as per my understanding this should work. :-)
I have a template in which I can add a CSS error class to a div when the validation of a component has failed and it renders a pretty nice effect on the browser.
Now, I don't need to add a css class to a component (this won't help me), but rather I need to change the css of the html that surrounds it, this is pretty simple with jQuery, however I can't seem to find a javascript callback for failed validation, is this possible? I'm also using primefaces (in case they provide such capabilities).
Markup:
<div class="control-group ERROR_CLASS_GOES_HERE_IF_VALIDATION_FAILED">
<label class="control-label">Input value:</label>
<div class="controls">
<h:inputText class=" inputbox" type="text" required="true" /> <!--Component that can fail -->
</div>
</div>
if the input text is empty, I need the div that wraps the "control group" to have an extra class. I can turn it into a <h:panelGroup> so it is a JSF component but still I wouldn't know how to do it. Javascript seems easier as I can do a:
jQuery("#ID_OF_DIV").addClass("error_class")
Just let JSF/EL conditionally print the class based on FacesContext#isValidationFailed().
<div class="control-group #{facesContext.validationFailed ? 'error_class' : ''}">
You only need to ensure that this element is covered by ajax update/render.
Another way would be hooking on the oncomplete event of an arbitrary PrimeFaces ajax based component. There's an args object available in the scope which in turn has a validationFailed property. E.g. <p:commandButton oncomplete> or even <p:ajaxStatus oncomplete>.
<p:ajaxStatus ... oncomplete="if (args && args.validationFailed) $('#ID_OF_DIV').addClass('error_class')">
If you want to do everything on the client side.
<h:outputText class="samplecls" rendered="#{facesContext.validationFailed}"
value="Please enter all the required fields">
</h:outputText>
<div class="control-group ERROR_CLASS_GOES_HERE_IF_VALIDATION_FAILED">
<label class="control-label">Input value:</label>
<div class="controls">
<h:inputText class=" inputbox" type="text" required="true" /> <!--Component that can fail -->
</div>
</div>
Javascript/Jquery
This class will exist in DOM only validation fails by rendered="#{facesContext.validationFailed}"
$(window).load(function(){
if($('.samplecls').length>0){
$("#ID_OF_DIV").addClass("error_class");
}
});