I am trying to create a checkbox which i checked. I am unable to find the required documentation to create a it. The input to the JS function is a the cell. I am not sure what to do after that.
Here is my code till now:
function eXcell_includeRC(cell) {
try {
this.cell = cell;
this.grid = this.cell.parentNode.grid;
var cbvalue = regExpGetValueCell;
if (cbvalue = 'Y') {
//add something to show a checked checkbox
} else {
//add somethig to add an unchecked checkbox
}
} catch(error){
alert (error.toSource());
}
return "false";
};
This where i am stuck. I checked the below link.
http://docs.dhtmlx.com/grid__basic_operations.html#grid
But the options given in there dont work.
You need to place the required html-content for your checkbox in the setValue function of your custom exCell.
Here you can find a detailed tutorial about building a custom column type in the dhtmlxGrid with the different examples:
http://docs.dhtmlx.com/grid__columns_types.html#customcolumntypes
Pay attention to the "button" column type it is pretty close to your needs.
Related
I have tried few examples to enable particular columns(text box,check box) alone when checkbox is checked.But nothing is working.I have included my code here
function enable()
{
if (document.getElementById("MaincheckboxId").checked == true)
{
document.getElementById("column1Id").disabled = false;
document.getElementById("column2id").disabled = false;
document.getElementById("subcheckboxId").disabled = true;
}
}
Here, when Main Checkbox is checked, column 1 and Column 2 should be enabled. Sub Checkbox should be disbaled.Please let me know what am i missing.
This code should work. Based on your comment, problem might be incorrect calling of enable(). Change your HTML from onclick="enable;" to onclick="enable()" should fix it.
I am working on DHTMLX grid and i need to add edit/delete button in each row, Is there any way to do it. I googled it and i was able to find about check box and link.
Any help will be much appreciated.
You can create a custom column type with any needed html-content.
For example, the following code will create an eXcell which will render the cell value as a button with a label:
function eXcell_button(cell){ //the eXcell name is defined here
if (cell){ // the default pattern, just copy it
this.cell = cell;
this.grid = this.cell.parentNode.grid;
}
this.edit = function(){} //read-only cell doesn't have edit method
this.isDisabled = function(){ return true; } // the cell is read-only, so it's always in the disabled state
this.setValue=function(val){
this.setCValue("<input type='button' value='"+val+"'>",val);
}
}
eXcell_button.prototype = new eXcell; // nests all other methods from the base class
all you need after that is to set your column type in your grid:
grid.setColTypes("button,...");
Here you can find a detailed tutorial with various examples:
http://docs.dhtmlx.com/grid__columns_types.html#customeditors
As per this JSFIDDLE --
I have been going crazy trying to figure this out for last 48 hours. Everything works except for the checkbox. I included the isolated snippet of code that is causing the issue in this.
After I created boxes (pressing checkbox button) and finalize the form, I was successful in seeing code and was able to serialize checkboxes into JSON - but, I ended up getting 'on' for all checkboxes even though if only one of them is checked.
When I checked only one (first box) and other boxes unchecked, and clicked 'save', I get this as result:
{"ck1":"on","ck2":"on","ck3":"on","submit1":"save"}
What was it that threw the result off? Am I doing something wrong in this code?
A help would be appreciated in identifying the issue.
My goal is to see JSON in this format when I have first checkbox checked:
{"ck1":"on","submit1":"save"} or any format that you would suggest.
EDITED:
Find below the function I assinged to submit event:
$('#form'+formnum).submit( function(e) {
e.preventDefault(e);
var data = {};
//Gathering the Data
$.each(this.elements, function(i, v){
var input = $(v);
data[input.attr("id")] = input.val();
//delete data[button.attr("id")]; <-- cant' figure it out
//removeData[submit] <-- cant' figure it out
}); // end of $.each
var output =JSON.stringify(data);
$('#showurl').text(output);
}); //end of 'save' button function
JSFIDDLE: jsfiddle.
You are getting the value from the checkboxes, and the value is always the same regardless of the state of the checkbox.
Check the type of the element to get the state for checkboxes:
if (input.is(':checkbox')) {
if (input.is(':checked')) {
data[input.attr("id")] = input.val();
}
} else {
data[input.attr("id")] = input.val();
}
If you only want data from the checkboxes, you can just filter out the the checked checkboxes from start:
$(':checked', this).each(function(i, v){ data[v.id] = v.value; });
You're arbitrarily assigning the value of all inputs, you're not actually checking the checked state.
Add a conditional line for:
data[input.attr("id")] = input.val();
Something like:
if (/* (input is a checkbox and checkbox is checked) or input is not a checkbox*/) {
data[input.attr("id")] = input.val();
}
You also need an exception for radio buttons.
I have the following jsfiddle that generates a YUI Datatable with checkboxes, but i have a problem getting the data of ids from the table after i click the Get Records button.
anyway to call the table from the javascript?
P.S : I am using YUI2 library as my project is using that
Using Checkbox Listeners
I hope this codes show what you need http://yuilibrary.com/yui/docs/datatable/datatable-chkboxselect.html
Edit:
I update your code for adding checkboxClickEvent for handling checkbox event in each of data row and use an array to keep all of the checked record id.
var selectedID = [];
myDataTable.subscribe("checkboxClickEvent", function(oArgs){
alert("check box clicked");
var elCheckbox = oArgs.target;
var oRecord = this.getRecord(elCheckbox);
if (elCheckbox.checked) {
selectedID.push(oRecord.getData("id"));
}
else {
selectedID.pop(oRecord.getData("id"));
}
oRecord.setData("check",elCheckbox.checked);
});
Detail of working code is here.
I am new to js and jquery. Currently, I have a form at form.php which contains a checkbox. When the user clicks submit, the form variables are sent to a form.js file where each value is checked to be null or not.
The form.js file works perfectly, however, for the checkbox nothing seems to happen. I have a feeling this is due to the way I have declared the variable.
The following is the code for the js file:
var email = $('#email').val();
var website = $('#website').val();
var CHECKBOX = $('CHECKBOX').val();
...
...
if (CHECKBOX.checked == FALSE){
var error = true;
$('#notchecked_error').fadeIn(500);
}else{
$('#notchecked_error').fadeOut(500);
}
Try using:
if ( $('#CHECKBOX').prop("checked") )
or:
if ( $('#CHECKBOX').is(":checked") )
Also, be sure your selector for the checkbox is correct.
I see two problems in your code. The first one is that the selector in your CHECKBOX assignation is faulty. It should be
var CHECKBOX = $('#CHECKBOX').val();
or
var CHECKBOX = $('input[type=checkbox]').val();
the second problem is that you are reading CHECKBOX.checked from the val() function, you need to read it from the checkbox itself.
if(CHECKBOX.checked)
$('input[type=checkbox]:checked') // If you have multiple checkboxes you can use this and loop through them to get additional info
$('#checkboxID:checked').length // To get one specific checkbox
`$('CHECKBOX').val();`
Will try to find an element with a tagname of CHECKBOX and return it's value. Presumably you want to reference the checkbox with an ID of CHECKBOX:
var CHECKBOX = $('#CHECKBOX');
To see if it's checked:
if (!CHECKBOX[0].checked) {
// CHECKBOX is not checked
}
You really should learn basic javascript before using jQuery. Usually validation is initiated from a form submit, which can give you are reference to the form. You can then reference all of the form elements as properties of the form, you don't need to create all of those jQuery objects. e.g. if you form is something like:
<form ... onsubmit="validate(this)"... >
<input type="checkbox" name="checkbox">
</form>
Then in your validate function:
function validate(form) {
if (!form.checkbox.checked) {
// the checkbox isn't checked
}
}
You can attach the listener dynamically if you wish.