I currently have a jsp where in m html section I have the following
<select>
<%if(size == 1)%>
<option>None selected</option>
<%if(size > 1)%>
<option>1</option>
</select>
I also have the following image.
<td style="text-align:left">
<label id="checked" style="color:grey; display:none">
<img src="images/check.png" width="20px" height="20px"/>
Checked
</label>
</td>
My question is that how do I get my image to appear only if the option none is selcted. If 1 is selected then I do not want the image to appear. How would I do this?
I think, this will give you solution for your problem, i have used JQUERY here.
$("#selectID or .selectClass").change(function () { //just use id or class name for select element
var option=$(this).val();
if(option=="None selected")
{
$("#checked").css("display","block");
}
else
{
$("#checked").css("display","none");
}
});
Related
I'm using html. I have to display a set of questions in a form when an option is selected from a drop down.
I already have a working script. Wen I duplicated it and edited it for my requirements its not working.
var selVal = ele.options[ele.selectedIndex].value;
for example given below is the list from the dropdown. When option 1 is selected it should display a set of questions and when option 2 is selected it should display a diff set of questions.
<div id='q1'>
<b> Where is the caller from ? </b>
<select id="category" onChange="selDivision(this)">
<option value="1">Store</option>
<option value="2" >Office</option>
</select>
<br />
<br />
All the form contents are displayed instead of my requirements.
First should display only the dropdown,once selected an option the question set has to be display below.
I using simple js scripts for use as backend.
Requiring further assistance on this.
part of code that is for the hide and display function
$(document).ready(function(){
//init();
//$("#q1b").hide();
$("#1q").hide();
$("#2q").hide();
$("#3q").hide();
$("#4q").hide();
$("#5q").hide();
$("#6q").hide();
$("#7q").hide();
$("#8q").hide();
$("#9q").hide();
$("#10q").hide();
$("#1a").hide();$("#1b").hide();$("#1c").hide();$("#1d").hide();$("#1e").hide();$("#1f").hide();$("#1g").hide();
$("#2a").hide();$("#2b").hide();$("#2c").hide();$("#2d").hide();$("#2e").hide();$("#2f").hide();$("#2g").hide();
setDisabled('q1',false);
setDisabled('1q',false);
setDisabled('2q',false);
setDisabled('3q',false);
setDisabled('4q',false);
setDisabled('5q',false);
setDisabled('6q',false);
setDisabled('7q',false);
setDisabled('8q',false);
setDisabled('9q',false);
setDisabled('10q',false);
clear_form_elements(document.getElementById('test'));
});
function selDivision(ele)
{
var selVal = ele.options[ele.selectedIndex].value;
if(selVal == "1")
{
$('#1q').show(); setDisabled('q1',true);
$("#1a").show();$("#1b").show();$("#1c").show();$("#1d").show();$("#1e").show();$("#1f").show();$("#1g").show();
}
if(selVal == "2" )
{
$('#2q').show(); setDisabled('q1',true);
$("#2a").show();$("#2b").show();$("#2c").show();$("#2d").show();$("#2e").show();$("#2f").show();$("#2g").show();$("#2h").show();$("#2i").show();
}
Val=selVal;
}
</script>
</head>
q1 q2 are the questions fro drop down
The other variables are the questions under the option.
Try like this
<div id='questions' style="display:none">
<div id='q1' style="display:none">
<b> Question 1? </b>
<b> a. ans1</b>
<b> b. ans2</b>
<b> c. ans3</b>
</div>
<div id='q2' style="display:none">
<b> Question 2 ? </b>
<b> a. ans1</b>
<b> b. ans2</b>
<b> c. ans3</b>
</div>
</div>
<select id="category">
<option value="0">-select-</option>
<option value="1">Store</option>
<option value="2" >Office</option>
</select>
<br />
<script>
$('#category').on("change",function() {
//Hide all Questions in first time
$('#questions div').hide();
//get selected value
var id=$('#category').val();
//display
$('#questions').show();
$('#q'+id).show();
});
</script>
Here working example http://jsfiddle.net/d1udL1cr/
I have this code :
{foreach from=$aProfiles item=aModules}
{foreach from=$aModules key=sPrivacy item=aProfile}
<div class="table">
<div class="table_left">{$aProfile.phrase}</div>
<div class="table_right">contents ...........</div>
</div>
{/foreach}
{/foreach}
This will generate many divs for div class="table" that content div class="table_left" and
div class="table_right" .....
What I want is :
div class="table_right" to be hidden (disply:none) ,
click on div class="table" will show it . Then if click on another div class="table" will hide the opening div and show class="table_right" were clicked .
i succes to do this but was showing the first one of all the divs group .
to understand what i mean exactly please see the facebook account sitings , wen click on name show the
name informations then if click on username hide name's informations and show username informations .
Sorry if my english is poor.
Thank you very much.
Use Jquery to get it ...
Create a .hidden class with style display: none;
then use jquery click function to add remove class ..
in loop add hidden class with table_right
.hidden{
display: none;
}
<script>
$(function(){
$(".table").click(function(){
$('.table_right').addClass('hidden');
$(this).children('.table_right').removeClass('hidden');
});
});
</script>
and the forech like below ...
{foreach from=$aProfiles item=aModules}
{foreach from=$aModules key=sPrivacy item=aProfile}
<div class="table">
<div class="table_left">{$aProfile.phrase}</div>
<div class="table_right hidden">contents ...........</div>
</div>
{/foreach}
{/foreach}
So I am creating 2 drop down menus, the 2nd of which dynamically changes based off the first. However, the 2nd menu does not render the change, but is providing the correct options when viewing the Post with Firebug.
Here is the function that is supposed to render the menu
def findSubtagsForTags(){
print Tag.getAll()
def tag = Tag.get(params.tag.id)
render(template: 'subtagSelection', model: [subtags: tag.subtags])
}
This method is being called in my _form.gsp template, which is called by create.gsp (both generated by grails scaffolding for the most part). Here is my code snippet where I am calling it
<g:select name="tag.id" from="${Tag.list()}" optionKey="id" optionValue="tagName"
noSelection="['':'Choose Tag']"
onchange="${remoteFunction (
controller: 'tag',
action: 'findSubtagsForTags',
params: '\'tag.id=\' + this.value',
update: 'subtagSelection'
)}" />
<td id="subtagSelection" valign="top">
<select>
<option>Choose Tag</option>
<g:select name="subtags.id" id="subtags.id" from="${[]}" optionKey="id"/>
</select>
</td>
and the subtagSelection template that is being rendered is
<g:select name="subtag.id" from="${subtags}" optionValue="name" optionKey="id" id = "subtags.id"/>
The 2nd menu on the page is always "CHoose Tag", but using Firebug, when I look at the post, this is generated
<select name="subtag.id" id="subtags.id" >
<option value="1" >Training</option>
<option value="2" >Software</option>
</select>
however, there is no change to the 2nd menu.
Under the Net Tab of firebug, This is the 'put' request called by my function
Post:
Parameters : tag.id 1
Source:
tag.id=1
Response:
<select name="subtagSelection" id="subtagSelection" >
<option value="1" >Training</option>
<option value="2" >Software</option>
</select>
Any ideas/solutions?
EDIT: Issue was resolved after changing my code around a little, using https://stackoverflow.com/a/3771240/3691484 as a reference, changing the template file among other things
Try a few modifications - see if makes any difference:
<g:select name="tag.id" from="${Tag.list()}" optionKey="id" optionValue="tagName"
noSelection="['':'Choose Tag']"
onchange="${remoteFunction (
controller: 'tag',
action: 'findSubtagsForTags',
params: "'tag.id=' + this.value",
update: 'subtagSelection'
)}"
/>
<td id="subtagSelection11" valign="top">
<div id="subtagSelection">
<g:select name="subtags.id" id="subtags.id" from="[]"
optionKey="id" noSelection="['': 'Choose Tag']" />
</div>
</td>
There was a minor issue a select within a select? - use the noSelection tag for when nothing is selected
I have a problem with toggle on this list:
<div id="list">
<div id="segment"> // <--- when clicked, toggle segm_content and opener
<div id="opener">
<img src="images/open.png" /> // changes when toggled
</div>
<div id="segm_content">
// content to hide/show
</div>
</div>
<div id="segment"> // <--- when clicked, toggle segm_content and opener
<div id="opener">
<img src="images/open.png" /> // changes when toggled
</div>
<div id="segm_content">
// content to hide/show
</div>
</div>
... //and so on
</div>
I want clicked "#segment" to toggle child *"#segm_content"* and change img in "#opener".
I made it working with this code:
$('#segment').toggle(function() {
$('#opener').html('<img src="images/open.png"/>');
$('#segm_content').hide(500);
}, function() {
$('#opener').html('<img src="images/close.png"/>');
$('#segm_content').show(500);
});
But I can't figure out how to do it only for one "#segment" at a time.
This code toggles everything, which I don't want.
I am stuck at this point, any suggestions please?
Many thanks!
I really wouldn't recommend this. The point of an id is to reference a unique element. If you want to select multiple elements, you should define a class instead and have jQuery call that. Multiple ids is invalid HTML. But you could, per sé, do this by using changing your jQuery code to the following.
(Here is my jsFiddle: http://jsfiddle.net/KzVmK/)
$('[id="segment"]').toggle(
function(){
$(this).find('[id="opener"]').html('<img src="open.png" alt="Close" />');
$(this).find('[id="segm_content"]').hide(500);
},
function(){
$(this).find('[id="opener"]').html('<img src="close.png" alt="Open" />');
$(this).find('[id="segm_content"]').show(500);
}
);
Again, let me stress again that this is a bad idea, because you will not have unique id selectors in your document. This is really bad practice. There are times when you will want to select an individual element in the DOM and this will make that next to impossible. I would highly advise you to define a class for the elements (you can still define CSS classes, e.g. <div class="opener my-class" /> or <div class="segm_content my-class" />).
(Also, a helpful tip with this code: rather than populating the HTML elements with the same image that is also in the jQuery code [which is redundant], leave the <div id="opener" /> elements empty. Then, right after you define the toggle function, run the click event, like so: $('[id="$segment"]').toggle(...).click();
http://jsfiddle.net/XPXBv/).
General Theme Settings
Back-Ground Color
Text Color
<div class="Settings" id="GTSettings">
<h3 class="SettingsTitle"><a class="toggle" ><img src="${appThemePath}/images/toggle-collapse-light.gif" alt="" /></a>Content Theme Settings</h3>
<div class="options">
<table>
<tr>
<td><h4>Back-Ground Color</h4></td>
<td><input type="text" id="body-backGroundColor" class="themeselector" readonly="readonly"></td>
</tr>
<tr>
<td><h4>Text Color</h4></td>
<td><input type="text" id="body-fontColor" class="themeselector" readonly="readonly"></td>
</tr>
</table>
</div>
</div>
$(document).ready(function(){
$(".options").hide();
$(".SettingsTitle").click(function(e) {
var appThemePath = $("#appThemePath").text();
var closeMenuImg = appThemePath+'/images/toggle-collapse-light.gif';
var openMenuImg = appThemePath+'/images/toggle-collapse-dark.gif';
var elem = $(this).next('.options');
$('.options').not(elem).hide('fast');
$('.SettingsTitle').not($(this)).parent().children("h3").children("a.toggle").children("img").attr('src', closeMenuImg);
elem.toggle('fast');
var targetImg = $(this).parent().children("h3").children("a.toggle").children("img").attr('src') === closeMenuImg ? openMenuImg : closeMenuImg;
$(this).parent().children("h3").children("a.toggle").children("img").attr('src', targetImg);
});
});
I have the following HTML code:
<table><tr>
<td>Search: </td>
<td>'.GetCategoryDropdownList().'</td>
<td>for: </td>
<td class="input">
<input class="header-right-search" type="text" name="q" placeholder="Search by Book Name, Author, Module Code, or Module Name" style="width: 100%;" />
</td>
<td><input type=submit value="GO" class="yellowhighlightbutton" /></td>
</tr></table>
where "GetCategoryDropdownList()" just returns the HTML for a simple dropdown menu.
This table displays fine in all web browsers (including on android/iphone/etc), with each table cell nicely spaced, but on Blackberry the cells end up overlapping.
Do you know why this is happening or any way to fix it?
Thanks
GetCategoryDropdownList() is
function GetCategoryDropdownList()
{
$query = sprintf("SELECT %scategorylist.* FROM %scategorylist", dbprefix, dbprefix, dbprefix);
$catlist = DbQuery($query);
$catselect = '<select class="header-category-select" name="category_select">';
foreach($catlist as $cat)
{
if($cat['Code'] == 'catAll')
{
$catselect = $catselect.sprintf("<option class=\"header-category-option\" value=\"%s\" selected=\"selected\">%s</option>",$cat['Code'],$cat['Name']);
}
else
{
$catselect = $catselect.sprintf("<option class=\"header-category-option\" value=\"%s\">%s</option>",$cat['Code'],$cat['Name']);
}
}
$catselect = $catselect.'</select>';
return $catselect;
}
All it does is make a dropdown menu, which displays correctly on every platform except blackberry.
Can you give the GetCategoryDropdownList() code? Have you also set the correct headers for displaying in a mobile website? For blackberry browser you can use
<meta name=”HandheldFriendly” content=”True” />
Check it out: http://docs.blackberry.com/en/developers/deliverables/6176/HTML_ref_meta_564143_11.jsp