Hi I want to show and hide div using alloy ui onclick function of radio button.I mentioned my code as below.please help me to solve this problem.when i clicked on married i want to open one div it has anniversary date and when I click on single it will hide that div.
<aui:field-wrapper name="maritial_status">
<aui:input checked="<%= true %>" inlineLabel="right" name="maritial_status" type="radio" value="single" label="single" onClick="javascript:unMarriedStatus();" />
<aui:input inlineLabel="right" name="maritial_status" type="radio" value="married" label="married" onClick="javascript:marriedStatus();" />
</aui:field-wrapper>
You can solve this issue by having the function and the div class
so based on the selection call the function which will implicitly create the structure form in div method
function design:
function temp()
{
var chasisno = "";
$('#dyanamicDivElement').append(chasisno);
}
div structure:
Explanation:
so as per here the function will keep appending the value to the div
hope this solved the issue
You could try this way:
<aui:field-wrapper name="maritial_status">
<aui:input checked="<%= true %>" inlineLabel="right" name="maritial_status" type="radio" value="single" label="single" onClick="document.getElementById('DIV-ID').style.display = this.checked ? 'none' : 'block';" />
<aui:input inlineLabel="right" name="maritial_status" type="radio" value="married" label="married" onClick="document.getElementById('DIV-ID').style.display = this.checked ? 'block' : 'none';" />
</aui:field-wrapper>
Related
I have an html form where you can select multiple days in the form of a button (in the code, these buttons are the one with the ID days). Then, i have a confirm button with the ID book, which should be enabled only if at least one of the days button is selected. How can I check this condition considering i have the variable in another div?
Here is the code:
<ion-card-content>
<ion-label style="display: block;" class="datepicker_middleTitle"><h3>Pick days</h3></ion-label>
<div class="datepicker_generalDaysContainer" >
<div class="datepicker_daysOfWeekContainer">
<div *ngFor="let day of componentData.days" class="datepicker_singleDayWeek">
<p>{{day.letter}}</p>
</div>
</div>
<div class="datepicker_buttonDaysContainer active">
<ion-button id="days" style="font-weight: bold;" *ngFor="let day of componentData.days" [class]="day.selected ? 'active' : day.occupied ? 'disabled' : ''" (click)="selectDay(day.number, day.occupied)">{{day.number}}</ion-button>
</div>
</div>
<ion-button id="book" expand="block" class="btn-big" [disabled]="???" (click)="bookDesk()">BOOK DESK</ion-button>
On your days buttons you have (click)="selectDay(day.number, day.occupied)">{{day.number}}
So using same method you could store the selected days somewhere, like an array for example.
this.selectedDays = [];
selectDay(number: any, occupied: any) {
this.selectedDays.push(number);
}
I don't see all of your code so be prepared to go add type checkings and refactor where necessary.
We could then check, if we have any dates selected to endable or disable the book buttons.
<ion-button id="book" expand="block" class="btn-big" [disabled]="selectedDays.length == 0" (click)="bookDesk()">BOOK DESK</ion-button>
How to call the controller from the radio button click ?
<div id="radio">
<input type="radio" id="Isactive" name="Isactive" value="1" />Yes</label>
<input type="radio" id="Isactive" name="Isactive" value="0" />No</label>
</div>
public ActionResult Index(CityList Obj,string Isactive)
{
return view();
}
You can use javascript to programatically submit a form. You should not have duplicate Id values for elements. Id's should be unique in a document.
#using (Html.BeginForm("Index", "Home"))
{
<!-- Your other form elements-->
<div id="radio">
<input type="radio" name="Isactive" value="Yes" />Yes
<input type="radio" name="Isactive" value="No" />No
</div>
}
Now you can listen to the change event on the radio button and use jQuery closest method to get the form and call the submit method.
$(document).ready(function () {
$("input[name='Isactive']").change(function () {
$(this).closest("form").submit();
});
});
Now when user make a selection on the radio button, the form will be submitted and the selected radio button's value attribute value will be available in your Isactive parameter of your HttpPost index action method.
If you want to pass 1 and 0, use a numeric type as the method parameter type instead of string.
I have fields in an aui form that I only want to be required when a corresponding checkbox is selected, otherwise they're not required. I'll enable these input fields using <aui:script> once the check box is enabled and only then aui validation should work.
I have tried with hiding the <aui:validator> depending condition in script.
How do I enable the validation only if my check box is selected in aui?
<aui:form action="" method="post">
<aui:input type="checkbox" name="employeeId" id="employeeId"></aui:input>
<div id="employeeDetails">
<aui:input type="text" name="name" id="employeeId2">
<%
if (true) { //default i kept true how to check this condition on check box basic
%>
<aui:validator name="required"' />
<%
}
%>
</aui:input>
<aui:input type="text" name="email" id="employeeId3">
<%
if (true) {
%>
<aui:validator name="required" />
<%
}
%>
</aui:input>
</div>
<aui:button-row>
<aui:button type="submit" />
</aui:button-row>
</aui:form>
<aui:script>
AUI().use('event', 'node', function(A) {
A.one('#employeeDetails').hide(); // to hide div by default
var buttonObject = A.all('input[type=checkbox]');
buttonObject.on('click', function(event) {
if (A.one("#<portlet:namespace/>employeeId").attr('checked')) {
A.one('#employeeDetails').show(); //for checked condition
} else {
A.one('#employeeDetails').hide(); // for non checked condition
}
});
});
</aui:script>
Reference images:
Before enabling the check box
[]
Check box enabled:
[]
This sample if(true) bothers me - it's evaluated server side on the JSP and won't have any effect, since true is always true.
However, your question is well documented within Liferay's documentation: Look for "Conditionally Requiring A Field"
Sometimes you’ll want to validate a field based on the value of
another field. You can do this by checking for that condition in a
JavaScript function within the required validator’s body.
Below is an example configuration:
<aui:input label="My Checkbox" name="myCheckbox" type="checkbox" />
<aui:input label="My Text Input" name="myTextInput" type="text">
<aui:validator name="required">
function() {
return AUI.$('#<portlet:namespace />myCheckbox').prop('checked');
}
</aui:validator>
</aui:input>
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 would like to change text on button using jquery mobile. It works if I change data-role to none, but then I lose formatting.
<fieldset class="ui-grid-a" data-inline="true">
<div class="ui-block-a"><button class="cl_button1" type="submit"
data-theme="c" data-icon="home" data-iconpos="top">Click Me</button>
</div>
</fieldset>
$('.cl_button1').val('some text');
Another posting suggested this, but it did not work.
$("cl_button1 .ui-btn-text").text("some text");
Using Firebug I found that the HTML markup created by jQuery Mobile is the following:
<fieldset data-inline="true" class="ui-grid-a">
<div class="ui-block-a">
<div data-theme="c" class="ui-btn ui-btn-icon-top ui-btn-corner-all ui-shadow ui-btn-up-c" aria-disabled="false">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">some text</span>
<span class="ui-icon ui-icon-home ui-icon-shadow"></span>
</span>
<input type="hidden" value="">
<input type="hidden" value="">
<input type="hidden" value="">
<button data-iconpos="top" data-icon="home" data-theme="c" type="submit" class="cl_button1 ui-btn-hidden" aria-disabled="false">Click Me</button>
</div>
</div>
</fieldset>
You can see that the ui-btn-hidden class has been added to the origional <button> element and the display of the button is actually rendered through the use of the <span> tags above the <button> tag.
So to change the text for this jQuery Mobile rendered element you would use a selector like this:
$('.cl_button1').siblings('.ui-btn-inner').children('.ui-btn-text').text("some text");
Or if you wanted to change the button's text on click you can do this:
$('.cl_button1').bind('click', function () {
$(this).siblings('.ui-btn-inner').children('.ui-btn-text').text("some text");
});
Here is a jsfiddle for demonstration: http://jsfiddle.net/SfySk/1/
All,
The above solutions do not seem to work with JQM 1.1.1. A very simple way of doing this is to call.
$('.cl_button1').text('some text').button('refresh');
As per http://jquerymobile.com/test/docs/buttons/buttons-methods.html, there are only three methods you can call on a button. This should keep the internal state of your button consistent with the JQM UI adornment, and be more robust against changes to the way buttons are made 'pretty' in the future.
in jqm version 1.4.5, after initialization
$('#btn_input').parent().contents().filter(function(){
return this.nodeType === 3;
}).replaceWith('New Text');
It works without destroying binded events.
When you said this didn't work:
$("cl_button1 .ui-btn-text").text("some text");
You forgot the . before cl_button to indicate that you are trying to select a class
I don't see .ui-btn-text anywhere being used as a class
I got your code to work using this:
$('.cl_button1').text('some text');
Test Here: http://jsfiddle.net/S9asF/
A better solution is to refresh the page:
$(currentPage).trigger('create');
$(currentPage).page();
$('#buttonx').children('.ui-btn-inner').children('.ui-btn-text').text("Some Text");