editor.hide() hide ALL fields WITHOUT animation

editor.hide() hide ALL fields WITHOUT animation

blabablabablabablaba Posts: 35Questions: 14Answers: 0
edited September 27 in Editor

Hi Allan,

Is there a way to use editor.hide() shorthand AND disable animation?

editor.hide() will hide ALL fields from a form
editor.show([fieldNames]) will show the required fields

editor.hide() triggers an animation by default. This is undesirable.

From the documentation, animation can be disabled by declaring a second parameter true|false. I am unclear on how to disable animation while hiding ALL fields WITHOUT declaring every field by name.

https://editor.datatables.net/reference/api/hide()
https://editor.datatables.net/reference/api/show()

These are my attempts and results:

Removes all fields, but animation is undesired:

        editor.hide()
        editor.show(['redirectUrl'])
        editor.create()

This works as desired, but it seems onerous just to access animation true|false

        editor.hide(['url','title','meta','httpCode_ID'],false)
        editor.show(['redirectUrl'])
        editor.create()

Doesn't work as field list won't accept null

        editor.hide(null,false)
        editor.show(['redirectUrl'])
        editor.create()

Doesn't work as an empty array results in no fields hidden:

        editor.hide([],false)
        editor.show(['redirectUrl'])
        editor.create()

I look forward to hearing from you.

Steve

Documentation update:

https://editor.datatables.net/reference/api/field().show()

Under Heading "Type", the heading is:

function field(…).hide( [ animate ] )

Shouldn't this be:

function field(…).show( [ animate ] )

I hope this helps.

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 6,526Questions: 0Answers: 1,122

    Hi @blabablaba ,

    One option is to disable the animation at the jQuery level with $.fx.off = true;, something like this here.

    Would that work?

    Thanks for the doc updates - I made those changes and that will be pushed when the website is next updated.

    Cheers,

    Colin

  • colincolin Posts: 6,526Questions: 0Answers: 1,122
    Answer ✓

    Ah, better still, just pass in undefined, see here.

  • blabablabablabablaba Posts: 35Questions: 14Answers: 0
    edited September 27

    Thanks @Colin! I had used 'undefined' instead of undefined. It works!

    In the code below, I'm using a Select2 to edit onChange.

    editor.submit() works well for this purpose.

    However, there are 2 options in the Select2 (301 and 307) which require a new editor form to open. The code below opens a new form.

    With the form open, a button submits ALL rows to the server, as opposed to a single row. I think I need to (somehow) pass the tr node into editor.edit()

    I'm having difficulty getting editor.edit() within the onChange function below to identify and submit ONLY the current row to the server. Any ideas?

    editor.field( 'httpCode_ID' ).input().on( 'change', function (e,d) {
    
        if ( !d || !d.editor ) {
          var httpCode_ID = editor.field( 'httpCode_ID' ).val()
          if(httpCode_ID == '301' || httpCode_ID == '307') {
            editor.hide(undefined,false)
            editor.show(['redirectUrl'])
            editor.edit(  )  // <--------------- SUBMITS EVERY ROW??
                .title( 'Set up redirect' )
                .buttons( 'Update redirect' )
                .open()        
          } else 
            editor.submit()  // <------------ SUBMITS CURRENT ROW ON CHANGE
        }
    } )
    
  • allanallan Posts: 50,737Questions: 1Answers: 7,581 Site admin

    Sorry - you can't do that with Editor as such. You'd need a second Editor instance for your inner edit. A single instance of Editor can only perform one CRUD action at a time.

    editor.edit( ) // <--------------- SUBMITS EVERY ROW??

    Yes, because you haven't given edit() a row selector.

    Allan

  • blabablabablabablaba Posts: 35Questions: 14Answers: 0
    edited September 27

    Hi Allan,

    Thank you for your reply. I think my code is doing a single CRUD action; It is EITHER editor.submit() row on change (if not 301,307) OR editor.edit(DT_RowID) to open a form

    I had tried to obtain the row selector using:

    editor.edit( table.row( $(this).parents('tr') ).data().DT_Row_ID )
    

    However, the above is undefined.

    Do you know how I might access the row ID from inside edit() ? Or am I breaking the rules and must use a second editor instance?

    I really appreciate some clarification. Many thanks

  • blabablabablabablaba Posts: 35Questions: 14Answers: 0
    edited September 28

    Hi Allan and Colin,

    I solved the problem (after a night sleep!)

    To access the DT_RowID from within Editor, I needed to use editor.modifier() and then navigate to the parent tr. It's been a good journey finding it out.

    The following forum post helped me:

    https://datatables.net/forums/discussion/30037/get-row-id-on-edit

    I note a comment from Allan "Edit - Having a method in Editor to get the ids of the rows being edited sounds sensible, I'll look into that"

    In light of Allan's comment, is my chosen approach the best way?

    My solution (in case it helps others) is here:

    editor.field( 'httpCode_ID' ).input().on( 'change', function (e,d) {
        if ( !d || !d.editor ) {
          var modifier = editor.modifier()
          var rowSel = table.row( $(modifier).parents('tr') )
          var httpCode_ID = editor.field( 'httpCode_ID' ).val()
          editor.hide(undefined,false)
          editor.show(['redirectUrl'])
          editor.edit( rowSel )
              .title( 'form title' )
              .buttons( 'update' )
              .open()
        }
    } )
    
  • colincolin Posts: 6,526Questions: 0Answers: 1,122
    Answer ✓

    Hi @blabablaba ,

    I think he was referring to ids() , but your way is as good as any. Glad all sorted,

    Cheers,

    Colin

Sign In or Register to comment.