confirmation on form close

louking

Referencing https://datatables.net/forums/discussion/32883, I tried this implementation. I see (at least on Chrome) that if I use ESC, the popup is displayed twice, but Cancel does indeed bring user back to form to continue editing. If I close the form using the X in the upper right, however, the form closes whether I click OK or Cancel.

Is there something I'm doing wrong? I can set up test area for you again if needed.

In case there is some conflict specific to my processing, my full event handler setup is

// this must be done after datatables() is called in datatables.js
var openVals;
function afterdatatables(){
    editor.on( 'uploadXhrSuccess', function ( e, fieldName, json ) {
        console.log ('elev = ' + json.elev + ' distance = ' + json.distance);
        editor.field('elev').set(json.elev);
        editor.field('distance').set(json.distance);
        editor.field('active').set(json.active);
        editor.field('location').set(json.location);
    } );

    editor.on('initCreate', function() {
        editor.set('active', 1)
        editor.field('active').hide()
    });

    editor.on('initEdit', function() {
        var fileid = editor.get('fileid');
        editor.set('turns', 'Loading...')
        editor.field('active').show()
        $.ajax({
            // rr_turns_url_prefix comes from runningroute-*-config.js
            url: rr_turns_url_prefix + '/admin/' + fileid + '/turns', 
            success : function(data) {
                editor.set('turns', data.turns)
            },
            error : function(jqXHR, textStatus, errorThrown) {
                editor.set('turns', 'ERROR: could not retrieve turn data\n'
                            + '   ' + errorThrown)
            },
        });
        
    });

    // confirm before closing window for unsaved changes
    // from https://datatables.net/forums/discussion/32883
    editor
        .on( 'open', function () {
            // Store the values of the fields on open
            openVals = JSON.stringify( editor.get() );
        } )
       .on( 'preClose', function ( e ) {
            // On close, check if the values have changed and ask for closing confirmation if they have
            if ( openVals !== JSON.stringify( editor.get() ) ) {
                return confirm( 'You have unsaved changes. Are you sure you want to exit?' );
            }
        } )      
       .on( 'preBlur', function ( e ) {
            // On close, check if the values have changed and ask for closing confirmation if they have
            if ( openVals !== JSON.stringify( editor.get() ) ) {
                return confirm( 'You have unsaved changes. Are you sure you want to exit?' );
            }
    } );
};

louking

Note this code also incorrectly shows confirmation popup when Create button is pressed

allan

preClose and preBlur can indeed be triggered twice, which is why you are seeing it twice when blurring the modal, but only once if you directly close it with the X icon (since that is a close, not blur action).

I'd suggest doing it the same way as in this example.

On create, the confirm pop up should show if you have entered values and not saved them. Is that not what you want?

Allan

louking

Just circling back around to this.

With the solution you cited, the preBlur event doesn't seem to fire either when Xing out or when ESC out, and consequently the form just closes in both cases.

I've set up the sandbox server for you again and sent instructions, if you'd like to see what's going on.

allan

Xing out or when ESC out, and consequently the form just closes in both cases.

Correct. Both of these are considered to be an explicit close action, so there is no blur.

A blur happens why the form might be closed - e.g. clicking on the background. Some might want it to close, some might want it to submit, some might want nothing to happen.

A blur can turn into a close depending on the form-options that are configured.

Allan

louking

So is there a way to configure this so that if someone X's out or ESC out after adding data, to ask for confirmation? I think what I am suggesting might be the standard use case, but of course you see a lot more different expectations that I do.

allan

preClose would be the one to use then, but you need to make sure that you remove that event listener when the form is submitted:

    var openVals;
    editor
        .on( 'open', function () {
            // Store the values of the fields on open
            openVals = JSON.stringify( editor.get() );
        } )
        .on( 'preClose', function ( e ) {
            // On close, check if the values have changed and ask for closing confirmation if they have
            if ( openVals !== JSON.stringify( editor.get() ) ) {
                return confirm( 'You have unsaved changes. Are you sure you want to exit?' );
            }
        } )
        .on( 'submit', function () {
            editor.off( 'preClose' );
        } );

should do it.

Allan

louking

Would it need to be turned on again on 'open'?

allan

Doh - sorry.

var openVals;
editor
  .on("open", function() {
    // Store the values of the fields on open
    openVals = JSON.stringify(editor.get());

    editor.on("preClose", function(e) {
      // On close, check if the values have changed and ask for closing confirmation if they have
      if (openVals !== JSON.stringify(editor.get())) {
        return confirm(
          "You have unsaved changes. Are you sure you want to exit?"
        );
      }
    });
  })
  .on("submit", function() {
    editor.off("preClose");
  });

Allan

louking

Again, sorry for the delay -- been working another project and am able to circle back only occasionally

This doesn't behave correctly:

If I X out the confirmation message comes up three or four times, and leaves the form whether I click OK or cancel. ESC behavior is similar.

If I use Create button the confirmation message comes up. I haven't gone through all the permutations but seems like the form gets submitted in this case.

I'm not sure but I think multiple preClose event handlers are getting created. Also is the preClose handler getting fired before the submit handler?

I added some debug statements determined:

• preClose handlers are accumulating
• submit handler isn't firing

allan

Take 3 - also remoe the preClose event when it does actually close:

var openVals;
editor
  .on("open", function() {
    // Store the values of the fields on open
    openVals = JSON.stringify(editor.get());
 
    editor.on("preClose", function(e) {
      // On close, check if the values have changed and ask for closing confirmation if they have
      if (openVals !== JSON.stringify(editor.get())) {
        return confirm(
          "You have unsaved changes. Are you sure you want to exit?"
        );
      }
    });
  })
  .on("submit close", function() {
    editor.off("preClose");
  });

Allan

luisrmz

I am trying to implement a similar function but can't get it to work correctly. I can confirm with the user when closing an unsubmitted form correctly, but the confirmation still comes up when the form is submitted to the server successfully. I am using the above snippet but I'm not sure if the preClose handler is being removed after it fires for the submit, so the confirmation still appears.

allan

preClose can trigger before or after the submit action. That's why there is a submit listener in the above code to remove it.

If that isn't working for you, can you link to a page showing the issue please?

Allan