Pattern to launch form from other form?

louking

I have a backend database with a clients table and an events table. From the events table view, there will be an create/edit event form with select field to select an existing client. But if a new client is detected somehow ('new' button next to client select? simply type new client name in select window?), I'd like a client form to be launched over top of the events form to collect the client information and perform the ajax create client.

Is there any pattern I can look at that does something like this?

louking

Another possibility is to have additional client fields in the events table form which are hidden until a new client key is typed in (e.g., with select2). Not sure yet how I'd structure the code for this because there would be a need to update the client table, I guess when the create or update button is pressed.

In any case any advice on how to accomplish this would be appreciated.

louking

see http://live.datatables.net/rusugozo/2/

This approach doesn't seem to work. Maybe there's a logic error in how I'm trying to invoke the standalone form? or maybe two forms can't be displayed at once.

Try clicking New above table, then click New button within form.

louking

http://live.datatables.net/maquneno/1/ is a little more promising, though. I'll continue to work on this with this as the basis, and if I have any more problems will come back here for help.

allan

Hi,

Sorry for the delay in getting back to you about this. Nested or multi-level forms (whichever term you prefer) is not something that Editor currently supports I'm afraid. The closest it is possible to get is to do as you have in your second example, but you need to save the values into a variable and then restore them when going back to the original form (val() will help there).

There is also the consideration of what to do if the modal close icon is clicked when in the nested form, or how to cancel just the nested form.

This is something that is very much on the cards for a future update in Editor, as it is something I've found useful myself in the past, but at the moment it does require a bit of external coding.

Allan

louking

Thanks for the guidance. I thought I would have to save the values, but haven't noticed that I need to, at least in the rudimentary mockup I've provided. I'll report back if I can -- unfortunately the way I do my js code for this is deeply embedded in a python class which may not be of interested to anyone else. But I might try to make a pattern for this in any case.

First I've used live.datatables.net -- is there a way to save as gist, or alternately is there a way to use Editor from standard jsbin page? I did somehow seem to be able to attach my live.datatables.net window to my github account -- needed to wait until I got some timeout then was able to log in -- but seems like there should be a way to log in directly. Even when logged in, though, I get error when trying to save the gist.

louking

When I open the form, if this is edit rather than create I will need to retrieve the data through ajax GET as there is no row context.

Is this something for which Editor provides a direct interface, e.g., through something like ajax.open option or do I have to hand code ajax GET and use subform_editor.set( obj ) in ajax success function? I think the latter, but thought it would be good to check.

allan

Saving as a gist isn't something I've ever tried to be honest! Its an install of JSBin and I've tweaked a few settings, but not many. Copy / paste is probably the best option at the moment.

Yes - you'd need to make the Ajax call yourself to get the latest data if you need it. Editor doesn't provide that ability (although it is also something that might be added in future).

Allan

louking

I'm going to continue debugging this but on the off chance you see it maybe you can give me some guidance:

When I either a) close the main form [var row = editor.ids( true); editor.close()], bring up the subform, then close the subform and bring the main form back up [editor.edit( row )], or, b) bring up the subform on top of the main form [showing subform on top of main form does seem to work in 1.8.0], after either of these the main form's Update button doesn't seem to work -- meaning when I click it I don't see any action on the wire where I'd normally see a PUT request.

My gut is that activating the subform interferes with the main form's button handler somehow.

Trying to dig through your code now to figure out what's going on...

If we can't figure this out based on this description I'll try to make a jsbin to reproduce. Maybe you have an example which updates the server that I can clone to start with.

[update: I've confirmed that the click event listener for the Update button is not active on the main form after the subform was dismissed]

louking

[update from below: after review of edit() method, specifically this._crudArgs() call on line 2740, I believe I am not calling edit() correctly. What is best way to reinvoke the main form in my use case?]

I see the following, but am having a hard time following beyond this. I'll try to set up jsbin for easier debugging.

1. after main page load, click edit, reach dataTables.editor.js:2249 [1.8.0] within Editor.prototype.buttons method

1. load subform through <new> selection
2. close subform, editor.edit ( row )
3. after editor.edit( row ), do not reach dataTables.editor.js:2249, so on click event isn't set

My code:

$( function () {
  // handle save, then open editor on submit
  var fieldname = "course.id"
  $( editor.field( fieldname ).input() ).on ("change", function () {
    console.log("course select2 change fired");
    console.log("editor.get() = " + editor.get( fieldname ));
    // only fire if <new> entry
    if ( editor.get( fieldname ) != 0 ) return;

    var row = editor.ids( true );
    editor.close();

    course_editor
      .buttons( [
                 {
                  label: "Cancel",
                  fn: function () {
                        this.close();
                        editor.edit( row );
                  },
                 },
                 {
                  label: "Create",
                  fn: function () {
                        this.submit( function(resp) {
                              this.close();
                              editor.edit( row );
                              var newval = {label:resp.data[0].course, value:resp.data[0].rowid};
                              console.log( "newval = " + newval );
                              editor.field( fieldname ).AddOption( [ newval ] );
                              editor.field( fieldname ).set( newval.value );
                           },
                        )
                  },
                 },
                ]
      )
      .create();
  } );

  course_editor = new $.fn.dataTable.Editor( 
    {
      "fields": [
        {
          "data": "course", 
          "name": "course", 
          "label": "Course"
        }, 
        {
          "data": "address", 
          "name": "address", 
          "label": "Address"
        }, 
        {
          "name": "isStandard", 
          "data": "isStandard", 
          "label": "Standard Course", 
          "type": "select2", 
          "options": [
            {
              "value": "yes", 
              "label": "yes"
            }, 
            {
              "value": "no", 
              "label": "no"
            }
          ], 
          "opts": {
            "minimumResultsForSearch": "Infinity"
          }
        }
      ], 
      "ajax": {
        "edit": {
          "url": "/admin/courses/rest/_id_", 
          "type": "PUT"
        }, 
        "create": {
          "url": "/admin/courses/rest", 
          "type": "POST"
        }, 
        "remove": {
          "url": "/admin/courses/rest/_id_", 
          "type": "DELETE"
        }
      }, 
      "idSrc": "rowid"
    }
  );
  // if form closes, reopen editor
  course_editor
    .on("close", function () {
      editor.open();
  });
} );

louking

Hmm. Having some basic trouble with live.editor.net. http://live.datatables.net/vekapazu/1/edit used to work but now I'm getting an error when clicking Edit button. Was there a regression with 1.8.0?

Note the example http://live.datatables.net/idinat/680/edit#javascript,html referenced from https://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read#latest has the same error.

allan

Thanks. There was a bug fix in the latest Editor versions that means for local table editing they need a newer version of DataTables (it needed a change in both Editor and DataTables). That example was running old versions of the software, minus Editor which was 1.8.0. Updating them all allows it to work: http://live.datatables.net/yahafedo/1/edit . I've also added row ids which are required (not sure why it would have worked before!).

Allan

louking

Darn. I don't seem to be able to reproduce my problem in a jsbin.

One difference from http://live.datatables.net/femimeqi/1/ is that my real software uses ajax to get the main table.

Another difference is I've configured the main editor to use a different idSrc.

Third difference is I use a select2 field in the main form.

Could any of these have an effect on the state of the Update button after switching forms?

I've gone back to just opening the main form rather than trying to create it (line 27 in my javascript above) to make it closer to my jsbin example but that didn't help (I had changed from open() to create() because of this problem). But maybe I can work around this issue (i.e., mask it) by reopening the main form via create() using more complete parameters.

Can you tell me how to save the appropriate parameters and reinitialize the main form completely via create()? I think maybe I need all the args which would be passed to _crudArgs()

louking

I was able to workaround by recreating the buttons after opening the editor. Not sure why I need to do this, but if I don't the click event listener for the Update button is removed when I use the subform. Again I was not able to reproduce this behavior within the jsbin.

For posterity, here is the code I'm using now to manage the subform. See line 3 where I reinitialize the buttons.

FWIW, this line has to be after the editor.open() call for the event listener to be put on the Update button. So I surmise something is happening to remove it during the open().

function openeditor(  ) {
  editor.open( );
  editor.buttons( {
    "label": "Update",
    "fn": function () { this.submit(); }
  } );
}

$( function () {
  // handle save, then open editor on submit
  var fieldname = "course.id"
  $( editor.field( fieldname ).input() ).on ("change", function () {
    console.log("course select2 change fired");
    console.log("editor.get() = " + editor.get( fieldname ));
    // only fire if <new> entry
    if ( editor.get( fieldname ) != 0 ) return;

    editor.close();

    course_editor
      .buttons( [
                 {
                  label: "Cancel",
                  fn: function () {
                        this.close();
                        openeditor( );
                  },
                 },
                 {
                  label: "Create",
                  fn: function () {
                        this.submit( function(resp) {
                              this.close();
                              openeditor( );
                              var newval = {label:resp.data[0].course, value:resp.data[0].rowid};
                              console.log( "newval = " + newval );
                              editor.field( fieldname ).AddOption( [ newval ] );
                              editor.field( fieldname ).set( newval.value );
                           },
                        )
                  },
                 },
                ]
      )
      .create();
  } );

  course_editor = new $.fn.dataTable.Editor( 
    {
      "fields": [
        {
          "data": "course", 
          "name": "course", 
          "label": "Course"
        }, 
        {
          "data": "address", 
          "name": "address", 
          "label": "Address"
        }, 
        {
          "name": "isStandard", 
          "data": "isStandard", 
          "label": "Standard Course", 
          "type": "select2", 
          "options": [
            {
              "value": "yes", 
              "label": "yes"
            }, 
            {
              "value": "no", 
              "label": "no"
            }
          ], 
          "opts": {
            "minimumResultsForSearch": "Infinity"
          }
        }
      ], 
      "ajax": {
        "edit": {
          "url": "/admin/courses/rest/_id_", 
          "type": "PUT"
        }, 
        "create": {
          "url": "/admin/courses/rest", 
          "type": "POST"
        }, 
        "remove": {
          "url": "/admin/courses/rest/_id_", 
          "type": "DELETE"
        }
      }, 
      "idSrc": "rowid"
    }
  );
  // if form closes, reopen editor
  course_editor
    .on("close", function () {
      openeditor( );
  });
} );

allan

Thanks for posting back. Great to hear you have a workaround for that!

This sort of thing will be a lot easier when Editor supports it natively .

Allan

louking

I was about to post that my solution of hammering in a hard coded button set isn't going to work for me. Sometimes I add a set of buttons, and also this solution doesn't account for create vs. edit.

I have been searching around your code, and I can't figure out where you store the configured button set by action, which may be the default or may have been overwritten (I think) through formOptions.main.buttons (can I?)

Is there a place I can pick up the current button set so I can overwrite the buttons when the main form is repainted?

Maybe I check editor.s.formOptions.buttons and if boolean use editor.i18n.<action>, otherwise use editor.s.formOptions.buttons.<action> or something similar?

Alternately I guess I would have to figure out why the on click handler disappears.

louking

I was able to reproduce the problem when I added jquery ui handling to my jsbin

See http://live.datatables.net/yevarato/2/

To reproduce

• select a row
• click edit
• click New (in form) - subform should appear
• click Save
• change something in the form then click Update

Nothing happens because there is no listener on the Update button

Thanks for your patience waiting for me to reproduce.

allan

Yup - when the jQuery UI modal is removed from the display, it is unbinding the events to make sure there are no memory leaks. The modal is shared between Editor instances (since you can't have more than one Editor instance on screen at a time just now), so I'm not too surprised by that behaviour.

I think what you will need to do is on clicking "new" store the current values of the form and the row that was being edited. Then show your "new" form. When save is clicked on that, start a fresh edit on the row that was being edited. When that fresh edit is initialised then use set() to set the values back to what they were.

Allan

louking

Turns out my edit form requires special buttons which I'm adding during 'open' event, which works around my immediate problem. Note that adding them during 'preOpen' didn't work, i.e., buttons had no click event, so I am not sure what you're saying about the timing of the jQuery UI modal -- this was removed before preOpen I think.

However, I think it is important to understand what you're saying so will try your suggestion when I can and report back.

louking

Your suggestion about editing rather than opening, saving the fields before close
and restoring after "create" works, so I've marked that comment as the "answer".

There are a lot of edge cases, especially when building a "stack" of editor instances and buttons. I'm looking forward to your native implementation of this, but after my exercise understand it's non-trivial.

What made it difficult were the following: jqueryui unbinding of the events, and then the inability to retrieve the button-options from an editor instance.

I wish I could publish a pattern for this, but my server code is in python and it's a little convoluted. I generate some javascript "on the fly" based on a crudapi class. And there is still an edge or two I haven't yet handled.