selectize on editor form

crcucb · October 30

I just started to work with selectize in my editor form to allow searching on various fields to find an address. The field in the editor form doesn't appear to be doing anything and I am not seeing any errors. I am wondering if it's a config issue.

I downloaded the plugins from https://editor.datatables.net/plug-ins/field-type/editor.selectize. Below is how I am initializing in my header:

<head>
         <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <title>Residents</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
     
        <link href="css/datatables.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/generator-base.css">
    
                <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">


        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.9.0/css/selectize.css">  
                <link rel="stylesheet" type="text/css" href="css/editor.selectize.css">

            <script src="js/datatables.min.js"></script>
            <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
                <script src="https:////cdnjs.cloudflare.com/ajax/libs/selectize.js/0.9.0/js/standalone/selectize.js"></script>
            <script type="text/javascript" charset="utf-8" src="js/editor.selectize.js"></script>

            <script type="text/javascript" charset="utf-8" src="js/Residents_tbl_test.js" defer></script>
        <script type="text/javascript" charset="utf-8" src="js/ellipsis.js"></script>   
          <link rel="stylesheet" href="./css/navbar.css">
      
</head>

Below is the configuration under the editor:

 {
            label: 'Find Address:',
            name: 'Residents.addressaid',
            type: 'selectize',
            opts: {
                valueField: 'addressaid',
                labelField: 'Full_Address',
                searchField: 'Full_Address',
                create: false, // Allow creating new options
                load: function(query, callback) {
                    if (!query.length) return callback(); // Don't load if no query
                    $.ajax({
                        url: './php/Addresses_Ajax_test.php', // Your API endpoint for lookup.
                        
            
                        data: { q: query },
                        type: 'GET',
                        error: function() {
                            callback();
                        },
                        success: function(res) {
                            callback(res.data); // Assuming your API returns an array of objects
                        }
                    });
                }
            }
        },

I believe Addresses_ajax_test.php is working as it returns the following:
{"data":[{"AddressAID":17712,"Full_Address":"BALSAM ST 4251 APT 1","StreetName":"BALSAM ST","AddressNumber":4251,"Ward":12,"District":3,"IsProd":0},{"AddressAID":17713,"Full_Address":"BALSAM ST 423 (17713)","StreetName":"BALSAM ST","AddressNumber":423,"Ward":12,"District":3,"IsProd":0},{"AddressAID":17714,"Full_Address":"BALSAM ST 419 (17714)","StreetName":"BALSAM ST","AddressNumber":419,"Ward":12,"District":3,"IsProd":0},{"AddressAID":17715,"Full_Address":"BALSAM ST 413 (17715)","StreetName":"BALSAM ST","AddressNumber":413,"Ward":12,"District":3,"IsProd":0},{"AddressAID":17716,"Full_Address":"BALSAM ST 409 (17716)","StreetName":"BALSAM

rf1234 · October 31

I am using selectize a lot. And it works really great.

But: What is your problem? Could you please explain.

Here is a field that allows you to select from database values, but also create new values on the fly.

fields: [ {
        label: lang === 'de' ? 'Kontrahent:' : 'Counterparty:',
        name:  "contract.gov_manual_creditor_id", //render creditor name
        type: "selectize", 
        opts: {
            create: true,
            createFilter: function(val) {
              return ( isNaN(val) || val.indexOf('.') > -1 ) ? val : false;
            },
            maxItems: 1,
            openOnFocus: false,
            allowEmptyOption: false,
            placeholder: lang === 'de' ? 
                "Bitte Kontrahenten wählen oder hinzufügen" : 
                "Please select a Counterparty or add one",                
            render: {
                option_create: function(data, escape) {
                    var add = lang === 'de' ? "Neu: " : "Add ";      
                    return '<div class="create">' + add + '<strong>'
                           + escape(data.input) + '</strong>&hellip;</div>';
                }
              }
            },
    },

crcucb · October 31

Thank you for posting.
I am trying to use an Ajax call for the source/lookup but it doesn't appear to be firing, nor have I seen any errors and I can't interact with the editor field.

rf1234 · October 31

My field and its options also come from the server. This is my code on the server for the field above - if that helps.

Field::inst( 'contract.gov_manual_creditor_id' )
    ->validator( 'Validate::notEmpty', array('message' => $msg[0]) )
    ->options( Options::inst()
        ->table('gov_manual_creditor')
        ->value( 'id' )
        ->label( array('name', 'govdept_id') )    
        ->render( function ( $row ) { 
            if ($row['govdept_id'] > 0) {
                return 'Interne Abteilung: ' . $row["name"];
            }
            return $row["name"];
        } )
        ->order( 'govdept_id desc, name asc' )
        //where clause MUST be a closure function in Options!!!
        ->where( function($q) {
            $q ->where('gov_id', $_SESSION['gov_id']);
            $q ->where( function($r) {
                $r ->where('govdept_id', $_SESSION['govdept_id'], '!=');
                $r ->or_where('govdept_id', null);
            });
        } )
    ),

kthorngren · October 31

I don't use Selectize but you might want to look at this SO thread. Note that searchField is expected to be an array, see the docs. Not sure this is the issue though.

Have you debugged the this section of code to see what happens?

               load: function(query, callback) {
                   if (!query.length) return callback(); // Don't load if no query
                   $.ajax({

Possibly the query.length is 0 resulting in the return statement being executed and not executing the Ajax request.

Can you provide a link to a test case showing the issue so we can help debug?

Kevin

selectize on editor form

selectize on editor form

Answers

Howdy, Stranger!

Categories

DataTables

selectize on editor form

selectize on editor form

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables