select control initialisation

select control initialisation

LapointeLapointe Posts: 430Questions: 81Answers: 4
edited October 2020 in Free community support

@allan
hi all
I'd like to know what is the DataTables\Editor\Options_manualAdd Array [0]
Is it a way to add datas in select options list ?

Thanks

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Not sure what DataTables\Editor\Options_manualAdd Array [0] is but the field().update() API is used to update the options.

    Kevin

  • LapointeLapointe Posts: 430Questions: 81Answers: 4
    edited October 2020

    Hi kevin. :)
    Thanks.
    In fact I'd like to "reload" option list content whith same parameters as defined in the inst:: opts (table, label, id...).
    Actually I do it calling ajax from js, but like to know if there is a way to"reload list content" in php

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    Actually I do it calling ajax from js, but like to know if there is a way to"reload list content" in php

    That is the way, right? I mean without being called PHP code doesn't get executed.

    You can also use ajax.reload() which will reload the options as well: https://datatables.net/reference/api/ajax.reload()

    Here is a lot more on different ways to retrieve options from the server.
    https://datatables.net/forums/discussion/comment/180097/

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    hi @rf1234 @allan

    I do test and test and....

    If I use 'normal' select field type, the editor.field().reload() works fine.
    With selectize control not

    I do reload list content at editor preOpen regarding current recettes.ID_Utilisateur from table row selected.
    ID_Client is a select
    ID_Situations is a selectize

            editor         
                            .on( 'preOpen', function () {
                                    $.ajax ({
                                        url: 'getdata.php',
                                        type: 'POST',
                                        dataType: 'JSON',
                                        data: {
                                            U : editor.get('recettes.ID_Utilisateur'),
                                            labelField:     'concat(Nom , \' \', Prenom)',
                                            Opt: 'clients'
                                        },
                                        success: function ( JSON ) {
                                            editor.field('recettes.ID_Client').update( JSON )
                                        }
                                    })
                                    
                                    $.ajax ({
                                        url: 'getdata.php',
                                        type: 'POST',
                                        dataType: 'JSON',
                                        data: {
                                            U : editor.get('recettes.ID_Utilisateur'),
                                            Opt: 'situations'
                                        },
                                        success: function ( JSON ) {
                                            editor.field('recettes.ID_Situation').update( JSON )
                                        }
                                    })
                                    
    

    When editor form is diplayed, both the select AND Selectize list contain valid options list, but Selectize field value is unset.
    So I close editor and open it again (for the same row) with succèss... values are now ok.

    First open

    Second one

    A little bit strange.

    Does somebody can help please ?

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    If I use 'normal' select field type, the editor.field().reload() works fine.
    With selectize control not

    There is a bug in the selectize plugin. It is known to the team. Don't know what the status is. Please take a look:
    https://datatables.net/forums/discussion/comment/151706/#Comment_151706

    If you want to use this with selectize you can't use field().update() because of that bug. What you would need to do is to dynamically drop and add Editor fields - and make sure they are in the right location.
    https://editor.datatables.net/reference/api/clear()
    https://editor.datatables.net/reference/api/add()

    In this example I have two selectize fields whose options need to be updated dynamically. Since I can't use field().update() my code looks like this:

    From the Editor definition:

    fields: [
        }, {
            label: lang === 'de' ? 'Vertragspartner:' : 'Partner:',
            name:  "ctr.ctr_partner"
        }, {
            label: lang === 'de' ? 'Abteilungsauswahl:' : 'Department selection:',
            name:  "ctr_govdept[].id" //removed and added dynamically
        }, {
            label: lang === 'de' ? 'Labels:' : 'Labels:',
            name:  "ctr_label[].id"   //removed and added dynamically
        },  {
    ....
    

    On init edit I remove and add the field dynamically to update the options.

    editor
        .on('initEdit', function ( e, node, data, items, type ) {
            this.clear("ctr_govdept[].id"); 
            this.add( {
                label: lang === 'de' ? 'Abteilungsauswahl:' : 'Department selection:',
                name: "ctr_govdept[].id", 
                type: "selectize",
                options: ctrGovdeptOptions,
                opts: {
                    create: false,
                    maxItems: null,
                    openOnFocus: true,
                    allowEmptyOption: false,
                    placeholder: lang === 'de' ? 'Bitte wählen Sie eine oder mehrere Abteilungen' : 'Please select one or more departments',
                }
            }, "ctr.ctr_partner" );
            this.clear("ctr_label[].id"); 
            this.add( {
                label: lang === 'de' ? 'Labels:' : 'Labels:',
                name:  "ctr_label[].id", 
                type: "selectize", 
                options: ctrLabelOptions,
                opts: {
                    create: true,
                    createFilter: function(val) {
                      return ( isNaN(val) || val.indexOf('.') > -1 || val.indexOf('-') > -1 ) ? val : false;
                    },
                    maxItems: null,
                    openOnFocus: true,
                    allowEmptyOption: false,
                    placeholder: lang === 'de' ? 
                        "Bitte Labels wählen oder hinzufügen" : 
                        "Please select labels or add some",                
                    render: {
                        option_create: function(data, escape) {
                            var add = lang === 'de' ? "Neu: " : "Add ";      
                            return '<div class="create">' + add + '<strong>'
                                   + escape(data.input) + '</strong>&hellip;</div>';
                        }
                      }
                    }
            }, "ctr_govdept[].id" );
        })
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    I've added this thread to the issue that @rf1234 pointed you towards - unfortunately, there's not an update I'm afraid, it's still in the backlog - but I'll report back here when there's progression. The workaround above is a good way to go in the meantime.

    Colin

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    hi @colin @rf1234

    The sample seem to work, but

    options: ctrGovdeptOptions,
    

    From where do you set ctrGovdeptOptions, according this is (for me) an ajax call to get this options list

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited November 2020

    In my case the variable "ctrGovdeptOptions" is a global variable that I fill using an ajax call "on select" of the record to be edited. But that is my use case. Yours is different of course. Good luck.

    For the sake of completeness here is the code:

    table
        .on ( 'select', function (e, dt, type, indexes) {
            var selected = dt.row( {selected: true} );
            if (selected.any()) {
                $.ajax({
                    type: "POST",
                    url: 'actions.php?action=getCtrGovdeptOptions',
                    data: {
                        ctr_id: selected.data().ctr.id
                    },
                    dataType: "json",
                    success: function (data) {   
                        ctrGovdeptOptions = data;
                    }
                });
            }
        })
    

    And the php function returning the required array of label - value pairs (that is using my own db handler - yours will be different):

    function getCtrGovdeptOptions($ctrId, &$dbh) {
        
        $dbh->query('SELECT DISTINCT a.dept_name AS label, a.id AS value 
                       FROM ctr_govdept a
                 INNER JOIN ctr_has_ctr_govdept b           ON a.id = b.ctr_govdept_id
                      WHERE b.ctr_id = :ctrId 
                            UNION
                    SELECT DISTINCT a.dept_name AS label, a.id AS value 
                       FROM ctr_govdept a
                 INNER JOIN user_has_selected_ctr_govdept b ON a.id = b.ctr_govdept_id
                 INNER JOIN ctr_govdept_has_user_complete c ON a.id = c.ctr_govdept_id
                      WHERE b.user_id = :userId
                        AND c.user_id = :userId
                   ORDER BY 1 ASC');
        $dbh->bind(':ctrId', $ctrId); 
        $dbh->bind(':userId', $_SESSION['id']); 
        
        return $dbh->resultsetAssoc();     
    }
    

    And this is how I call it in my controller:

    ....
    case "getCtrGovdeptOptions":
       echo json_encode( getCtrGovdeptOptions(filter_input(INPUT_POST,'ctr_id'), $dbh) );
       break;
    
  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Thanks a lot @rf1234
    I was trying to set the ajax call in replacement of you variable...

    editor
        .on('initEdit', function ( e, node, data, items, type ) {
            this.clear("ctr_govdept[].id");
            this.add( {
                label: 'Department selection:',
                name: "ctr_govdept[].id",
                type: "selectize",
                options: function(data){
                       $.ajax({
                           type: "POST",
                           url: 'actions.php?action=getCtrGovdeptOptions',
                           data: {
                               ctr_id: data.ctr.id
                           },
                           dataType: "json",
                           success: function (data) {  
                               return data;
                           }
                       });
                  },
                opts: {
                    create: false,
                    maxItems: null,
                    openOnFocus: true,
                    allowEmptyOption: false,
                    placeholder: 'Please select one or more departments',
                }
            }, "ctr.ctr_partner" );
    
    

    B)

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    hi @allan @rf1234 @all

    I'm back for this point... Did you have a look ?

    After adding a new option (postcreate event in php), then
    doing ajax call on postcreate in js, and on opening editor no value is displayed, but value seem to be ok, as if I save again the correct (last created) option is yet selected at reopen.

    Closing editor and reopening... everything is ok...

    Perhaps ajax refresh call is misplaced or ?

    sample here http://test.appinfo.fr (using user / pass as : NUJBD6DE / NUJBD6DE)

    Can you help please ?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Is this resolved along with this thread?

    Allan

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Hi @allan

    Yesterday, afrer the miracle, I did work on other point in the selectize control...

    For explanation, each row in table recettes has a owner ID_Utilisateur.

    When accessing as admin, I want to see all recettes rows and edit them if needed.

    So, as you can see, table prestations, situations ... have for each row a owner too (ID_Utilisateur) that can be null for global use.

    When editing a recettes row, I want just to be abble to select prestations, situations, ... having the same owner than recettes row or no owner (global)

    in this sample, I want to see in selectize controls only the depending available values

    When creating a recettes row, I want just to be abble to select prestations, situations, ... having the same ID_Utilisateur than this selected in editor or no owner (global)

    so I use an OnChange event on the field ID_Utilisateur (visible or not depending connected user level).

    When editing existing row, the problem with selectize control is the value is not correct at editor opening...
    If I select another row in table (and user differ), then, when opening editor, selectize control option list contain both valid options AND the previous selected one... witch must not be available (if not global) for recettes row owner

    So if click on cancel, the comparision from editor values and saved values (at on open event) differ...

    Opening again the same row in editor, everything is ok...

    When creating a new row, the option list is correctly defined on onchange(ID_Utilisateur)...

    So, On create mode() I set the onchange event to reload selectize option list at editor preopen event

    .on( 'preOpen', function () {
            if(editor.mode()=='create'){
                    $('select', editor.field('recettes.ID_Utilisateur').node()).change(function() {
                $.ajax ({
                        url: 'getdata.php',
                    method: 'GET',
                    dataType: 'JSON',
                    data: {
                        U:editor.get('recettes.ID_Utilisateur'),
                        labelField:'concat(`Nom`, \' \', `Prenom`)',
                        notNull:'1',
                        Opt:'clients'
                    },
                    success: function ( JSON ) {
                        editor.field('recettes.ID_Client').update( JSON )
                    }
                });
    

    AND for edit mode() I use table.onselect event to reload option list AND I set control values using data from current selected row

    table
        .on( 'select deselect', function (e) {
                var s = table.rows( { selected: true } );
            if (s.count() == 1 ) {
                var v = s.data()[0];
                $.ajax ({
                    url: 'getdata.php',
                    method: 'GET',
                    dataType: 'JSON',
                    data: {
                        U:v.recettes.ID_Utilisateur,
                        labelField:'concat(`Nom`, \' \', `Prenom`)',
                        notNull:'1',
                        Opt:'clients'
                    },
                    success: function ( JSON ) {
                        editor.field('recettes.ID_Client').update( JSON )
                    }
                });
        editor.field('recettes.ID_Client').set(v.recettes.ID_Client);
                                        
    

    Hope there is another solution, but I do not find it...

    If somebody has an idea...

    Thanks

    Best regards
    Bob

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Hi Bob,

    My apologies - I lost track of this thread in the sea of browser tabs I have!

    Could you possibly try it using just a select input please? Selectize will probably add a few complications, and I think it would be worth trying to get it to work with the base select before enhancing it.

    If it doesn't work with select can you give me a link to the page so I can trace it through?

    Thanks,
    Allan

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Hi @allan

    Thanks for your time.

    In fact problem is (was) in editor sample here.

    The OnChange event is fired after open event, so values saved are not yet correct.
    Using on opened in place of on open do the job...

    Thanks again

    Best regards
    Bob

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Hi @allan

    Tofday I work a little bit and find (perhaps) precision about this problem.

    I use onchange for ID_User that refresh the options list for all controls AND
    I use onchange for ID_ActionFamily that refresh options list for the Action control

    When editor display (open or opened), the ajax is a little bit slow and the Action option list ise set (visualy) after a few moment... So the saved editor values are not yet correct and at close they are different

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Ah - did you try the select input? We have some code in Editor's core that allows it to operate with values that aren't yet in the list of options (it remembers the value and then selects it if new options are loaded). That isn't present in the Selectize integration.

    Allan

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Hi @allan
    do try with select input and get work...
    Events where cascades and ajax not set to sync... So I move one onchange event and now I get better result

    I'm very interrested for the notinlist if possible in editor... Do you have some doc about that

    Regards

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Hi,

    Do you mean, documentation on how the select works with the values that aren't in the list? If so, then no, I'm sorry I don't. You could however take a look at the source - search for:

            // Attempt to set the last selected value (set by the API or the end
            // user, they get equal priority)
    

    the parameter there is checking if there was a value set that is now in the options and using that. The same sort of thing could be done in the Selectize integration.

    Allan

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Hi @allan
    Thanks...

    I'll try to find first the source and then have a look in but
    I'm afraid to ignore where to search exactly

    If can explain or give a link to a sample should be very nice....

    Thanks

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Hi @allan

    Hope you are fine

    you tell me to have a look in source for select notinlist values

    We have some code in Editor's core that allows it to operate with values that 
    aren't yet in the list of options (it remembers the value and then selects 
    it if new options are loaded). That isn't present in the Selectize integration.
    
    Do you mean, documentation on how the select works with the values 
    that aren't in the list? 
    If so, then no, I'm sorry I don't. You could however take a look at the source - 
    search for:
    // Attempt to set the last selected value (set by the API or the end
    // user, they get equal priority)
    the parameter there is checking if there was a value set that is now in the options 
    and using that. The same sort of thing could be done in the Selectize integration.
    

    Can you please tell me where I'll can finf these source to have a look ?

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

    That line is in the Editor source file (js/dataTables.editor.js) , roughly around line 8700 ish (depending on the release!),

    Colin

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Tks Colin

    Bob

This discussion has been closed.