Bubble editing - how do you set up a multiple select dropdown menu?

koniahin

Can you point me to an FAQ or example code for how to set up a multiple select menu in the bubble editor? The assumption is that I would use the control key to select multiple items (or perhaps shift+ ). The plan - I'm setting up a function which will make it possible to select all, all but, none or individual items in a list.

This may involve adding two functions - one a simple dropdown for 'all', 'all but', 'none'. The second would be the multiselect list of choices - the subject of this question.

colin

Hi @koniahin ,

Take a look at this thread here, there's a few options discussed.

Cheers,

Colin

koniahin

I looked at that thread but am still having trouble getting this to work. I errored - it is primary editing not bubble editing that I'm trying to get the multi-select option to work on. I'm not sure that I have select2 working correctly or even installed. I found a page about select2 and it said to add both the css and javascript cdn files to my page. I did that. Next I changed my code to:

    label: 'Page assignment:',
    name:  'page_assignment[]',
    type:  "select2",
    multiple: true,
    options: [
      { label: "All", value: "allpages" },
      { label: "About", value: "about" },
      { label: "Banner", value: "banner" },
      { label: "Contact", value: "contact" },
      { label: "Todo", value: "todo" },
    ]

When I save and reload it fails and the table is blank other than the thead and tfoot.

If I switch select2 back to select it will load the data and if I click to edit a line the editor opens and I see a multi-select with this field. However if I select a couple items then click to Save I get the error:

A system error has occurred (More information) - I looked but it does not make sense to me.

kthorngren

A system error has occurred (More information) - I looked but it does not make sense to me.

Please start by posting the error message you are receiving.

Kevin

koniahin

"A system error has occurred (More information)" is the error at the bottom of the editing window. This is with select, not select2.

When I click on the "More information" link it takes me to https://datatables.net/manual/tech-notes/12. So then I start Firefox webdeveloper do it again and under the Network --> Response tab I see:

<b>Notice</b>: Array to string conversion in <b>/.../datatables-editor/php/Database/Driver/Mysql/Query.php</b> on line <b>97</b><br />
{"data":[{"DT_RowId":"row_9","box_title":"Banner page text banner","publish":"Yes","access":"Public","page_exclusion":"selected","page_assignment":"Array","display_position":"bannertop","id":"9","ordering":"0"}]}

allan

There is also this example which might be of interest to you.

Your page_assignment value - are you storing that in the database as a string, or is it a linked table / join?

If you could show me your PHP that would be useful.

Thanks,
Allan

koniahin

string I believe; here is the relevant field info:

desc boxes;

+-----------------------------------------------------+-----------------------+------+-----+---------+----------------+
| Field                                               | Type                  | Null | Key | Default | Extra          |
+-----------------------------------------------------+-----------------------+------+-----+---------+----------------+
| id                                                  | int(11)               | NO   | PRI | NULL    | auto_increment |
...
| page_assignment                                     | varchar(255)          | YES  |     | NULL    |                |
...
+-----------------------------------------------------+-----------------------+------+-----+---------+----------------+

42 rows in set (0.01 sec)

---

MariaDB [bobmeetin_cms1]> select id, page_assignment from boxes;

+----+----------------------+
| id | page_assignment      |
+----+----------------------+
|  2 | -                    |
|  5 | allpages             |
|  6 | index                |
|  9 | Array                |  ==>> this is the relevant field value 

...

koniahin

Changing it to the ID vs text fixes the save issue but also takes me 180 degrees back to why I did it this way. In the table display view column it needs to display the field name, not the ID as the ID is not informational.

It needs to show the text, such as about (these are page aliases) and not the ID for the about page.

In the column definitions I have:

columns: [
  { data: 'ordering', className: 'reorder' },
  { data: 'id' },
  { data: 'page_assignment' }, <<== this field
  { data: 'publish' },
  { data: 'access' }
]

I looked at render but could not figure out how to display 'alias'. How do you do this?

allan

Thanks! As a string it can't directly store an array. You need to convert the array to be a string (and likewise when reading it back, a string into an array). There are two options for that:

1. In the select field type you can use the separator option to set a delimiting character and the field will do the split for you automatically. I'd recommend this option.
2. Use formatters on the server-side to convert to and from arrays. The implode and explode formatters can be used for that.

Allan

koniahin

Seems I have regressed. I thought it was working with ID so I was going to address the id/alias display. In testing the multiselect again today it is reporting the same error - but this time using the numeric ID field.

    label: 'Page assignment:',
    name:  "page_assignment[]",
    type:  "select",
    multiple: true,
    options: [
      { label: "About", value: "1" },
      { label: "Home",  value: "2" },
      { label: "Services",  value: "3" },
      { label: "Contact",  value: "4" }
    ]
  }, {

The error: Notice: Array to string conversion in /home/bobmeetin/web/dottedi.biz/public_html/demo/cms/bin/assets/datatables-editor/php/Database/Driver/Mysql/Query.php on line 97

{"data":[{
"DT_RowId":"row_9",
"box_title":
"Text banner",
"publish":"Yes",
"access":"Public",
"page_assignment":"Array",
"display_position":"bannertop",
"id":"9","ordering":"0"
}]}

allan

Which approach did you take - the client or server-side implode/explode?

Either way, I don't think you would need array notation in the name option (name: "page_assignment[]",) since you are storing it just as a string.

I'd suggest using the client-side separator option I mentioned.

Allan

koniahin

I truly regressed, did not get as far as making a change to get the table view to display the name (or alias). First step is to get it to save without erroring next to tackle table display.

Not being sure I first dropped the [] square brackets.

name: "page_assignment",

This results in the same save error. I put them back then dropped multiple: true,. That makes it work as a single select.

koniahin

Any idea what might be causing the break? Getting multiple seems so simple yet something is awry. Syntax, a character?

allan

I think you need:

name: 'page_assignment',
multiple: true,
separator: ','

assuming the string you are storing in the database is using a comma as the value separator.

That way you don't need the explode / implode at the server-side.

Allan

koniahin

For reference the field is varchar(255);
| page_assignment | varchar(255) | YES | | NULL | |

I tried with/without separator and set the separator as a space " " also. No dice. Once I click to Edit, if I do nothing and click to Update, the window dismisses but nothing changes of course. If I select one or more from the list I see the same documented error.

Curious I went back to the demo install to 'examples/simple/simple.html' and made a similar mod:

    label: "Office:",
    name: "office[]",
    type:  "select",
    multiple: true,
    options: [
      { label: "Brussels", value: "1" },
      { label: "Edinburgh",  value: "2" },
      { label: "New York",  value: "3" },
      { label: "Tokyo",  value: "4" }
    ]
  }, {

Same problem, same error with or without separator. I'm thinking that it has something to do with the php. This is what I have:

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'boxes' )
->fields(
Field::inst( 'box_title' )->validator( 'Validate::notEmpty' ),
Field::inst( 'publish' ),
Field::inst( 'access' ),
Field::inst( 'page_assignment' ),
Field::inst( 'display_position' ),
Field::inst( 'id' ),
Field::inst( 'rowOrder' )->validator( 'Validate::numeric' )
)

allan

That modification wouldn't work with the demo since it isn't a string in the database (its an int since that is the expected value). You also don't have the separator option there and it isn't an array, so that shouldn't work there.

Can you show me an example of the data that you are loading from your database please (i.e. the JSON)?

Allan

koniahin

cache???

I occasionally notice that when I make changes such as the separator that they don't help. I come back a couple hours later and it's working. Maybe cache is in the mix, sounds strange. So anyway I went back to the demo sample page and it is now somewhat working with a defined separator. It saves, as does the live-ish problem.

Link to the demo: http://www.dottedi.biz/demo/code/public/datatables-editor/examples/simple/simple.html

Somewhat working - when I edit a row and select a couple items and save, it is not erroring. The table view shows the selected IDs. However if I reselect the same row to edit those ids/items are not showing up as selected with either demo or my project.

allan

Very possibly cache - that can confuse things a lot! ctrl-f5 would help to refresh the page from the server.

Yup - as I say, I would expect the demo to work for a multiple select since the data being stored isn't suitable for that. Moreover, the left join to get the label won't match anything in the joined table, which is why you only get the numbers after an edit.

Are you using a join to get the labels? Or are you just allowing free form input with a multiple separator?

Thanks,
Allan

koniahin

Due to cacheing I've gotten into the habit of adding versioning to css files, sometimes images - but don't usually see problems with text, queries, etc. Still...

About that demo, I've done nothing beyond what I've noted here. In this case the labels are hardcoded in the example html file just as you see. I looked at the ../../controllers/staff.php file, made no changes. What I see there is:

Field::inst( 'office' ),

koniahin

What next to get this working with the demo install?

allan

Well, as I said, the demo will not do exactly what you are looking for.

I'm not yet clear on if you want to store the labels into a text field, or references to another table?

Allan