Checkbox on pop up edit form [resolved]

[andyj]

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:

Code:

	<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>

[andyj]

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...

Code:

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?

[andyj]

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

Code:

		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:

Code:

		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.