EasyUI Forum
March 28, 2024, 05:59:42 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: combobox multiple not working  (Read 20912 times)
andyj
Jr. Member
**
Posts: 57



View Profile
« on: June 28, 2014, 12:59:49 PM »

Out of the box, a combobox with multiple selections only saves the last item in the list of selections.

Work around?
onSubmit convert multiple combobox comma-separated integers to a string value
Code:
...
onSubmit: function(){
//Convert multiple combobox integer to string value START
var _Invitees = $('#idformInvitees').combobox('getValues');
_StrInvitees = String(_Invitees);
$('#idformInvitees').combobox('setValue', _StrInvitees);
return $(this).form('validate');
...

But reloading still causes problems.

Example:

Here are 3 lookup values in db table for populating the combobox:
ID   TEXT
1     Person A
3     Person B
31    Person C

I have selected all three and in my MySQL table they are saved as "1,3,31"

When I reload the comobobox, this is what is displayed as the comma-separated list of selections with unwanted additional commas and has misinterpreted the data:
Person A,,,Person B,,,Person B,Person A

What seems to be happening is that the value is evaluated as a string, all commas are removed and the individual single-digit integers are evaluated as values.
1,3,31 -> 1331 -> "1" "3" "3" "1"

Is there a way of extending the save and load functionality of a combobox to handle multiple selections with integer key fields?
« Last Edit: June 28, 2014, 04:54:42 PM by andyj » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: June 28, 2014, 10:55:06 PM »

Call 'getValues' method to get all the selected values and 'setValues' method to set the specified selected values. Please confirm that you are using the correct method and retrieve the correct data from server.
Logged
andyj
Jr. Member
**
Posts: 57



View Profile
« Reply #2 on: June 29, 2014, 02:25:16 PM »

Without any intervention, does the "multiple:true" switch attempt to parse the values at all?
Or does the combobox process data the same for "multiple:false" and "multiple:true"?

It would be helpful to know if there is any processing... Thanks in advance. Smiley
Logged
andyj
Jr. Member
**
Posts: 57



View Profile
« Reply #3 on: June 30, 2014, 12:55:33 PM »

This is not a solution but it may assist in working out what the problem is with how combo treats the separator when loading and posting multiple combobox values.

If in my data_select.php file, I strip out all of the commas that are separating my values then it is able to return single-digit selections.
MySQL select clause includes
Code:
SELECT
agenda_id
...
REPLACE(agenda.Invitees, ',', '') AS Invitees, //strips out the comma separators
...
FROM
agenda
This, of course, all goes wrong as per my above example
1,3,31 -> 1331 -> "1" "3" "3" "1"
instead of
1,3,31 -> 1331 -> "1" "3" "31"

Are there any rules or assumptions for the combobox with multiple selections to work
e.g. only with comma-separated unique string values
I imagine most people will have the value as an integer.
The default separator is a comma.
If you set the separator as anything other than a comma, it still saves to the db as a comma-separated string.

Any ideas?
Logged
andyj
Jr. Member
**
Posts: 57



View Profile
« Reply #4 on: June 30, 2014, 01:33:54 PM »

**SOLUTION**
OK. I have resolved this, although just wonder whether this might be included in a future update

My page is based on the basic CRUD application (http://www.jeasyui.com/demo/main/index.php?plugin=Application&theme=default&dir=ltr&pitem=)

The datagrid loads the comma-separate value into the data row.
You have to split that into an array of substrings based on comma as a separator
In this example "Invitees" is my field containing the comma-separated list of integer values.

Code:
function editRecord(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','Edit Agenda');
$('#fm').form('load',row);

//Split multiple combogrid into array of substrings START
  var _substringarray = row.Invitees.split(',');
  $('#idformInvitees').combobox('setValues', _substringarray);
//Split multiple combogrid into array of substrings END

url = 'data_update.php?agenda_id='+row.agenda_id;
}
}

When updating you MUST convert the comma-separated array of values into a single string (same for inserting). If you don't it only keeps the last one in the list.:

Code:
function updateRecord(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){

//Convert multiple combobox integer to string value START
  var _Invitees = $('#idformInvitees').combobox('getValues');
  _StrInvitees = String(_Invitees);
  $('#idformInvitees').combobox('setValue', _StrInvitees);
//Convert multiple combobox integer to string value END

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 that helps...
Can this be incorporated into a future update?
« Last Edit: June 30, 2014, 01:36:48 PM by andyj » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #5 on: June 30, 2014, 05:10:53 PM »

When post a multiple combobox values, the parameter array will be sent to server. If you wish to retrieve the array value from the php script, please set the combobox's name attribute as:
Code:
<form ...>
  <input class="easyui-combobox" multiple name="cc[]">
</form>
In you php code, you can retrieve this combobox's value as below:
Code:
$cc = $_POST["cc"];
foreach($cc as $c){
  //...
}
Logged
andyj
Jr. Member
**
Posts: 57



View Profile
« Reply #6 on: October 17, 2014, 09:46:59 AM »

If a have a multiple-type combobox that is loaded with its id/text options. No problems there.
But to initialise it with its MULTIPLE selected values, I need to set its value with an array of id values.
It will then correctly display the selected values and they will be preselected.

My form data for this field is a string of comma-separated values (e.g. "3,2,4,34").
I need to convert this string of comma-separated values to an array before passing it to the combobox as its selected values.

I think you can convert a string to an array and set the combobox values like this:

Code:
e.g. _DBstring ="3,2,4,34"; // How to get the field value????
var _comboarray = _DBstring.split(",");
$('#mycombobox').combobox('setValues', _comboarray);

BUT...
How do I get the DBstring value for the field and convert it to an array before it is loaded?
Do I use the form's onBeforeLoad method? (How?)
Or do I use my php select code? (How?)

Thanks in advance for any tips.
« Last Edit: October 17, 2014, 09:52:24 AM by andyj » Logged
andyj
Jr. Member
**
Posts: 57



View Profile
« Reply #7 on: October 17, 2014, 10:08:06 AM »

I have sussed it out.

To convert a comma-separated string in your database to an array for a multiple-type combobox, do as follows:

Javascript function to get the field values, convert them from a string to an array and correctly pass them to the combobox
Code:
function explodeArrayReviewers(data){
var _StringReviewers = data.Reviewers;
var _ArrayReviewers = _StringReviewers.split(",");
$('#idformReviewers').combobox('setValues', _ArrayReviewers);
}

You call this js function from your form's onLoadSuccess event:
Code:
<form id="fm" method="post" novalidate data-options="onLoadSuccess: function(data){explodeArrayReviewers(data);}">

To Update or Insert these values after submitting your form, the combobox field will post an array.
To convert the array to a comma-separated string do as follows in your update/insert php file:

Code:
$ReviewersArray = $_POST['Reviewers'];
$Reviewers = implode(',', $ReviewersArray);

$sql = "UPDATE ...

DON'T USE THE METHOD I THOUGHT WAS A SOLUTION ABOVE, THIS IS THE WAY TO DO IT!
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #8 on: October 18, 2014, 12:49:53 AM »

The 'setValues' method of combobox can be overridden to accept the comma-separated string.
Code:
(function(){
    var setValues = $.fn.combobox.methods.setValues;
    $.fn.combobox.methods.setValues = function(jq, values){
        return jq.each(function(){
            if (!$.isArray(values)){
                var opts = $(this).combobox('options');
                values = values.split(opts.separator);
            }
            setValues.call($.fn.combobox.methods, $(this), values);
        })
    }
})(jQuery);
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!