Is it possible to implement the autocomplete functionality for a combobox AND limit the valid options to only those that are in the list.

It seems that for autocomplete to work both mode:remote and editable:true must apply.
However, editable:true means the user can enter any value and is not constrained to the list options.

<input id="idAccountsReceivableTaxType" name="AccountsReceivableTaxType" class="easyui-combobox" style="width:200px"
data-options="valueField:'xerogstcode',
textField:'vat_description',
url:'get_vatcode_data.php',
mode:'remote',
editable:true" />

Is there some way of blocking the user to leave the field unless nothing or one of the dropdown list options has been selected?

Thanks very much.
That has certainly resolved the issue.

I still don't understand why the update() function didn't work though... It ought to?

In the developer console it says;

Notice: Undefined index: IsActive in /volume1/web/govportal/app/committee2/data_update.php on line 5
{"success":true}
Uncaught SyntaxError: Unexpected token : committee.php:107
$.form.success committee.php:107
cb jquery.easyui.min.js:6091
x.event.dispatch jquery.min.js:5
y.handle

line 5 in data_update.php

Code:

$IsActive   = $_REQUEST['IsActive'];

Update file in full:

Code:

<?php
$committee_id  = intval($_REQUEST['committee_id']);
$CommitteeName = $_REQUEST['CommitteeName'];
$school_id     = intval($_REQUEST['school_id']);
$IsActive     = $_REQUEST['IsActive'];
$SortOrder     = $_REQUEST['SortOrder'];

include '../../common/conn.php';

$sql = "UPDATE committee SET CommitteeName='$CommitteeName',school_id='$school_id',IsActive='$IsActive',SortOrder='$SortOrder' WHERE committee_id=$committee_id";
$result = mysql_query($sql);
if ($result){
echo json_encode(array('success'=>true));
} else {
echo json_encode(array('msg'=>'Errors occured while attempting to update the record.'));
}
?>

lines 106 and 107 in calling file:

Code:

return $(this).form('validate');
},

I have a datagrid with a pop-up modal dialog to update and insert records based on the Basic CRUD Application in the demo.
On my dialog form I have a checkbox field.
The corresponding database field is a MySQL tinyint which is 0=false and 1=true.
This numeric value has to be converted from and into the form's checkbox.prop('checked',false) or checkbox.prop('checked',true).

To set the value before opening the dialog, I code as follows ("IsActive" is my checkbox field = 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;
}
}

That works fine.

THIS IS WHAT DOESN'T WORK AND I CAN'T WORK OUT WHY.

Translating the checkbox property back to a 1 or 0 when submitting the popup dialog edit form

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){ //WORKS TO HERE - FORM SUBMITTED BUT DOESN'T CLOSE DIALOG AND RELOAD GRID
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({
title: 'Error',
msg: result.msg
});
}
}
});
}

For some unknown reason it ONLY works when the checkbox is checked so the if condition is true:

Code:

if ($('#idformIsActive').prop('checked') == true) {
$('#idformIsActive').val('1');
} else {
$('#idformIsActive').val('0');
}

What happens when the else clause fires (checkbox is unchecked) is:

• It correctly converts the checkbox property to a zero
• The dialog does NOTclose
• The datagrids does NOT reload
• The database is however correctly updated with the zero value

It's like this clause is failing when it shouldn't

Code:

if (result.success){

Any ideas? Thanks for your insights!

Hi Reems

Thanks very much for your detailed response.
Just got back off holiday so will have a look at this with interest over the next few days.
Thanks for taking the time. Appreciated.

Bedankt

Andy

Hi Reems

Do you have one form per tab?
Or one form spread across several tabs?
No problem with one form per tab but when spreading parts of a single form over multiple tabs I could only load data into the first tab?
What was your experience?

Found a not ideal workaround by triggering a refresh from the master tab set:

Code:

<div class="easyui-tabs" data-options="id:'master-tabs',fit:true,border:false,plain:true"  onclick="javascript:$('#tab_qualifications').panel('refresh');">

"tab_qualifications" here is the id of the first subtab div I needed to refresh:

Code:

<div title="Qualifications" data-options="id:'tab_qualifications',href:'qualifications/qualifications.php'" style="padding:5px"></div>

What would be best is to have a way of forcing the panel to refresh just upon loading the page otherwise this subtab is reloaded everytime you click on a master tab. Anyone got any neat solution?

[How can I refresh this first subtab and keep "cache:true" as I want the form to keep its state when traversing other tabs?]

I have a set of parent tabs and one of these tabs in turn contains a nested set of subtabs.
Each of the subtabs dynamically loads remote content using the href property.
Each of these nested tabs contains a datagrid or a form, which are actually child tables of the master record.
I successfully pass the master record id to these grids or forms, which use it as part of their select query.
All works fine except that the first subtab fails to initially load its form data.
There isn't a problem with the form as if you try moving it to another tab position it works fine.
If you set the first subtab with "cache:false", then subsequent clicking on the tab successfully loads the form data.

Is it possible to force the first subtab to refresh when the page first loads as follows:

The first subtab in the nested tabs:

Code:

<div title="Qualifications" data-options="id:'tab_qualifications',cache:false,href:'qualifications/qualifications.php'" style="padding:5px"></div>

JS document load (doesn't work though):

Code:

$(function(){
$('#mainform').form('load','data_select.php?entity_id='+'<?php echo $_GET['entity_id'];?>');
$('#tab_qualifications').panel('refresh'); //This doesn't work...
});

How can I refresh this first subtab and keep "cache:true" as I want the form to keep its state when traversing other tabs?
Thanks for your ideas...

[Is there any way of spanning a form across multiple tabs?]

I have a large form and want it to span across multiple tabs.
It's easy enough to position the Save and Cancel buttons above the tab set.
Problem is the form is only populated with data on the first tab.

I have tried creating a set of nested tabs and whether I place my <form></form> inside or outside the tabs, the best that can be achieved is to have the form on one tab panel only.

It is possible to spread a large form across several accordion panels provided the opening and closing form tags <form></form> remain outside the opening and closing accordion divs.

Is there any way of spanning a form across multiple tabs?

Got it now.

It should be:

Code:

$('#fm1').form('load','data_select.php?entity_id='+'<?php echo $_GET['entity_id'];?>');

Thanks for putting me on the right track.

Unfortunately that didn't do the trick.

Code:

$('#fm1').form('load','data_select.php?entity_id='+'<?php echo $eid;?>');

Doesn't get the parameter value of "entity_id" and add it to the url.
View Source shows a blank value, e.g. "supplieredit.php?entity_id="

The order of events is

• Calling form opens window with &entity_id=[keyfieldvalue] - This works fine
• Edit form is opened with the url including the parameter and parameter value, e.g. 'supplieredit.php?entity_id=6'
• BUT the edit form is blank as the parameter is not being captured and passed to the data_select.php file that creates the json datasource
• If you execute the url 'data_select.php?entity_id=6' in the browser it correctly filters the record where entity_id=6, so no apparent problems there
• If you execute the url 'data_select.php?entity_id=' or 'data_select.php' in the browser it returns blank, which is what is happening

My only thoughts on why it is not working are:
May be the edit form's "load" method is firing before the url parameter is available to it?
Should I use the form's onBeforeLoad method to get the variable?

Is there any tutorial on how to pass variables via url parameters?
I guess I could use php session variables but it would be nice to be able to manipulate url parameters.
Thanks for your input, greatly appreciated.

[But it is not getting the parameter (herein lies the problem I think).]

I want to call a form to edit a single record from a datagrid containing many records.

The edit form's datasource (data_select.php) dynamically queries a MySQL table to create a json file. It needs to receive the id key parameter.
e.g. data_select.php?entity_id=3 (where 3 is the parameter value being passed)

Code:

<?php
include '../../common/conn.php';
$eid = intval($_REQUEST['entity_id']);

$rs = mysql_query("SELECT entity_id, FirstName, MiddleName, LastName,Suffix,Phone,Mobile,AltPhone,Fax,Email FROM entity WHERE entity_id = $eid");

$items = array();
while($row = mysql_fetch_object($rs)){
array_push($items, $row);
}
$result["row"] = $items;

echo str_replace( array( '[', ']'), '', json_encode($items));
?>

The calling datagrid uses this function to open the edit form:

Code:

function openForm(){
   var row = $('#dg').datagrid('getSelected');
    if (row) {
        url = "../supplieredit/supplieredit.php?entity_id=" + row.entity_id;
        window.open(url,'_parent');
    }
}

This seems to work fine

The edit form itself has its datasource definition  like this:

Code:

$('#fm1').form('load','data_select.php?entity_id='+request.getParameter("entity_id"));

But it is not getting the parameter (herein lies the problem I think).

Can anyone help please? Thanks in advance  

[Does anyone know how to use this method to combine it with support for pagination? Ideally I would like to expand all nodes by default but offer pagination...]

I worked out how to correctly format the json data source in hierarchical format using php.
This means you don't have to use the loadFilter method.

Example of a correctly formatted JSON output (not based on my php select query - just in terms of structure):

Code:

[{  
    "id":1,  
    "text":"Folder1",  
    "iconCls":"icon-save",  
    "children":[{  
        "text":"File1",  
        "checked":true  
    },{  
        "text":"Books",  
        "state":"open",  
        "attributes":{  
            "url":"/demo/book/abc",  
            "price":100  
        },  
        "children":[{  
            "text":"PhotoShop",  
            "checked":true  
        },{  
            "id": 8,  
            "text":"Sub Bookds",  
            "state":"closed"  
        }]  
    }]  
},{  
    "text":"Languages",  
    "state":"closed",  
    "children":[{  
        "text":"Java"  
    },{  
        "text":"C#"  
    }]  
}]

Here is the data_select.php file.
Note:
id field is account_id
parent id field is parent_id

Code:

<?php
include '../../common/conn.php';

$refs = array();
$list = array();
 
$sql = "SELECT
account.account_id,
account.AccountName,
account.parent_id,
account.AccountType,
account.AccountNumber
FROM
account";
$result = mysql_query($sql);
while($data = @mysql_fetch_assoc($result)) {
    $thisref = &$refs[ $data['account_id'] ];
 
    $thisref['account_id'] = $data['account_id'];
    $thisref['AccountName'] = $data['AccountName'];
    $thisref['parent_id'] = $data['parent_id'];
    $thisref['AccountType'] = $data['AccountType'];
    $thisref['AccountNumber'] = $data['AccountNumber'];
 
    if ($data['parent_id'] == 0) {
        $list[  ] = &$thisref;
    } else {
        $refs[ $data['parent_id'] ]['children'][] = &$thisref;
    }
}

$mylist["rows"] = $list; 

echo json_encode($mylist);
?>

The above will extract ALL records.
Note: parent_id should be '0' by default not NULL.

Does anyone know how to use this method to combine it with support for pagination? Ideally I would like to expand all nodes by default but offer pagination...

Spot on.
Works like a dream.
Thank you again. 

I am using the layout component that I want to automatically fit to the full size of the page.
This works fine as follows:

Code:

<body>
<div class="easyui-layout" data-options="fit:true">

But if I want a small margin around the layout there is a problem with the bottom margin (padding)

Code:

<body style="padding:10px">
<div class="easyui-layout" data-options="fit:true">

I correctly have 10px of padding top, left and right but at the bottom the layout continues 10px below the bottom of the screen.

Any suggestions on how to resolve?