Integration problem with Editor and Select2 plugin

Integration problem with Editor and Select2 plugin

Marek_OptimaMarek_Optima Posts: 32Questions: 7Answers: 0

I would like to integrate the select2 plugin with Editor but the following problems occur:

  1. What should the data of Office field be in order to Select2 plugin reads and inserts correct values?
  2. If you click on X in selected Tag, it does not cause removing this tag and the drop-down list stays open as well.
  3. After manually removing all picked tags, do nothing happens, I mean that no POST request is sent and there is still data in the field.

Below is an example (this is made according to your documentation) with the above problems.
http://webinsert.pl/bug_test/
I am asking for help in removing these problems. Thnx.

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734
    Answer ✓

    Not sure if this will solve all your issues but I would start with the following:

    You have this config:

    {
                        "label": "Offices:",
                        "name": "offices[]",   <<<change this
                        "type": "select2",
                        "options": [
                            {"label": "Tokyo", "value": "1"},
                            {"label": "London", "value": "2"},
                            {"label": "Francisco", "value": "3"},
                            {"label": "New York", "value": "4"},
                        ],
                        multiple: true,   <<<remove this
                        opts: {multiple: true,},
                    },
    

    Remove the multiple: true,. The one in opts should be used.

    Next you will want to represent the multi select fields as an array. Change the "name": "offices" to include [] as shown above.

    Then you will want to render the labels into the column by changing your column definition from this:

    {data: "offices"}
    

    to this:

    {data: "offices",
      render: '[, ].label',
      editField: 'offices[]' 
    }
    

    Try these changes to see if it helps. Report back any other issues or questions.

    Kevin

  • Marek_OptimaMarek_Optima Posts: 32Questions: 7Answers: 0

    Thanks for reply.
    The proposed changes have been applied but the integration is not still working well.
    New version (with changes) is available here:
    http://webinsert.pl/bug_test/
    Pls also find attached data that was sent by the server, perhaps there are some errors:

    {
      "data": [
        {
          "DT_RowId": "1",
          "first_name": "Tiger",
          "last_name": "Nixon",
          "position": "System Architect",
          "offices": [
            1
          ]
        },
        {
          "DT_RowId": "2",
          "first_name": "Cedric",
          "last_name": "Kelly",
          "position": "Senior Javascript Developer",
          "offices": [
            1,
            2
          ]
        },
        {
          "DT_RowId": "3",
          "first_name": "Ashton",
          "last_name": "Cox",
          "position": "Junior Technical Author",
          "offices": [
            1,
            2
          ]
        }
      ]
    }
    

    Any further suggestions will be appreciated.

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    I wonder if the problem is that your options values are strings but in your data they are integers:

                       "options": [
                            {"label": "Tokyo", "value": "1"},
                            {"label": "London", "value": "2"},
                            {"label": "Francisco", "value": "3"},
                            {"label": "New York", "value": "4"},
                        ],
     ```
    
    See if changing the options to integers helps:
    
    
                   "options": [
                        {"label": "Tokyo", "value": 1},
                        {"label": "London", "value": 2},
                        {"label": "Francisco", "value": 3},
                        {"label": "New York", "value": 4},
                    ],
    

    ```

    Doesn't seem like any of the fields that are inline edited are submitted. Maybe change this:

               // Activate an inline edit on click of a table cell
                $('#example').on('click', 'tbody td:not(:first-child)', function (e) {
                    editor.inline(this);
                });
    

    to:

               // Activate an inline edit on click of a table cell
                $('#example').on('click', 'tbody td:not(:first-child)', function (e) {
                    editor.inline(this, {
                       onBlur: 'submit'
                    } );
                });
    

    Kevin

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin
    Answer ✓

    The data being sent back by the server for the offices array is just an array of indexes:

          "offices": [
            1
          ]
    

    So the initial issue is in the DataTable where you are using:

                        {
                            data: "offices",
                            render: '[, ].label',
    

    i.e. it is trying to display a label property from the offices array - that results in nothing since there is no label field.

    If you have a look at this example you'll be able to see that the data contains both the id and the label (in that case called name). If you can add the label into an object in the array, that will go a long way to resolving this. You should also then use offices[].id in the Editor field name.

    Regards,
    Allan

  • Marek_OptimaMarek_Optima Posts: 32Questions: 7Answers: 0

    Thank you for your help.
    I have applied your comments, unfortunately they do not work, maybe I'm doing something wrong. Thus, I would like to ask you to look at the attached interactive example below so you can make your own changes to check if they work.
    Hopefully, in this way, we will find a solution sooner.
    https://jsfiddle.net/yg3ekdbu/14/

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734
    Answer ✓

    When clicking on the Office column you are getting the following error:

    Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11
    

    I updated your Office column config in Datatables with the editField option:

                        {
                            data: "offices",
                            editField: "offices[].id",
                            render: '[, ].label',
    
                        }
    

    https://jsfiddle.net/xg5x528a/

    It seems to work better. It pulls up the list of options and allows for changes. It appears to submit when exiting the field. See if this change works in your environment.

    Kevin

  • Marek_OptimaMarek_Optima Posts: 32Questions: 7Answers: 0

    Yes, it works much better now. Thank you for your assist.
    It seems that two of the three problems are solved ( I mean 1 and 3).

    Please look again at the second problem that remains.
    2. If you click on X in selected Tag, it does not cause removing this tag and the drop-down list stays open as well.
    Any tips?

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    Are you trying this only in the fiddle or in an environment where the ajax request will get the proper response?

    If only in the fiddle then its likely due to the ajax response being {}.

    What is the request and response in your environment?

    Kevin

  • Marek_OptimaMarek_Optima Posts: 32Questions: 7Answers: 0

    Thank you for the next tip.
    It turned out that there is a slightly different error in my environment.
    The POST request was not being sent back to the server after clicking on the X in the Tag at all.
    After testing, it came out that if KeyTable extension is used, it causes the problem.
    If KeyTable extension was removed, the POST request was sent to server.
    But the KeyTable extetion must be used if we want to use X in selected Tag to close.
    As result this, it still does not cause removing this tag and the drop-down list stays open as well.

    I have placed this change in the attached example:
    https://jsfiddle.net/xg5x528a/6/

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin
    Answer ✓

    I don't think it is specifically KeyTable that is causing the problem, but rather inline editing with Select2's tags mode in general: https://jsfiddle.net/xg5x528a/7/ .

    I've just made a couple of little changes to the Select2 integration plug-in in the fiddle and it seems to work okay now: https://jsfiddle.net/xg5x528a/8/ . I think the issue was that Select2 is doing a stopPropagation() on the clear element, so I've added a check specifically for that element.

    Allan

  • Marek_OptimaMarek_Optima Posts: 32Questions: 7Answers: 0

    Thnx for your next answer but
    pls note that in this example (https://jsfiddle.net/xg5x528a/7/) a POST request is working well after clicking on X in the TAG to close, but in this second one (https://jsfiddle.net/xg5x528a/8/)
    does not any more. In spite of all, we believe that there is something wrong with keyTable extention, as proof of this we send two examples below

    1. An example in which there is inline edition but without a keytables extension:
      https://jsfiddle.net/Lv6q63yc/1/
      https://i.imgur.com/00cliAX.png
      A screenshot was made immediately after clicking X on the TAG and the removal request was not sent.

    2. An example in which was used keyTables ext. for row (linear) editing:
      https://jsfiddle.net/4hxzvprd/
      https://i.imgur.com/rU7Svb1.png
      A screenshot was made immediately after clicking X on the TAG and the removal request was not sent.

    Could you be so kind as to consider our above observations. Thnx.

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin
    Answer ✓

    but in this second one (https://jsfiddle.net/xg5x528a/8/) does not any more.

    It does appear to for me in chrome. You need to click outside the input element, since that still has focus (e.g. if you wanted to clear more than one tag).

    Allan

  • Marek_OptimaMarek_Optima Posts: 32Questions: 7Answers: 0

    Now is working well. Thank you for a such quick response and professional help. Great respect. It rarely happens. Regards.

  • adrianbadrianb Posts: 8Questions: 1Answers: 0

    Hi allan,
    I have issue in select2 dropdown. During the editing stage it never pick the current table value to the editor form. It is not always but randomly happened.

    Let me have your thought?

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    @adrianb - Can you give me a link to the page so I can take a look, understand and debug the issue please.

    Allan

  • adrianbadrianb Posts: 8Questions: 1Answers: 0

    Hi Allan,
    Can you provide me the email address so that I can send you the html.

    Unfortunately still it is not online.

    Thanks,
    Sanjay

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @adrianb ,

    You can send a private message on the forum here - Allan will get that.

    Cheers,

    Colin

  • adrianbadrianb Posts: 8Questions: 1Answers: 0

    Hi Colin,

    Let me know how do I send a folder or a file to him. The web address is not visible to the outside world.

    Cheers,
    Adrian

  • adrianbadrianb Posts: 8Questions: 1Answers: 0

    Hi Allan,

    https://drive.google.com/open?id=1enlQ-yv5qGdD1XRhdFJ0OSuNwB8cwnRh
    Hope this one help

    Cheers,
    Adrian

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    Thanks for the link, but I'd need the data the table is loaded with as well. Ideally if you could send me a link to a page showing the issue that will make the debugging much easier.

    You can send me a private message by clicking my forum user name above and then "Send message".

    Allan

This discussion has been closed.