Disabling a field in child table?

stenberg

Hello, after much digging and experimenting I was able to link two independent tables (one to many) - users, and kids. In my case kids has a column 'parent' which is a direct foreign key back to users.

I added a button that when a user is clicked on will change the WHERE clause in the kid tables and successfully bring up a modal dialog of just the kids for the current parent. It looks something like this. Note the "ajax.php" is basically just being used here to save the parent id in the PHP session.

new $.fn.dataTable.Buttons(table, [
            {extend: "create", editor: editor},
            {extend: "edit", editor: editor},
            {extend: "remove", editor: editor},
            {
                extend: "selectedSingle",
                text: "Kids",
                action: function ( e, dt, node, config ) {
                       // debugger;
                        var data = table.rows('.selected').data()[0] ;
                        
                          $.post("/ajax.php", {action: "edUser", edUser: data.id})  // change session variable for parent
                            .done(function (data) {
                                
                                kidTable.ajax.reload( function(json) {
                                    document.getElementById('kidFrame').contentWindow.location.reload(true);
                                   dialog.dialog("open");  // open modal dialog - display the right kids
                                   
                                kidEditor.field('parent')
                                        .disable()
                                       .val(data.id) ;  

Everything works perfectly, except the last statement. I'm trying to change the field 'parent' to disabled, and setting the correct value (id of the parent). That never works. I know I have the right object because if I misspell 'parent' I get a JavaScript error. Yet the field remains enabled and no value is ever set.

I'm thinking that since I put this in the callback event of the reload it should work.

Any ideas appreciated!

allan

Hi,

Is the kidEditor inside the kidFrame which has just been reloaded? Or is it in the parent document?

If its in the frame (I'm assuming its an iframe) the document would still be reloading at that point I suspect (its an async action) and you would need to refer to kidEditor inside that frame's context (which would require it to be a global variable).

Allan

stenberg

Thanks this answer put me on the right track and I refactored the program a little. It now works perfectly. I eliminated the frame and just made it a div, This also made the slow window.reload() unnecessary also. I still had issues setting the value of the field, so I created an "open" event listener. So the code now looks like:

kidEditor.on('open', function (e, type) {
            // Type is 'main', 'bubble' or 'inline'
            //alert('Editor ' + type + ' event - parent: ' + kidParent);
            kidEditor.field('parent')
                    .set(kidParent).disable();
        });

And, for the parent button:

                extend: "selectedSingle",
                text: "Kids",
                action: function ( e, dt, node, config ) {
                       // debugger;
                        var data = table.rows('.selected').data()[0] ;

                          kidParent = data.id ;
                        
                          $.post("/ajax.php", {action: "edUser", edUser: data.id})
                            .done(function (data) {
                               
                                kidTable.ajax.reload( function(json) {
                                    
                                dialog.dialog("open"); 
                                    
                                }) ;

This all seems to work perfectly and now I get the expected behavior on one to many forms.

allan

Looks fantastic - thanks for posting back!

Allan