I have a selectbox with three options. When a user selects one of the three options, I want a specific div to appear below it. I am trying to write the code that dictates which specific box is to appear when each of the three options is selected. So far, I have only worked on the code that pertains to the first option. However, whenever the user selects any of the three options from the selectbox, the function for the first option is triggered and the div is displayed.
My question is two part:
1) How do I write a conditional function that specifically targets the selected option
2) What is the best way to accomplish what I have described above; How do I efficiently go about defining three different functions for three different options in a select box?
Here is the function I was working on for the first option:
$(document).ready(function(){
var subTableDiv = $("div.subTableDiv");
var subTableDiv1 = $("div.subTableDiv1");
var subTableDiv2 = $("div.subTableDiv2");
subTableDiv.hide();
subTableDiv1.hide();
subTableDiv2.hide();
var selectmenu=document.getElementById("customfields-s-18-s");
selectmenu.onchange=function(){ //run some code when "onchange" event fires
var chosenoption=this.options[this.selectedIndex].value //this refers to "selectmenu"
if (chosenoption.value ="Co-Op"){
subTableDiv1.slideDown("medium");
}
}
});
Html:
<tr>
<div>
<select name="customfields-s-18-s" class="dropdown" id="customfields-s-18-s" >
<option value="Condominium"> Condominium</option>
<option value="Co-Op"> Co-Op</option>
<option value="Condop"> Condop</option>
</select>
</div>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Condominium" class="subTableDiv">Hi There! This is the first Box</div>
</td>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Co-Op" class="subTableDiv1">Hi There! This is the Second Box</div>
</td>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Condop" class="subTableDiv2">Hi There! This is the Third Box.</div>
</td>
</tr>
You can use selectmenu.value (or $(selectmenu).val()) to get the value of the selected option, and you can match the functions to the values using an object. Example:
$(function() {
var call_table = {
'Condominium': function() {alert('One!');},
'Co-Op': function() {alert('Two!');},
'Condop': function() {alert('Three!');}
};
$('#customfields-s-18-s').change(function() {
call_table[this.value]();
});
});
Of course, you don't have to define the functions inline. I just did it for concision here. You could define them anywhere and reference them by name instead.
I think you can get this using the position of the item in the list and the table, as long as those relative positions are the same. Change the class on the DIVs so they are all subTableDiv.
$(function() {
$('#customfields-s-18-s').change( function() {
var selected = $(this).find('option:selected');
var position = $(this).find('option').index(selected);
// hide all then show the nth one
$('.subTableDiv').hide().eq(position).show();
});
});
It looks like the select option values are the same as the IDs for the divs. You could use that to define a function that basically shows the div that has the same id as the value of the selected option. Also change the class on each div to subtableDiv.
$("#customfields-s-18-s").change(function() {
// hide all divs
$('.subtableDiv').hide();
// show matching div
var value = $(this).val();
$('#' + value).show();
}
Related
[Not exactly the same as the question "how to disable knockout click...". My question involves specific usage of an HTML table and contains valuable approaches on solving such case.]
I have the following table and button below it:
<table>
<tbody data-bind="foreach: my-array">
<tr data-bind="click: $ShowDetails()">
...
<button>Add New Record</button>
The table rows are clickable (and would load some details data in another table).
On click of the button I need to disable all table rows and add one new <tr> on top.
I know how to add the new record on top:
$('<tr><td contenteditable="true">New Record Here</td></tr>').prependTo('table > tbody');
But how to disable all rows of the table so they won't be clickable and look disabled (grayed out)?
Just add disabled class to your <tr>'s using $("tr").addClass("disabled").
The grayed out backgroung can be added by using $('tr').css('background-color','grey') or by describing .disabled class in your css-file:
tr.disabled {
background-color: grey;
}
Then in your ShowDetails() method just check if calling element has the .disabled class by using $(this).hasClass("disabled") method. Show details if it doesn't and do nothing if it does.
Instead of checking the disabled class you can also add a new bool observable named AddMode() and set it to true on Add New button click, and on ShowDetails() put a first line if(AddMode() === true) return; (by #st_stefanov)
I used this CSS code to disable HTML row
.row-disabled {
background-color: rgba(236, 240, 241, 0.5);
pointer-events: none;
width: 100%;
}
$(function (){
var myDisableBtn = $('#btn');
myDisableBtn.on('click',function (){
$('tr').css({'pointer-events':'none',
'background-color':'grey'});
});
});
$(document).ready(function () {
$('#btn').click(function () {
$('#test_table tr').prop('disabled', 'disabled').css('background-color', 'grey');
$('#test_table tbody').prepend('<tr><td contenteditable="true">New Record Here</td></tr>')
});
});
<input type="button" id="btn" value="Add New Record"/>
<table style="width:100%" id="test_table">
<tbody>
<tr>
<td>Jill</td>
</tr>
<tr>
<td>Eve</td>
</tr>
</tbody>
</table>
I have a table where I have multiple values in cells and columns. When the user clicks anywhere on a TD cell I want it to:
become a textarea
paste the current text into the textarea
put a cancel button under it
once the cancel button is pressed, I want everything to change back as it was before
ability to do it again and again from Point #1
Here is my attempt:
HTML:
<table style="border: 1px solid black;text-align: center;" id="tb">
<tr style="border: 1px solid black;">
<td style="border: 1px solid black;width:200px;height:100px;">
<div class="id1">TEST1</div>
</td>
<td style="border: 1px solid black;width:200px;height:100px;">
<div class="id2">TEST2</div></td>
<td style="border: 1px solid black;width:200px;height:100px;">
<div class="id3">TEST3</div></td>
</tr>
</table>
jQuery:
var t = '';
var prevHtml = '';
var thisElement = '';
$(document).on('click', '#tb td', function()
{ prevHtml = $(this).html();
thisElement = this;
if ($(this).attr('data-status') == 'active'){return;};
$(this).attr('data-status', 'active');
t = $(this).text();
$(this).html('<div class="row custom-status-main"><div class="col-md-12"><textarea maxlength="2000" rows="3" class="form-control" style="font-size: 12px;width: 80%;resize:vertical;">'+t+'</textarea></div></div><div class="row" style="margin-top:5px;"<div class="col-md-6"><button class="btn btn-xs btn-grey cancel-btn">Cancel</button></div></div>');
});
$(document).on('click', '.cancel-btn', function()
{
$(thisElement).html(prevHtml);
$(thisElement).removeAttr('data-custom-status');
});
This is my fiddle: https://jsfiddle.net/vsauhkfk/1/
My attempt is working for Point #4 but then it seems like nothing happens when clicking on the TD. What am I missing here?
You were almost there. You had 1 typo and 1 thing missing in your Cancel function that was causing you problems.
You had:
$(thisElement).removeAttr('data-custom-status');
It should be:
$(thisElement).removeAttr('data-status');
You were adding the 'data-status' attribute to the element but never removing it.
Also you need to add the stopPropagation() call in your cancel method. Otherwise your click on the cancel button will run your cancel method but the click event will propagate up the DOM to the TD element again and re-trigger your td click.
Here's the code for your cancel function:
$(document).on('click', '.cancel-btn', function(e)
{
$(thisElement).html(prevHtml);
$(thisElement).removeAttr('data-status');
e.stopPropagation();
});
See the working fiddle here: https://jsfiddle.net/vsauhkfk/2/
I have multiple divs of class .item.
On click at the Classfilter-submit button all .item-elements, which have also at least one class stored in the dateClasses-Array (e.g. ['28.09.2015', '29.09.2015']), should get hidden.
To recap the elements with the green border should get hidden, when the users clicks on the button.
Important: The dateClasses-array values may change dynamically. And I have to check against an array.
$(document).ready(function() {
classFilter();
});
function classFilter() {
$('#filter').click(function(e) {
e.preventDefault();
var dateClasses = ['28.09.2015', '29.09.2015']; //Hide the item-div if one these classes is applied
$('.item').filter(function() {
$(this).hasClasses(dateClasses)
}).addClass('hide-event');
});
}
$.fn.extend({
hasClasses: function(selectors) {
var self = this;
for (var i in selectors) {
console.log($(self).hasClass(selectors[i]));
if ($(self).hasClass(selectors[i])) {
return true;
}
}
return false;
}
});
.hide-event {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item 28.09.2015" style="border: 10px solid green">
Hide this if class is in array</div>
<div class="item 29.09.2015" style="border: 10px solid green">
Hide this if class is in array</div>
<div class="item 30.09.2015" style="border: 10px solid blue">
Hide this if class is in array</div>
<input type="submit" name="filter" value="Classfilter" id="filter">
NOTE: You can't use dot in a classname and should parse those names to use another character like - or _ before they get put into the dom
You are not returning anything inside filter()
To fix the filter :
$('.item').filter(function() {
return $(this).hasClasses(dateClasses);
}).addClass('hide-event');
There are likely simpler approaches to achieve what you want but this is the root problem of the code shown without rewriting your plugin
One very simple approach would be:
$('.item').filter('.' + dateClasses.join(',.')).addClass('hide-event');
Demo with valid class names
I currently have a button that when I press it a table appears below it. My first question that I can't figure out is that I cannot get a border although I specified border="10". I am using firefox. Next I cannot figure out how to when I am done with my table to be able to press the button and have the table be hidden. My third question is that this table is being written as a test to see the state of my variables and parameters in my jsp are what I think they are. In my third cell of my table where I have just docs I want the the current value on the page of getDocs(). If I put it in the getDocs() then it gives me the result on page load which would be null. But in my showDiv() method when I run my debugger it shows the correct value of getDocs in the var docs = getDocs();. How do I get the docs value in docs.
window.onload = function()
{
document.getElementById("button").onclick = showDiv;
}
function showDiv()
{
document.getElementById("hidden").style.display = "block";
var docs = getDocs();
}
<input type="button" id="button" value="Click to show states" onclick="showDiv()"/>
<div id="hidden" style="display:none">
<table border="10" style="width:300px">
<tr>
<td>Type</td>
<td>Object</td>
<td>value</td>
</tr>
</br>
<tr>
<td>Element 1</td>
<td><%=docs%></td>
<td>docs</td>
</tr>
</table>
</div>
For the border issue, what happens if you put the border definition in the style declaration:
<table style="width:300px;border:1px solid black;">
For showing / hiding, a simple toggler can be put into the showDiv() call. Try:
function showDiv() {
if (document.getElementById('hidden').style.display == 'block') {
document.getElementById('hidden').style.display = 'none';
}
else {
document.getElementById('hidden').style.display = 'block';
}
}
Need more code examples and explanation to work on the Docs issue.
1) border is a css style attribute, so apply it in the css file.
#foo (yourid)
{
border: 10px;
}
2) you will have to create the button and create a onClick() function (JavaScript). This function will retrieve the table (possible by id) then change the display to none
var table = document.getElementById("foo);
table.style.display = none;
3) Not to sure about this one.
I'm not sure I will answer to each question here, but here you go anyway : http://jsfiddle.net/bbtVH/8/
You just need this javascript, since you use the HTML attribute onclick on your button, no need to add a listener in window.onload :
function showDiv() {
var table = document.getElementById("hidden");
if (table.style.display !== "block"){
table.style.display = "block";
// Just get docs from JSP, if you want to get its value :
// var docs = <%=docs%>;
}
else {
table.style.display = "none";
}
}
This CSS will give you borders of 2px around your cells :
td{
border: 2px solid black;
}
for your border :
<table border="10" style="width:300px border: 5px solid red; display:none">
to hide the table :
$("#hidden").fadeOut("slow");
or to see it :
$("#hidden").fadeIn("slow");
the get the values from docs:
docs.val()
I have DIV and inside div it has table. I want to change the one of the column value of table using java script. I can do it by getting the element id of column, but there is no any id assigned to any table's column. Below is the example.
<div id="usersec">
<TABLE style="TEXT-ALIGN: center; WIDTH: 279px; HEIGHT: 70px">
<TBODY>
<TR>
<TD style="FONT-FAMILY: Verdana" vAlign=center align=middle>Talk to me </TD></TR></TBODY></TABLE>
</div>
Is it possible to change the "Talk to me" text using javascript?
If your userbase is IE8+, you can safely use querySelector:
var container = document.getElementById('usersec');
var td = container.querySelector('tr:first-child > td');
if(td){
td.innerHTML = "New Text!";
}
Here's a JSFIDDLE: http://jsfiddle.net/rgthree/YkhwE/
querySelector (or querySelectorAll) allow you to target elements in the DOM via CSS syntax, which is very useful. It's very well supported, in every current and previous browser. (via Can I Use)
Yes, you need to get the element and then set a new value to element.innerHTML. It's easiest if you give an id to the element that you want to change but you don't need to
jsFiddle
<script type="text/javascript">
var usersec = document.getElementById('usersec');
var td = usersec.getElementsByTagName('td')[0];
td.innerHTML = 'New value';
</script>
You can assign an id to the TD, and use that;
<div id="usersec">
<TABLE style="TEXT-ALIGN: center; WIDTH: 279px; HEIGHT: 70px">
<TBODY>
<TR>
<TD style="FONT-FAMILY: Verdana" vAlign=center align=middle id="cellToChange">Talk to me</TD>
</TR></TBODY></TABLE>
</div>
<script type="text/javascript">
document.getElementById("cellToChange").innerText = "Go on, talk to me please!";
</script>