Select2 in Editor

johnblythe

Hey Allan,

I've got some hangups going on with select fieldtype turned into Select2 in Editor. Users are able to change the unit of measure (each, box, case, etc.) of their product's packaging. It initially displays as the two letter indicator (e.g. 'EA' for an 'each'), and then upon click kicks off the Select2 handling.

The field config in Editor is:

{
                label: "UOM",
                name: "uom",
                type:  "select",
                ipOpts: selectOptions
            },

the ipOpts object is filled in at the load of the page based off data brought in by PHP on view's load:

for (i in uomData) {
            selectOptions.push({label: uomData[i].uom, value: uomData[i].id});
        }

Upon click, when Editor jumps to the inline select box select2 is then init:

$(document).on('click', 'tbody td:not(:first-child :nth-child(2))', function(e) {
        editor.inline(this, {
            submitOnBlur: true
        });

        // kick off Select 2 hawtness
        if ($(this).find("select").length) {
            $(this).find("select").select2();
        }
    });

The problem:
I can select just fine and the data actually is sent of correctly. But when the postEdit row refresh occurs it seems to default to "EA" for the display, not what was actually chosen. using the get() method I can see the correct value that is not related to EA. Same thing goes for table.rows().data().

One last note on code that I'm thinking is relevant. There is a render option set for the uom field:

column.render = function(val) {
                for (j in selectOptions) {
                    if (selectOptions[j].label == val) {
                        return selectOptions[j].label
                    }
                }
                return 'EA';
            }

So I'm guessing that the default return 'EA' is what's causing the issue, but I can't understand why or how when it works fine on the initial load, so why not upon the update?

Thanks for any suggestions!

johnblythe

Just confirmed that last mentioned hunch, the return 'EA' is getting hit upon update because the val passed into render's function is the id value of what was selected instead of the text/label.

johnblythe

Another update:

I've tried getting around this issue by employing this:

column.render = function(val) {
                if (!isNaN(val)) {
                    $.each(selectOptions, function(i, el) {
                        if (el.value == val) {
                            return el.label;
                        }
                    })
                } else {
                    for (j in selectOptions) {
                        if (selectOptions[j].label == val) {
                            return selectOptions[j].label
                        }
                    }
                    return 'EA';
                }
            }

But doing so throws this DT error:

DataTables warning: table id=product-management - Requested unknown parameter > 'uom' for row 0. For more information about this error, please see
http://datatables.net/tn/4

I've used the console log to see that the values are being found correctly (and thus returned correctly), so I'm not certain what DT is now expecting that is different than when it initially is set up.

allan

Hi,

Could you confirm what the JSON reply to the submission from Editor is? It should contain a row property that contains the data for the DataTable to draw. That data should be in the same format as the data that was used to populate the table originally, so if the table is correctly drawing on load, and not after an edit, it suggests the row property is either missing or incomplete.

Allan

johnblythe

yup!

data: {
description: "Awesome",
id: "17475",
manufacturer: "Mine",
partNumber: "123456",
price: "30",
productLine: "Boxes",
uom: "6",
uomConversion: "10"
}

this is all correct as to my edit

allan

data: {

It should be row: {.

Allan

johnblythe

1) GAH!
2) Still no luck :\

object {
error: "",
fieldErrors: Array[0],
msg: "Success!",
result: true,
row: {
   description: "Last time",
   id: "17477",
   manufacturer: "Mine",
   partNumber: "Last-1234",
   price: "99",
   productLine: "best time",
   uom: "3",
   uomConversion: "6"
...
}

johnblythe

Not sure if it's relevant, but when I run console.log() on the render function I see that it counts up to the correct id before finding the key's text at which point it should return it, but then starts looping through all over again.

here's the code w the logs so you can see where I'm talking about:

column.render = function(val) {
                if (!isNaN(val)) {
                    $.each(selectOptions, function(i, el) {
                        console.log(i);
                        if (el.value == val) {
                            console.log(el.value);
                            console.log(el.label);
                            return el.label;
                        }
                    })
                } else {
                    for (j in selectOptions) {
                        if (selectOptions[j].label == val) {
                            return selectOptions[j].label
                        }
                    }
                    return 'EA';
                }
            }

I see it count 1, 2, 3 from the log(i) and then log 3 CA which is the UoM I'd selected. It then starts all over again and goes through the entire selectOptions array, logging 1-38 from the i being counted.

Helpful in diagnosing?

allan

Are you able to drop me a PM with a link to the page so I can take a look and debug it live? To send a PM, click my name above and then "Send message".

Thanks,
Allan

johnblythe

You bet.

Prepping a new deploy right now, actually. Let me get through that and then I'll get you access set up and sent over on my dev environment.

Thanks!