Dynamic Bubble Editor updates

Mike Storey

I have a table, where the record "type" will need to influence the bubble editor. For a type "A" record I want to show fields 1,2,3,4 but for a type "B" record I want to show fields 3,6,7. When the user changes the type (via a "select" field in the bubble editor) I want to update the editor form to show/hide/float fields. To complicate things a bit further, there is a second select control on the form who's options need to change when the "type" changes as well. I'm pretty sure that could be done in CSS, but before I spent too much time learning CSS and experimenting I wanted to see if there was a better way, and if anyone could provide examples of how to do this or something similar.

allan

Sounds like a perfect use case for the new dependent() method in Editor 1.4. With that you can easily tell Editor what fields to show / hide based on the value of a field.

To complicate things a bit further, there is a second select control on the form who's options need to change when the "type" changes as well

dependent() will let you do that as well :-)

Regards,
Allan

Mike Storey

This looks great, but I'm having trouble figuring out where to put the dependent code. I've tried this:

var editor = new $.fn.dataTable.Editor( {
    "table": "#directive",
    "ajax": {
            url: "php/table.directive.php",
            type: "POST",
            data: function ( d ) {d.templateId = theTemplate;}
    },
    "fields": [
        {
            "label": "Type",
            "name": "directive.type",
            "type": "select",
            "dependent": function() {return setVisible( val, data, callback );}
        },
....

    function setVisible( val, data, callback ) {
        if (val === 'Insert') {
            return {
                show: [ 
                    "directive.selectColumns",
                    "directive.fromTables",
                    "directive.whereCondition"],
                    hide: [
                    "directive.idcollection",
                    "directive.fromValue",
                    "directive.toValue"]
            };
        } else if (val === 'ReplaceRow') {
            return {
                show: [ 

...

And as a follow up, Is there a way to change a field label in dependent? I have some fields that vary their meaning based on record type.

allan

dependent is an API method, not an initialisation option. Have a look at the examples at the bottom of the documentation page for examples showing how it is used.

Allan

Mike Storey

Ok I've tried this as well.... here's the complete .js file for the table in question, I'm still missing something, sorry to be a pain.

/*
 * Editor client script for DB table directive
 */

(function($){

$(document).ready(function() {
    var theTemplate=0;
    
    var editor = new $.fn.dataTable.Editor( {
        "table": "#directive",
        "ajax": {
            url: "php/table.directive.php",
            type: "POST",
            data: function ( d ) {d.templateId = theTemplate;}
        },
        "fields": [
            {
                name: "directive.idtemplate",
                type: "hidden",
                def: function () {return theTemplate ;}
            },
            {
                "label": "Type",
                "name": "directive.type",
                "type": "select",
            },
            {
                "label": "Description",
                "name": "directive.description",
                "type": "text",
            },
            {
                "label": "Insert From Collection",
                "name": "directive.idcollection",
                "type": "select",
            },
            {
                "label": "Select Columns",
                "name": "directive.selectColumns",
                "type": "textarea"
            },
            {
                "label": "From Tables",
                "name": "directive.fromTables",
                "type": "textarea"
            },
            {
                "label": "Where Condition",
                "name": "directive.whereCondition",
                "type": "textarea"
            },
            {
                "label": "From",
                "name": "directive.fromValue",
                "type": "text"
            },
            {
                "label": "To",
                "name": "directive.toValue",
                "type": "text"
            }
        ]   
    } );

    $('#directive').dataTable( {
        searching: false,
        paging: false,
        info: false,
        "orderFixed": [ 0, 'asc' ],
        "dom": "Tfrtip",
        "ajax": {
            url: "php/table.directive.php",
            type: "POST",
            data: function ( d ) {d.templateId = theTemplate;}
        },
        "columns": [
            { "data": "codesDtype.meaning"   },
            { "data": "directive.description" }
        ],
        "tableTools": {
            "sRowSelect": "os",
            "sRowSelector": 'td:first-child',
            "aButtons": [
                { "sExtends": "editor_create", "editor": editor },
                { "sExtends": "editor_edit",   "editor": editor },
                { "sExtends": "editor_remove", "editor": editor }
            ]
        }
    } );
    directiveTable = $('#directive').DataTable();

    $('#dirTemplate').on('templateSet', function( event, name, id ) {
        $('#dirTemplate').html( name ); 
        theTemplate = id;
        directiveTable.ajax.reload();
    }); 

    editor.dependent('directive.type', function ( val, data, callback ) {
        if (val === 'Insert') {
            return { 
                show: [ "directive.idcollection",
                            "directive.selectColumns",
                            "directive.fromTables",
                            "directive.whereCondition",
                            "directive.fromValue",
                            "directive.toValue" ] 
            };
        } else if (val === 'ReplaceRow') {
            return {
                show: [     "directive.selectColumns",
                            "directive.fromTables",
                            "directive.whereCondition"],
                    hide: [ "directive.idcollection",
                                "directive.fromValue",
                                "directive.toValue"]
            };
        } else if (val === 'ReplaceCol') {
            return {
                show: [     "directive.selectColumns",
                            "directive.fromTables",
                            "directive.whereCondition"],
                hide: [ "directive.idcollection",
                            "directive.fromValue",
                            "directive.toValue"]
            };
        } else if (val === 'ReplaceVal') {
            return {
                show: [     "directive.fromValue",
                            "directive.toValue"],
                hide: [ "directive.selectColumns",
                            "directive.fromTables",
                            "directive.whereCondition",
                            "directive.idcollection"]
            };
        }
    } );
        
} );

}(jQuery));

allan

Hi,

I've just read your comment in your other thread with a link to the page you are working on. If you look in the console in your browser you will see:

Uncaught TypeError: undefined is not a function

at the point where it called dependent().

That is because an old beta of Editor is being used which didn't include the dependent() method. If you could try updating to the 1.4.0 final release that would be great.

Thanks,
Allan

Mike Storey

I need to use the select "label" in my dependent callback, and the first parameter passed to the callback is the "value" of the select. I'm pretty sure there's an easy java script answer to my question, but how do I get the "label" from a bubble-editor select given the value?

I'm also still hoping you can tell me how to change a text field label in the dependent callback.

The callback function receives 3 parameters, the first being the "value" of the select (or other field being modified), the second is the data that will be sent with an ajax request, and the third is a callback but I didn't see any doc on what that was for.

Not that it's a huge bug, but I found that the following code would not work:

            return { 
                show: [ "directive.idcollection",
                            ....,
                            "directive.toValue" ]
            };

but this does work:

            return { 
                show: [ "directive.idcollection",
                            ...,
                            "directive.toValue" ],
                hide: []
            };

When I get a good break I'll start posting some examples to the documentation pages, I think I have a fairly broad range of content to contribute.

allan

how do I get the "label" from a bubble-editor select given the value?

Normally that isn't information that is required, so it isn't directly available, but you could do something like:

editor.field('myField').input().children(':selected').text();

I'm also still hoping you can tell me how to change a text field label in the dependent callback.

In the callback function simply call field().label() with the updated information you need. There is no option to update the labels in the returned JSON data, but you can certainly do it with the API.

the third is a callback but I didn't see any doc on what that was for.

It is stated in the dependent() documentation for the second parameter when used as a function:

A callback function that can be executed to update the form - the callback function takes a single parameter using the JSON format discussed above. This callback is provided for asynchronous actions, but it not required - a return value can be provided instead.

Allan