I have a default page which loads different controls on pageload according to the querystring.
I have a control which creates checkbox list (inside div_A) on load and get checkbox checked through database, then i click Continue, div_A get invisible with all the checked checkbox id in hidden field and div_B is visible true.
On Go Back click, div_B is visible false and div_A get visible true and following javascript is fired to check the selected checkbox, but it does not work
Javascript :
function goBack()
{
var SIds = document.getElementById("<%=hdv_Data.ClientID %>").value; // hdv_Data is the hidden field
var Ids_Arr = new Array();
Ids_Arr = SIds.split(',');
for (j = 0; j < Ids_Arr.length; j++)
{
if(Ids_Arr[j] != 0)
{
alert(Ids_Arr[j]); // works till here, gets correct values in array
var chk = document.getElementById(Ids_Arr[j]);
alert(chk);
chk.checked = true;
}
}
}
I wish it may help you im using this to hide and show some fields in a jsp, you may arrange it to fit your need.
- javascript
function showArea(){
var checkbox = document.getElementById('codcheckbox');
if(checkbox.value==true){
var element = document.getElementById( 'dataFields' );
if (element && element.style.display=='none'){
element.style.display='block';
}else{
element.style.display='none';
}
}
};
jsp form content...
<tbody id="dataFields" style="display: none">
<OTHER STUFF>
</tbody>
Related
I have the following JavaScript code:
var radios = form.elements["option_filter"];
for (var i = 0, max = radios.length; i < max; i++) {
if (typeof (radios[i].value) !== 'undefined') {
radios[i].onclick = function () {
var l = this.nextElementSibling.innerText;
<code to create a path containing selection>
window.location.replace(dest);
}
}
}
which works fine, except that when a radio is clicked, the selection is considered checked in code, but that is not reflected in the UI ... the radio button remains blank as the redirect is processed.
I tried having it sleep a bit between the onclick firing and the redirect, to no avail.
How do I get the UI to reflect the selection change so that the user sees it selected while waiting for the new page to load?
To get the UI to reflect... you'll need to set the value of the target radio button to a value...
radio[i].value = "whatever"
Also remember that the value set must match the name of one of the radio buttons in your options...
When I change the option of a dropdown menu, I want all the checkboxes to be unchecked. Here's the code that I put inside a function that's called when the dropdown menu changes:
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == "checkbox") {
inputs[i].checked = false;
}
}
This does indeed uncheck the checkbox. However, to recheck the checkbox, it takes two clicks. It appears that dat.gui still thinks the checkbox is checked, so it takes one click to uncheck it, and one more to check it.
How do I make dat.gui update the checkboxes?
Edit: Here's the current state of the problem.
gui = new dat.GUI;
controllers = [];
var menu = {
'This is an example': false,
}
controllers[0] = gui.add(menu, 'This is an example').onFinishChange(
function(value) {console.log('example');} ).listen();
menu['This is an example'] = false;
With this code, the checkbox is unchecked, due to the .listen() call and setting the variable to false. However, it still takes two clicks for the check to show--one to "uncheck" the checkbox, and one to check it.
I've recently come across the same issue with having to click the checkbox twice to get the proper behavior, so here's what worked for me and will hopefully spare other readers a few minutes of head-scratching:
// the usual
var menu = { "foo":false };
// store this reference somewhere reasonable or just look it up in
// __controllers or __folders like other examples show
var o = menu.add(menu, "foo").onChange(function() { });
// some later time you manually update
o.updateDisplay();
o.__prev = o.__checkbox.checked;
First set up data binding by telling dat.gui to listen to the value you need to bind to by including .listen() after your .add()
gui = new dat.GUI;
controllers = [];
var menu = {
'This is an example': false,
}
controllers[0] = gui
.add(menu, 'This is an example')
.listen()
.onFinishChange(
function(value) {
console.log('example');
}
);
Then set your variable that dat.gui is controlling via the checkbox to false.
menu['This is an example'] = false;
Some more info about the details of dat.gui: http://dat-gui.googlecode.com/git-history/561b4a1411ed13b37be8ff974174d46b1c09e843/index.html
I should probably start by mentioning that I am using Internet Explorer 6. I am calling a JavaScript function (tabModifiedHighlight) from an onChange event. The function works perfectly other places however, I have a couple of places on the page where it works when I check the checkbox, but the event doesn't even seem to fire when I uncheck it.
Here is the JavaScript function:
function tabModifiedHighlight(){
alert("alert");
var div, i, input, inputIndex, selects, selectIndex, selectedTab, highlighted;
var tabs = new Array("admissioninformation","diet","vitalsigns","activities","nursing","ivfluids","medications1","medications2","labs","respiratory","diagnostic","consultations");
for(i=0; i<(tabs.length); i++){
selectedTab = tabs[i]+'tab';
if (document.getElementById(selectedTab).className == "selectedtab"){
div = document.getElementById(tabs[i]),
input = div.getElementsByTagName('input'),
selects = div.getElementsByTagName('select');
break;
}
}
highlighted = false;
for (inputIndex = 0; inputIndex < input.length; inputIndex++){
if (input[inputIndex].checked == true){
highlighted = true;
}
}
for (inputIndex = 0; inputIndex < input.length; inputIndex++){
if (input[inputIndex].type == 'text' && input[inputIndex].value != ""){
highlighted = true;
}
}
for (selectIndex = 0; selectIndex < selects.length; selectIndex++){
if (selects[selectIndex].value != ""){
highlighted = true;
}
}
if (highlighted == true){
document.getElementById(selectedTab).style.backgroundColor = "#FF0";
}
else {
document.getElementById(selectedTab).style.backgroundColor = "#F0F0F0";
}
}
And here is the input that is calling it:
<input name="cbMedTylenolPO" id="cbMedTylenolPO" type="checkbox" value="PO" onClick="tylenolPoShowHide(); checkBoxHighlight(this, 'MedicationsRow2'); tabModifiedHighlight();" />
This page has multiple "tabs" which are just divs that are set to visible or hidden based on which one is selected. It seems consistent in that it works everywhere except for 2 of the tabs, and nowhere on those tabs. The only other difference I can see is that the ones that are not working are also showing or hiding divs within the tab, based on whether the checkbox is checked or not. I have added the alert at the very beginning of the function to see if it is firing or not, and it does when checking the checkbox, but not when unchecking.
I hope I made this clear, and any thoughts are appreciated!
As your code is not working only for two tabs, and working for all others its not an browser compatibility issue.
onClick if checkbox you are calling these 3 methods
tylenolPoShowHide(); checkBoxHighlight(this, 'MedicationsRow2');tabModifiedHighlight()
Note tabModifiedHighlight is last one..
if any of first two methods tylenolPoShowHide or checkBoxHighlight fails... then tabModifiedHighlight will not be called.
I will suggest to add alert as first and last line in both tylenolPoShowHide and checkBoxHighlight ...
It will help you find which one is actually failing then you can add that code here and we will be able to help you further
I have a javascript function below- In fact i have a checkbox in a repeater and a gridview inside that which again has some set of checkboxes.
I want to enable disable the gridviewCheckboxes based on the repeater checkbox selection.
so i have registered a javacript on itemsRepeater_ItemDataBound. to capture the - Which checkbox of repeater -> (RepeaterCheckBoxId) and Which GridView(Grid) as below.
function EnableDisable(RepeaterCheckboxid, Grid)
{
var grid = document.getElementById(Grid);
if (grid == null)
return;
//variable to contain the cell of the grid
var cell;
if (grid.rows.length > 0) {
//loop starts from 1. rows[0] points to the header.
for (i = 1; i < grid.rows.length; i++) {
//get the reference of first column
cell = grid.rows[i].cells[1];
cell.childNodes[0].checked = document.getElementById(RepeaterCheckboxid).checked;//If repeater checkbox is Unchecked then gridview checkboxes should be unchecked.* This is not working.
cell.childNodes[0].disabled = !document.getElementById(RepeaterCheckboxid).checked; //If repeater checkbox is checked then gridViewCheckboxes are enabled and vice versa.This is working.
}
}
}
But i observed that enable disable is working fine but checked unchecked is not working.
How can i uncheck all the checkboxes in gridview if the repeater's checkbox is unchecked?
Please help me out if you guys have any idea.
Try using JQuery:
$.each($(grid).find("tr"),function(){
var chk = $(this).find("td:first").find(":checkbox");
chk.attr("checked",$("#"+RepeaterCheckboxid).attr("checked"));
chk.attr("disabled",!$("#"+RepeaterCheckboxid).attr("checked"));
});
Try like this :
cell = grid.rows[i].cells[1];
var checkedAttrib = document.createAttribute('checked');
checkedAttrib.value = document.getElementById(RepeaterCheckboxid).checked; // this will take the value from 'RepeaterCheckboxid'
cell.childNodes[0].setAttributeNode(checkedAttrib);
You may need to access gridview using its ClientID like:
$('#<%=GridView1.ClientID %>')
And to get all checkboxes in gridview you can use .find("input:checkbox") and the iterate through each checkbox :
<script type="text/javascript">
function CheckUnCheckAll(chk) {
$('#<%=GridView1.ClientID %>').find("input:checkbox").each(function () {
if (this != chk) {
this.checked = chk.checked;
}
});
}
</script>
Call CheckUnCheckAll(this) on header checkbox with its object.
Check example here: http://www.codegateway.com/2012/05/jquery-check-uncheck-all-checkboxes-in.html
I have a drop down if i click it will retrieve values from db.If thre are 4 values that has to pass into text box and make it visible.If 5 values then 5 values has to get visible.There will be a count if 4 boxes count has to get into 5th box.if 5 values then count has to get int0 6th box.
How do i do it?
If the text boxes are in the markup and you've just hidden them (e.g., style="display: none"), you can show them again by setting their style.display property to "":
textBoxElement.style.display = "";
For example, here's a button click handler that looks for a text field to show and shows it; if there aren't any more to show, it hides the button:
var myForm = document.getElementById('myForm');
document.getElementById('btnShowField').onclick = function() {
var index, field, foundOne, foundMore;
foundOne = foundMore = false;
for (index = 0; index < myForm.elements.length; ++index) {
field = myForm.elements[index];
if (field.type === "text" && field.style.display === "none") {
if (!foundOne) {
// Found one, show it
field.style.display = "";
foundOne = true;
}
else {
// Found more, so we don't need to hide the button
foundMore = true;
break;
}
}
}
if (!foundMore) {
// No more hidden fields, hide the button
this.style.display = "none";
}
};
Live example
If you want to add more text boxes to a form at runtime when they aren't in the markup, you can easily do that:
var textBox = document.createElement('input');
textBox.type = "text";
textBox.name = "somename";
formElement.appendChild(textBox);
Live example
Usually the structure will be a bit more complex than that, but that's the general idea.
Off-topic: A lot of these things can be made dramatically easier by leveraging a JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others. They'll smooth over browser differences and provide a lot of value-add functionality, so you can focus on what you're actually trying to do rather than browser quirks and such.