Develop Reference

Struts2: checkbox stuck as selected

I am working on a website made with Struts2 and I am facing a problem with a checkbox.
I have a dropdown with a list of companies. If the user does not find his company in the list, he can click a checkbox to replace the dropdown with a text field. Here is the code:
Extract of the JSP:
<tr>
<td align="right" width="49%">
<table>
<sj:select id="company_select" name="company_select" list="company_list" .../>
</table>
</td>
<td colspan="2" align="left">
<table>
<s:hidden name="company_text" id="company_text" label="Company Type" disabled="true"/>
</table>
</td>
</tr>
<tr>
<td align=left>
<s:checkbox name="checkboxCompanyText" id="checkboxCompanyText" label="Company Not in the List"
fieldValue="false" onchange="showCompanyText()"/>
</td>
<td></td>
</tr>
The JS function:
function showCompanyText() {
if(document.querySelector('#checkboxCompanyText').checked = "true") {
document.getElementById('company_text').type = "visible";
document.getElementById('company_text').disabled = false;
document.getElementById('company_select').style.display = "none";
}else{
document.getElementById('company_text').type = "hidden";
document.getElementById('company_text').disabled = true;
document.getElementById('company_select').style.display = "block";
}
}
When the page loads, the checkbox is unchecked, the dropdown is here and the text input field is not visible. Good. When I check the checkbox, the dropdown goes away and the text field appears. Again: good. But when I try to uncheck the checkbox, it just remains checked, impossible to uncheck it.
If anyone has an idea of what's going on, you are welcome.

Sometimes, your error is so obvious that you don't see it. I sincerely spent several minutes looking at the code trying to figure out what was going on. Turns out the the solution was to transform if(document.querySelector('#checkboxCompanyText').checked = "true") into if(document.querySelector('#checkboxCompanyText').checked === true). Sometimes I hate myself.

Unable to disable/enable the check boxes on first select (click) in jQuery

My issue is if you select any of the check box (payee) - another rows with same column checkboxes should be be disable/enabled.
Issue #1: I am unable to disable/enable the check boxes on first select. But working on second click if you select any checkbox.
Issue #2: If I load the page again the value with check box which is previously checked is showing as disable with checked. I need it disable with unchecked.
Below is my code:
function onPayeeChkChange() {
jQuery(document).ready(function() {
$('#tblHousehold tr td#tdpayee input:checkbox').click(function(){
var $inputs = $('#tblHousehold tr td#tdpayee input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true); // <-- disable all but checked one
}else{
$inputs.prop('disabled',false); // <--
}
});
});
}
I am not sure what I have missed.

Is this what you are looking for?
Note: if you disable a checkbox, you will not be able to re-use it afterwards. If you must disable it, just add .prop('disabled', true) within the loop.
$(function () {
$(':checkbox').click(function () {
var input = $(this), td = input.closest('td'), table = td.closest('table');
// get index of the cell relative to its parent row
var i = td.index();
// loop through each row
$('tr', table).each(function () {
// uncheck the row's ith cell's checkbox
$('td:eq(' + i + ') :checkbox', this).not(input).prop('checked', false);
});
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox">
</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</table>

Make contenteditable for a specific table span using JS onclick

I have a simple table where I'm trying to allow for the field value to be made contenteditable after pressing the edit button that I am printing next to each value:
<table>
<tr>
<th>Variable A</th>
<th>Variable B</th>
<th>Variable C</th>
<tr>
<td><span id="field">Value A</span> <button type="button" class="result">EDIT</button></td>
<td><span id="field">Value B</span> <button type="button" class="result">EDIT</button></td>
<td><span id="field">Value C</span> <button type="button" class="result">EDIT</button></td> </tr>
</table>
I use the following jQuery upon clicking the Edit button
$( document ).ready(function() {
$("body").on('click', '.result', function() {
var update = $(this).closest('td');
document.getElementById('field').contentEditable = true;
update.append('<button class=\"result\">Save</button></td>');
$(this).remove();
});
});
Unfortunately when I click "Edit" button, only the first field (Value A) becomes editable.. I think this is because
document.getElementById('field').contentEditable = true;
Is only updating the first instance of the id='field'
But I'm trying to make it only update the field next to where I pressed the button. So if I click the 3rd Edit button, it should make the Value C field be editable. Instead it only does Value A.
I realize that I need to make it specific to that span.. But not finding a solution. I tried:
$(this).closest('.field').contentEditable = true;
But if I do this then no spans become editable. I know this might be an easy question but I've tried all sorts of options to no avail.

You can use .prev() to select the span previous to button, and the id's should always be unique, so I changed the id field to field_1, field_2, field_3, and I've replaced the update.contentEditable = true; with update[0].contentEditable = true;:
$("body").on('click', '.result', function() {
var update = $(this).prev('span');
var td = $(this).closest('td');
update[0].contentEditable = true;
td.append('<button class=\"result\">Save</button></td>');
$(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Variable A</th>
<th>Variable B</th>
<th>Variable C</th>
<tr>
<td><span id="field_1">Value A</span>
<button type="button" class="result">EDIT</button>
</td>
<td><span id="field_2">Value B</span>
<button type="button" class="result">EDIT</button>
</td>
<td><span id="field_3">Value C</span>
<button type="button" class="result">EDIT</button>
</td>
</tr>
</table>

Only one checkbox is checked at the time [duplicate]

So i have a div thats auto generated and inside are 3 check boxes with different id's & names and by default none of them are checked!! If one happens to get checked then i need the other two unchecked!!
So only one can be checked at a time ...
So all unchecked or only one checked!
<div class="configoptions">
<table class="configtable" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="fieldlabel">Include:</td>
<td class="fieldarea">
<label><input name="configoption[10]" id="co30" value="1" onclick="recalc()" type="checkbox">green</label>
</td>
</tr>
<tr>
<td class="fieldlabel">Include:</td>
<td class="fieldarea">
<label><input name="configoption[9]" id="co27" value="1" onclick="recalc()" type="checkbox">blue</label>
</td>
</tr>
<tr>
<td class="fieldlabel">Include:</td>
<td class="fieldarea">
<label><input name="configoption[11]" id="co31" value="1" onclick="recalc()" type="checkbox">white</label>
</td>
</tr>
</tbody>
</table>
</div>
Here is what i used to uncheck all divs on page ready.. since initially i need them unchecked.. that works great... now i need to make it so only one is check at a time if it is checked! Can someone gimme a hand,? Thx in advance!
$(document).ready(function() {
$('input[type=checkbox]').each(function() {
this.checked = false;
});
});

Use the prop function to change the checked property of checkbox and radio buttons
$(function(){
$('input:checkbox').prop('checked', false)
$('input:checkbox').click(function(){
if($(this).is(':checked')){
$('input:checkbox').not(this).prop('checked', false);
}
});
})
Demo: Fiddle

I had a similar issue and solved it like so (using part of Arun P Johny's answer - I wanted to share for those of you who might come across this as well.)
(function($checkbox,options){
$($checkbox).on('change', function() {
$("input[type='checkbox']").not(this).prop('checked', false);
});
});

Dynamically changing ToolTipDialog content

My application has a list of indicators, each with its help button. Clicking on each button, brings up a ToolTipDialog with definition for each respectively. The way I have written the code (below), the content does not get refreshed when the user clicks on another help button within the list after having clicked the first one. I have not been able to figure out how to change the "content" dynamically. Any help will be appreciated:
HTML:
<div dojoType="dijit.layout.ContentPane" id="group1" title="Population projection" selected="true">
<table id="popIndTable">
<tr id="someID">
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkCBR" name="checkInd" /></td>
<td id="indCBR">Crude Birth Rate</td>
<td id="infoCBR"><img id="imgCBR" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
<tr>
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkTest1" name="checkInd" /></td>
<td id="indTest1">Test 1</td>
<td id="infoTest1"><img id="imgTest1" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
<tr>
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkTest2" name="checkInd" /></td>
<td id="indTest2">Test 2</td>
<td id="infoTest2"><img id="imgTest2" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
</table>
</div>
JavaScript:
function showToolTipDialog(node,infoId){
var infoText;
var infoElem = dojo.byId(infoId).parentNode.id;
if (infoElem == "infoCBR"){
infoText = "This is the text container for CBR";
}
else if (infoElem == "infoTest1"){
infoText = "This is the text container for Test1";
}
if (!tooltipDialog) {
tooltipDialog = new dijit.TooltipDialog({
content: infoText,
style: "width:200px;height:auto;",
autofocus: !dojo.isIE, // NOTE: turning focus ON in IE causes errors when reopening the dialog
refocus: !dojo.isIE
});
dijit.popup.open({ popup: tooltipDialog, around: node});
tooltipDialog.opened_ = true;
}
else {
if (tooltipDialog.opened_) {
dijit.popup.close(tooltipDialog);
tooltipDialog.opened_ = false;
}
else {
dijit.popup.open({popup: tooltipDialog, around: node});
tooltipDialog.opened_ = true;
}
}
}

I believe the preferred way to change the value of a dojo widget programatically is to use the .set() method. ie:
this.myTooltipDialog.set("content", newContent);
Rather than:
this.myTooltip.content = newContent;

It looks like you never reset the content of your tooltipDialog. You create it once, but once it's created (new dijit.TooltipDialog({...})) it remains static.
I don't know the Dojo API. But can you just set the content value directly? Perhaps immediately after your first else:
tooltipDialog.content = infoText;
This is just a guess, but if Dojo's API is simple enough, that might do the trick.
If not, you might have to remove your if (!tooltipDialog) { check.

If your content is not too complicate, I suggestion you create a new TooltipDialog every call and clear it when blur, like
var dlgDiv = dojo.create("div");
var dlg = new dijit.TooltipDialog({
content: dlgDiv,
onBlur: function () {
popup.close(this);
this.destroyRecursive();
}
});
// you can create any content within dlgDiv at here dynamicly
dojo.popup.open({
around: yourArondNode ,
orient: ["below", "before", "after", "above"],
popup: dlg
});
dlg.focus();