OnPageDisplay

doctorjnupe

I'm using multiple onPage Displays on a page. They are all in tabs. The first two work, but the third is not displaying the form. I changed the names and css.

#container {
    display: flex;
    align-items: stretch;
}

#table-container {
    box-sizing: border-box;
    width: 55%;
    padding: 0 1em;
}

#form-container {
    box-sizing: border-box;
    width: 45%;
    padding: 0 1em;
}
#conmon-container {
    display: flex;
    align-items: stretch;
}

#conmon-table-container {
    box-sizing: border-box;
    width: 55%;
    padding: 0 1em;
}

#conmon-form-container {
    box-sizing: border-box;
    width: 45%;
    padding: 0 1em;
}
#stig-container {
    display: flex;
    align-items: stretch;
}

#stig-table-container {
    box-sizing: border-box;
    width: 55%;
    padding: 0 1em;
}

#stig-form-container {
    box-sizing: border-box;
    width: 45%;
    padding: 0 1em;
}

Any ideas? I'm not getting any error. Everything displays correct, but the form will not display.

allan

I'm not clear on how this releases to DataTables, as there is no DataTables specific code in your CSS above. Perhaps you can link to a test case showing the problem? If its a generic CSS issue though, you'd be best asking on StackOverflow or similar.

Allan

doctorjnupe

Basically, the issue is that I have implemented 3: OnPageDisplay, onConMonDisplay and onStigDisplay

// DO NOT REMOVE : GLOBAL FUNCTIONS!
  function onPageDisplay ( elm ) {
    var name = 'onPage'+Math.random();
    var Editor = $.fn.dataTable.Editor;
    var emptyInfo;

    Editor.display[name] = $.extend( true, {}, Editor.models.display, {
        // Create the HTML mark-up needed the display controller
        init: function ( editor ) {
            emptyInfo = elm.html();
            return Editor.display[name];
        },

        // Show the form
        open: function ( editor, form, callback ) {
            elm.children().detach();
            elm.append( form );

            if ( callback ) {
                callback();
            }
        },

        // Hide the form
        close: function ( editor, callback ) {
            elm.children().detach();
            elm.html( emptyInfo );

            if ( callback ) {
                callback();
            }
        }
    } );

    return name;
  }

  var editor; // use a global for the submit and return data rendering in the examples

  $(document).ready(function() {
    var current_system = <?php echo $current_system ?>;
    var systemid = "<?php echo $systemid ?>";
    editor = new $.fn.dataTable.Editor( {
        "ajax": "server/baseline_nist.php",
        "table": "#datatable-table-sapnist",
        "display": onPageDisplay( $('#form-container') ),
        "fields": [ {
              ... 
        ]}
     });
    var table = $('#datatable-table-sapnist').DataTable({
      pageLength: 25,
        ajax: {
            url: "server/baseline_nist.php",
            type: "POST",
            data: {current_system: current_system, systemid: systemid
            }
        },
        columnDefs: [
          { "width": "15%", "targets": 1 },
          { "width": "35%", "targets": 3 },
          { "width": "15%", "targets": 4 }
        ],
        rowCallback: function(row, data, index) {
          if(data.priority_control == "X") {
            $('td:eq(1)', row).addClass('highlight');
          }
        },
        columns: [
          ...
        ],
        select: true,
        pagingType: 'simple',
        lengthChange: false
    });
    table
        .on( 'select', function ( e, dt, type, indexes ) {
            editor.edit( indexes, {
                title: 'Edit row',
                buttons: [
                    'Save changes',
                    {
                        label: 'Delete',
                        fn: function () {
                            editor
                                .remove( indexes, false )
                                .submit();
                        }
                    }
                ]
            } );
        } )
        .on( 'deselect', function () {
            editor.close();
        } );

    $('#form-container').on( 'click', 'p.add-new', function (e) {
        e.preventDefault();

        editor.create( {
                title: 'Create new row',
                buttons: [
                    'Save',
                    {
                        label: 'Cancel',
                        fn: function () {
                            editor.close();
                        }
                    }
                ]
        } );
    } );
  });

The above Works perfectly!

function onConMonDisplay ( elm ) {
    var name = 'onConMon'+Math.random();
    var Editor = $.fn.dataTable.Editor;
    var emptyInfo;

    Editor.display[name] = $.extend( true, {}, Editor.models.display, {
        // Create the HTML mark-up needed the display controller
        init: function ( editors ) {
            emptyInfo = elm.html();
            return Editor.display[name];
        },

        // Show the form
        open: function ( editors, form, callback ) {
            elm.children().detach();
            elm.append( form );

            if ( callback ) {
                callback();
            }
        },

        // Hide the form
        close: function ( editors, callback ) {
            elm.children().detach();
            elm.html( emptyInfo );

            if ( callback ) {
                callback();
            }
        }
     });

    return name;
  }
  var editors; // use a global for the submit and return data rendering in the examples

  $(document).ready(function() {
  var current_system = <?php echo $current_system ?>;
  var systemid = "<?php echo $systemid ?>";
  editors = new $.fn.dataTable.Editor({
      "ajax": "server/baseline_conmon.php",
      "table": "#datatable-table-conmon",
      "display": onConMonDisplay( $('#conmon-form-container') ),
      "fields": [ {
         ...
        }]
   });
    var table = $('#datatable-table-conmon').DataTable( {
        autoWidth: true,
        ajax: {
            url: "server/baseline_conmon.php",
            type: "POST",
            data: {current_system: current_system, systemid: systemid
            }
        },
        columns: [
          ...
        ],
        select: true,
        pagingType: 'simple',
        lengthChange: false
    });
    table
        .on( 'select', function ( e, dt, type, indexes ) {
            editors.edit( indexes, {
                title: 'Edit row',
                buttons: [
                    'Save changes',
                    {
                        label: 'Delete',
                        fn: function () {
                            editors
                                .remove( indexes, false )
                                .submit();
                        }
                    }
                ]
            });
        })
        .on( 'deselect', function () {
            editors.close();
         });

    $('#conmon-form-container').on( 'click', 'p.add-new', function (e) {
        e.preventDefault();

        editors.create( {
                title: 'Create new row',
                buttons: [
                    'Save',
                    {
                        label: 'Cancel',
                        fn: function () {
                            editors.close();
                        }
                    }
                ]
        });
     });
  });

The above works, but does not pop back up to the top of the form on row select.

function onStigDisplay ( elm ) {
  var name = 'onStig'+Math.random();
  var Editor = $.fn.dataTable.Editor;
  var emptyInfo;

  Editor.display[name] = $.extend( true, {}, Editor.models.display, {
      // Create the HTML mark-up needed the display controller
      init: function ( editor ) {
          emptyInfo = elm.html();
          return Editor.display[name];
      },

      // Show the form
      open: function ( editor, form, callback ) {
          elm.children().detach();
          elm.append( form );

          if ( callback ) {
              callback();
          }
      },

      // Hide the form
      close: function ( editor, callback ) {
          elm.children().detach();
          elm.html( emptyInfo );

          if ( callback ) {
              callback();
          }
      }
  } );

  return name;
}
  var editor; // use a global for the submit and return data rendering in the examples

  $(document).ready(function() {
    var current_system = <?php echo $current_system ?>;
    var systemid = "<?php echo $systemid ?>";
    editor = new $.fn.dataTable.Editor( {
        "ajax": "server/baseline_testplan.php",
        "table": "#datatable-table-stigs",
        "display": onStigDisplay( $('#stig-form-container') ),
        "fields": [ {
              ...
        ]
     });
    var table = $('#datatable-table-stigs').DataTable( {
      pageLength: 25,
      ajax: {
          url: "server/baseline_testplan.php",
          type: "POST",
          data: {current_system: current_system, systemid: systemid
          }
      },
      columns: [
         ...
      ],
      select: true,
      pagingType: 'simple',
      lengthChange: false
  });
  table
      .on( 'select', function ( e, dt, type, indexes ) {
          editor.edit( indexes, {
              title: 'Edit row',
              buttons: [
                  'Save changes',
                  {
                      label: 'Delete',
                      fn: function () {
                          editor
                              .remove( indexes, false )
                              .submit();
                      }
                  }
              ]
          } );
      } )
      .on( 'deselect', function () {
          editor.close();
      } );

  $('#stig-form-container').on( 'click', 'p.add-new', function (e) {
      e.preventDefault();

      editor.create( {
              title: 'Create new row',
              buttons: [
                  'Save',
                  {
                      label: 'Cancel',
                      fn: function () {
                          editor.close();
                      }
                  }
              ]
      });
    });
  });

The above correctly displays the table and shows that the row is selected, but it fails to display the form.

The CSS should make more sense within this context now.

doctorjnupe

@allan Any updates on this? I just need a little direction. I can figure it out from there.

allan

Can you link to the page so I can help to debug it please? There is more code than I'm able to parse into my head there, and I think some context is missing, such as the HTML for the page, which is referenced in the display controllers.

Thanks,
Allan

doctorjnupe

@allan I can link to the source but not a working page. Would that help?

doctorjnupe

@allan what would I have to do to get a screen share. Do I need to purchase support credits? I am willing to do whatever it takes to get this fixed.

allan

Since it is in tabs, my guess is that

$('#stig-form-container')

is not resolving to be anything (no elements found - that would happen if the element was not in the document, which some tab implementations will do).

What I would suggest is that at the top of the document.ready for that Editor is you do:

console.log( $('#stig-form-container').length );

What does the console show?

For screenshare support, yes we could do that with the support options.

Thanks,
Allan