dependent combobox problem..please help Thanks

[jarimanis]

i need some help guys..

i'm create two dependent combobox (well name and depth) in form insert datagrid..the problem start when i want to edit data, the value not show.



and my code :

Code:

<div id="dlg" class="easyui-dialog" style="width:550px;height:350px;padding:10px 20px"
	closed="true" buttons="#dlg-buttons">
	<div class="ftitle">Add Core Maintenance</div>
	<form id="fm" method="post" novalidate>
		<table class="fitem">
			<tr>
				<td>Well Name</td>
				<td>:</td>
				<td><input id="well" class="easyui-combobox" name="WELL_ID" data-options="
					valueField:'WELL_ID',
					textField:'WELL_NAME',
					url:'getListWell',
					onSelect: function(rec){
						var url = 'getListCore/'+rec.WELL_ID;
						jQuery('#depth').combobox('reload',url);
				}
				"></td> 
			</tr>
			<tr>
				<td>Depth</td>
				<td>:</td>
				<td><input id="depth" class="easyui-combobox" name="CORE_ID" data-options="valueField:'CORE_ID',textField:'DEPTH'"></td>
			</tr>
			<tr>
				<td>Maintenance Name</td>
				<td>:</td>
				<td><input id="depth" class="easyui-combobox" name="MAINTENANCE_ID" data-options="valueField:'MAINTENANCE_ID',textField:'MAINTENANCE_NAME',url:'getListMaintenance'"/></td>
			</tr>
			<tr>
				<td>Photo After</td>
				<td>:</td>
				<td><input class="easyui-filebox" style="width:300px"></td>
			</tr> 
			<tr>
				<td>Location Maintenance</td>
				<td>:</td>
				<td><input name="LOCATION_MAINTENANCE" class="easyui-textbox"></td>
		</tr>
		</table>
	</form>
</div>

any idea or maybe have a same problem with this

Regard
jari

[aswzen]

please send your table scripts..
and your edit button action

[jarimanis]

please send your table scripts..
and your edit button action

oke wait..i just follow this script in easyui documentation

Code:

<table id="dg" title="Core Maintenance" class="easyui-datagrid" style="width:800px;height:400px" toolbar="#toolbar" fitColumns="true" singleSelect="true" data-options="rownumbers:true,pagination:true,url:'getCoreMaintenance'">
	<thead>
		<tr>
			<th field="WELL_NAME" width="50">Well Name</th>
			<th field="TOP_DEPTH" width="50">Top Depth</th>
			<th field="BOTTOM_DEPTH" width="50" >Bottom Depth</th>
			<th field="MAINTENANCE_NAME" width="55">Maintenance Name</th>
			<th field="PHOTO_BEFORE" width="90">Photo Before</th>
			<th field="PHOTO_AFTER" width="90">Photo After</th>
			<th field="LOCATION_MAINTENANCE" width="50">Location</th>
		</tr>
	</thead>
</table>
<div id="toolbar">
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New Core Maintenance</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit Core Maintenance</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove Core Maintenance</a>
</div>
<div id="dlg" class="easyui-dialog" style="width:550px;height:350px;padding:10px 20px"
	closed="true" buttons="#dlg-buttons">
	<div class="ftitle">Add Core Maintenance</div>
	<form id="fm" method="post" enctype="multipart/form-data" novalidate>
		<table class="fitem">
			<tr>
				<td>Well Name</td>
				<td>:</td>
				<td><input id="well" class="easyui-combobox" name="WELL_ID" data-options="
					valueField:'WELL_ID',
					textField:'WELL_NAME',
					url:'getListWell',
					onSelect: function(rec){
						var url = 'getListCore/'+rec.WELL_ID;
						jQuery('#depth').combobox('reload',url);
				}
				"></td> 
			</tr>
			<tr>
				<td>Depth</td>
				<td>:</td>
				<td><input id="depth" class="easyui-combobox" name="CORE_ID" data-options="valueField:'CORE_ID',textField:'DEPTH'"></td>
			</tr>
			<tr>
				<td>Maintenance Name</td>
				<td>:</td>
				<td><input id="depth" class="easyui-combobox" name="MAINTENANCE_ID" data-options="valueField:'MAINTENANCE_ID',textField:'MAINTENANCE_NAME',url:'getListMaintenance'"/></td>
			</tr>
			<tr>
				<td>Photo After</td>
				<td>:</td>
				<td><input class="easyui-filebox" name="userfile[]" data-options="prompt:'Choose a file...'" style="width:250px;"></td>
			</tr> 
			<tr>
				<td>Photo Before</td>
				<td>:</td>
				<td><input class="easyui-filebox" name="userfile[]" data-options="prompt:'Choose a file...'" style="width:250px;"></td>
			</tr> 
			<tr>
				<td>Location Maintenance</td> 
				<td>:</td>
				<td><input name="LOCATION_MAINTENANCE" class="easyui-textbox"></td>
		</tr>
		</table>
	</form>
</div>

<div id="dlg-buttons">
	<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>
<script type="text/javascript">

	// function tes(value,row){
		// var href = 'www.google.co.id';
		// return '<a target="_blank" href="' + href + '"></a>';
	// }
	
	var url;
	function newUser(){
		$('#dlg').dialog('open').dialog('setTitle','');
		$('#fm').form('clear');
		url = 'insertCoreMaintenance';	
	}
	
	function editUser(){ 
		var row = $('#dg').datagrid('getSelected');
		if (row){
			$('#dlg').dialog('open').dialog('setTitle','');
			$('#fm').form('load',row);
			url = 'updateCoreMaintenance/'+row.CORE_MAINTENANCE_ID;
		}
	}
	
	function saveUser(){
		$('#fm').form('submit',{
			url : url,
			onSubmit: function(){
				return $(this).form('validate');
			},
			success: function(result){
				//var result = eval("('+result+')");
				alert (result);
				if (result.errorMsg){
				$.messager.show({
					title: 'Error',
					msg: result.errorMsg
				});
				} else {
					$('#dlg').dialog('close'); // close the dialog
					$('#dg').datagrid('reload'); // reload the user data
				}
			}
		});
		}
		
	function destroyUser(){
		var row = $('#dg').datagrid('getSelected');
		if (row){
			$.messager.confirm('Confirm','Are you sure you want to destroy this items?',function(r){
			if (r){
				$.post('deleteCoreMaintenance/'+row.CORE_MAINTENANCE_ID,function(result){
				if (result.success){
					$('#dg').datagrid('reload'); // reload the user data
				} else {
					$.messager.show({ // show error message
					title: 'Error',
					msg: result.errorMsg
					});
				}
				},'json');
			}
			});
		}
	}
</script>

<style type="text/css">
#fm{
margin:0;
padding:10px 30px;
}
.ftitle{
font-size:14px;
font-weight:bold;
padding:5px 0;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
.fitem{
margin-bottom:5px;
}
.fitem label{
display:inline-block;
width:80px;
}
.fitem input{
width:160px;
}
</style>

[aswzen]

you have to check you JSON data on

Code:

url:'getListWell',

is the data exist or not..try to debug with that..

[jarimanis]

you have to check you JSON data on

Code:

url:'getListWell',

is the data exist or not..try to debug with that..

sorry for late respons sir,,data already exist sir

this is json getListWel when i'm test to open in browser :

[{"WELL_ID":"22","FIELD_ID":"22","WELL_NAME":"ALU-ALU E1","SPUD_DATE":"01-JAN-70","COMPLETION_DATE":"01-JAN-70","WELL_TYPE_ID":"22","WELL_STATUS":"AKTIF","TOTAL_DEPTH":"5638","ELEVATION":null},{"WELL_ID":"23","FIELD_ID":"22","WELL_NAME":"ALU-ALU E2","SPUD_DATE":"01-JAN-70","COMPLETION_DATE":"01-JAN-70","WELL_TYPE_ID":"22","WELL_STATUS":"AKTIF","TOTAL_DEPTH":"6003","ELEVATION":null}]

first time edit combobox not working like in my picture, i'm must to choose again that combo, and after that if i'm want to edit another data without refresh page that combobox work fine sir..

[aswzen]

try this...
edit the combobox on the dialog to this..

         

Code:

<tr>
				<td>Well Name</td>
				<td>:</td>
				<td><input id="well" name="WELL_ID" data-options="
					valueField:'WELL_ID',
					textField:'WELL_NAME',
					url:'getListWell',
					onSelect: function(rec){
						var url = 'getListCore/'+rec.WELL_ID;
						jQuery('#depth').combobox('reload',url);
				}
				"></td> 
			</tr>

and edit the editUser() function to this..

Code:

function editUser(){ 
 $('#well').combobox();
		var row = $('#dg').datagrid('getSelected');
		if (row){
			$('#dlg').dialog('open').dialog('setTitle','');
			$('#fm').form('load',row);
			url = 'updateCoreMaintenance/'+row.CORE_MAINTENANCE_ID;
		}
	}

...