I have built a datagrid with pop up form editing based on the CRUD application demo
http://www.jeasyui.com/tutorial/app/crud.php
One of the input fields is a checkbox.
Database field is tinyint where 1 = checked and 0= unchecked.
How can I pass these to a checkbox input field?
My popup form dialog is here:
<div id="dlg" class="easyui-dialog" style="width:600px;height:260px;padding:10px 20px"
closed="true" buttons="#dlg-buttons" data-options="modal:true">
<div class="ftitle">Class</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<input name="class_id" hidden>
</div>
<div class="fitem">
<label>Class:</label>
<input id="idformClass" name="Class" class="easyui-validatebox" data-options="required:true,validType:'length[1,20]'">
</div>
<div class="fitem">
<label>Active?</label>
<input type="checkbox" id="idformIsActive" name="IsActive" class="easyui-checkbox">
</div>
<div class="fitem">
<label>Sort Order</label>
<input id="idformsortorder" name="sortorder" type="text" style="width:90px" class="easyui-numberspinner" required="required" data-options="min:0,max:100,editable:false">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="updateRecord()">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>
I have added to what in the Basic Crud Application example is the editUser() function in order to translate my database value of 1 or 0 to checked or unchecked. But it only works the first time...
function editRecord(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','Edit Class');
$('#fm').form('load',row);
if(row.IsActive=='1'){
$.messager.show({ // always triggers correctly
title: 'Watch',
msg: 'IsActive is 1'
});
$('#idformIsActive').attr('checked',true); // only works the first time
}
url = 'data_update.php?estimatelinedetail_id='+row.id;
}
}The messager pop up triggers correctly when editing rows where isActive == 1. Happy days :)
BUT the checkbox input (#idformIsActive) is correctly checked only the first time you invoke the edit form.
Subsequent invocations of the form show it unchecked even when the value = 1..
Any ideas? Thanks in advance.
The next question is going to be:
How do I translate the checked or unchecked checkbox field states into a 1 or 0 to save in the database?
OK. I have managed to resolve both loading the dialog form and setting the checkbox as checked/unchecked depending on whether the field value = 1 or 0
function editRecord(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','Edit Class');
$('#fm').form('load',row);
//CHECKBOX START
if(row.IsActive=='1'){
$('#idformIsActive').prop('checked',true);
} else {
$('#idformIsActive').prop('checked',false);
}
//CHECKBOX END
url = 'data_update.php?class_id='+row.id;
}
}I have also resolved how to translate a checkbox 'checked' property into a 1 or 0 value:
function updateRecord(){
//CHECKBOX START
if ($('#idformIsActive').prop('checked') == true) {
$('#idformIsActive').val('1');
} else {
$('#idformIsActive').val('0');
}
//CHECKBOX END
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.success){
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({
title: 'Error',
msg: result.msg
});
}
}
});
}
Hope this is of help to someone else.