I have 6 selects wrap in their own div each, and I want to hide the whole div, if the select is blank.
<div>
<select>
<option></option>
<option>1</option>
</select>
</div> <--- Hide this div if blank option is chose.
Are you after something like this? This is hiding a separete div based on your selection. In your question, you are hiding the selection itself if it is blank. If you do that, how can you change your selection, once select has disappeared?
var checkTheCat = function(index) {
if( !index ) hideTheCat();
else showTheCat();
}
var hideTheCat = function() {
document.getElementById("toHide").style.display = 'none';
}
var showTheCat = function() {
document.getElementById("toHide").style.display = 'block';
}
<div id="toHide">
<img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" style="height:100px;">
</div>
Please select below:<br>
<select id="selection" onChange="checkTheCat(this.selectedIndex);">
<option>Blank option</option>
<option>The Cat</option>
<option>Another non-blank option</option>
<select>
Related
My form has a Master page, i.e., cannot use a popup Form.
I used the code below to create a popup menu associated with one of the lists, but the popup appears BELOW my list items (I can only see the last two items!) and it appears no matter which list I right click on.
Any help will be appreciated.
Here is my code (modified from a web site example):
<div id="contextMenu" class="context-menu"
style="display: none">
<ul>
<li>New</li>
<li>Edit</li>
<li>View</li>
<li><a href="#">Copy
<li>Refresh</li>
</ul>
</div>
<script type="text/javascript">
document.getElementById('# <% = lstContactsClerk.ClientID %>').oncontextmenu = rightClick;
function rightClick(clickEvent) {
clickEvent.preventDefault();
// return false;
}
</script>
<script>
document.onclick = hideMenu;
document.oncontextmenu = rightClick;
function hideMenu() {
document.getElementById("contextMenu")
.style.display = "none"
}
function rightClick(e) {
e.preventDefault();
if (document.getElementById("contextMenu")
.style.display == "block")
hideMenu();
else {
var menu = document.getElementById("contextMenu")
menu.style.display = 'block';
menu.style.left = e.pageX + "px";
menu.style.top = e.pageY + "px";
}
}
</script>
I'm very new to react JS, and I am using it to build a app now. I have a question.
In of of the Button Click event i have a code logic like this:
handlestartbutton(event) {
const accesskey = localStorage.getItem(localStorageKeys.accessTokenKey);
const decodedAccessKey = jwt_decode(accesskey);
const date = dateConverter.epochToReadableDate(decodedAccessKey.exp);
if (date.currentTime < date.expiryDate) {
this.setState({
accesstokenexpirydate: true
}, () => {
if(this.state.accesstokenexpirydate === false) {
//rest of the code
}
})
In renderer() i have a a pop up UI like this:
renderer()
{
{this.state.accesstokenexpirydate === true ? (
<Popup
open ={this.state.open}
closeOnDocumentClick={false}
closeOnEscape={false}
onClose={this.closeModal}className
>
<div className={popstyles.popupBody}>
<div className={popstyles.modalClose}>
<a className="close" onClick={this.closeModal}>
×
</a>
{""}
<div className ={popstyles.unAutherizedUser}>
<label >{homeConstantMessages.accessTokenExpire}</label>
<div className ={popstyles.unAutherizedUserMsg}>
<label>{homeConstantMessages.accessTokenExpireMsg}</label>
<button className ={styles.refreshaccessbtn} onClick = {this.navigateToHomePage.bind(this)} label = {homeConstantMessages.refreshbtn}>
</button>
</div>
</div>
</div>
</div>
</Popup>
) : (
''
)}
}
The problem is when the first time start button is clicked this pop up UI is not getting popped even though the state variable accesstokenexpirydate is set to true. when second time the button is cicked UI is popping up. can anyone please help me out here
1) I think you have to apply arrow function like follows and then you can use this
handlestartbutton=(event)=> {...}
2) I'm quite confused about the name, don't you think it should be render(...) instead of renderer()
I Have this in my controller
ViewBag.list = new SelectList(db.ListOfDB, "Value", "Text");
I need to create a Select, but without using the #Html.DropDownList I try to use this:
<select id="mylist"> ??? (selectitem) #ViewBag.list ??? </select>
How create select based from Viewbag, but not use Html.Helper
You can pass your list to the view on your model. You could then do
<select id="myList">
#foreach(var item in Model.myList)
{
<option value="#item.Value">item.Name</option>
}
</select>
#{
ViewBag.Title = "";
Layout = "~/Views/Shared/_LayoutLanding.cshtml";
List<SelectListItem> list = ViewBag.list;
}
#for(int i = 0; i < list.Count; i++)
{
<option value="#list[i].Value">#list[i].Text</option>
}
After many attempts, this one worked for me
This one in the Controller -
ViewBag.ilist = new SelectList(db.tblPersons.Where(d => d.PersonTyp == "SUPPLIER").ToList(), "slno", "PersonName");
'slno' being the Id column and 'PersonName' being the 'Data' column
Then in Razor page (Without HTML helpers)
<select id="dpdnperson" name="dpdnperson" class="dropdown btn bg-gradient-primary" style="color:white; width:100%" Font-Size="Medium">
<option>-- SELECT --</option>
#foreach (var item in ViewBag.ilist)
{
<option value="#item.Value" >#item.Text</option>
}
</select>
In my portlet I have one form where I am showing dates through following code
JSP:
<aui:input type="text" name="createdDate" size="10" value="" id="createdDate" label="" />
<div class="calendar-icon" id="imageDiv">
<span class="aui-icon aui-icon-calendar"></span>
</div>
Script in JSP
renderCalendar('#imageDiv','#<portlet:namespace/>createdDate','#calendarDiv');
function renderCalendar(imageDiv,inputDisplay,calendarDiv) {
AUI().ready('aui-calendar', function(A) {
var inputField1 = A.one(imageDiv);
var inputField2 = A.one(inputDisplay);
var calendar1 = new A.Calendar({
dates: [ new Date() ],
dateFormat: '%d/%m/%Y',
selectMultipleDates: false,
after: {
datesChange: function(event) {
var formatted = event.target.getFormattedSelectedDates();
inputField2.val(formatted);
calendar1.toggle(); // hide after a date was selected
}
}
}).render(calendarDiv);
var boundingBoxCal1 = calendar1.get('boundingBox');
boundingBoxCal1.setX(inputField1.getX());
boundingBoxCal1.setY(inputField1.getY() + 25);
calendar1.hide();
inputField1.on('click', function() { calendar1.toggle(); });
});
}
It is showing date on page but the problem is with layout Date text field and calender icon both not coming in same line.Please help me out
use <span> instead of <div>. <div> opens a new block while <span> will remain in the same line
Strange that <span> didn't fix your problem. Try floating your <div> to the left, as in,
<div class="calendar-icon" id="imageDiv" style="float: left;">
New to orchard. I'm trying to style a custom form without success. I've also been using the shape modeler.
I created a New ContentType and add Fields f1, f2, f3... I create a CustomForm. Now I want to wrap different divs around certain fields say
<div class="g1">
f1
f2
</div>
<div class="g2">
f4
f6
</div>
BTW I've tried this construct without success:
dynamic content = #Model.Content;
<div class="g1">
if(#content.ContentTypeName.f1 || #content.ContentTypeName.f2)
{ #Dispaly(...)
}
</div>
Can this be done in the content.edit.cshtml view?
If so please provide an example.
Thanks
Also, is there any way to reflect the properties of Model.Content during runtime?
What I did was create local zones in the Content_Edit alternate then rearrange the fields using placement.info
Placement.info:
<Match ContentType="MyForm">
<Place Fields_Input_Edit-FirstField="MyFirstZone:1"/>
<Place Fields_Input_Edit-SecondField="MySecondZone:1"/>
</Match>
Content.Edit-MyForm.cshtml:
<div class="edit-item">
<div class="edit-item-primary">
#if (Model.Content != null)
{
<div class="edit-item-content">
<div class="first-zone">
#Display(Model.MyFirstZone)
</div>
<div class="second-zone">
#Display(Model.MySecondZone)
</div>
</div>
}
</div>
....
</div>
Typically in Orchard, you override templates for parts and fields, not for the whole content item. Shape tracing can help you determine what template alternates you can use for each field and even generate the file with the default code for you to modify.
Also, Model.Content, if anything, will be a zone, not the content item. Depending on which template you're in, you may be able to use Model.ContentItem instead.
Finally came up with a solution, albeit quite ugly, but it works:
In my alternate associated with the Content_Edit:
#{
dynamic content = Model.Content;
}
<div class="g1">
#{
foreach (var item in content)
{
if (item.Model.GetType().Name == "BooleanField")
{
if (f.Name == "f1" || f.Name == "f2")
{
#Display(item);
}
}
}
}
</div>
<div class="g2">
#{
foreach (var item in content)
{
if (item.Model.GetType().Name == "BooleanField")
{
if (f.Name == "f4" || f.Name == "f6")
{
#Display(item);
}
}
}
}
</div>