locked
confirmation before closing edititem in modal dialog RRS feed

  • Question

  • Hi,

    When user edits an item, he will be shown editeform.aspx in a modal dialog.
    here we have ok/cancel options and also 'x'(close) button.
    My requirement is when the user clicks on 'x' at top right, a confirmation dialog should be thrown.
    Since this is something sharepoint itself open I cannot provide options to modal dialog.

    Can someone help how can I achieve this functionality?

     

    Friday, August 5, 2011 10:06 AM

Answers

  • Finally I managed to get this functionality working.

    First we have to understand that this 'x'(close) button is being created from the script written in SP.UI.Dialog.js which is present in Layouts folder.
    Here 'click' handler is being added to the anchor(<a>) control which contains this close image.So, I decided to clear this OOB handler and add my own events on this anchor to display the confirmation and added the below code in the js file being referred in list forms(editform.aspx, newform.aspx etc..,) 

    if (window.frameElement != null) 
    { 
    $removeHandler(window.frameElement.parentNode.parentNode.childNodes[1].childNodes[1].childNodes[1], 'click'); 
    $addHandlerwindow.frameElement.parentNode.parentNode.childNodes[1].childNodes[1].childNodes[1], 'click', cancelingForm); 
    } 
    }); 
    
    function cancelingForm() 
    { 
    if (confirm('Do you want to close this form?')) 
    { 
    window.frameElement.commonModalDialogClose(); 
    return false; 
    } 
    }

     

     

    Here "window.frameElement.parentNode.parentNode.childNodes[1].childNodes[1].childNodes[1]" gives you the object of the anchor containing the 'x' image.And now clicking on the 'x' gives me a confirnmation box.

     

     


    Sri

    • Marked as answer by Srikanth_S Wednesday, August 10, 2011 7:33 AM
    • Edited by Srikanth_S Thursday, August 11, 2011 10:56 AM using $cancelHandlers gives problems when adding attachments to items. so replaced it with removeHandler
    Wednesday, August 10, 2011 7:31 AM

All replies

  • Hi,

    You can popup confirmation dialog before closing edit page by adding dialogReturnValueCallback attribute which points to your onDialogClose function.

    function openDialog() {
    
       var options = {
    
        url: YOUR-EDITPAGE-URL, // URL of the page to be displayed in modal dialog
    
        width: 500,
    
        height: 400,
    
        title: "YOUR-PAGE-TITLE",
    
        dialogReturnValueCallback: myOnDialogClose, // my callback function
    
        allowMaximize: true,
    
        showClose: true
    
       };
    
       SP.UI.ModalDialog.showModalDialog(options);
    
      }
    
    
    
     function myOnDialogClose() {
    
       alert('Button closed!');   
    
      }


     

     

     


    Ashraf ul Islam
    Sharepoint Consultant
    Friday, August 5, 2011 10:51 AM
  • Ashraf,

    Thanks for your reply. 

    But,in this case I dont have the flexibility to pass options since it is editform.aspx.
    I think, I have to find a way to write Jquery on EditForm.aspx to bind onbeforeunload to modalDialog. I'm not sure but.

     


    Sri
    Friday, August 5, 2011 10:55 AM
  • Finally I managed to get this functionality working.

    First we have to understand that this 'x'(close) button is being created from the script written in SP.UI.Dialog.js which is present in Layouts folder.
    Here 'click' handler is being added to the anchor(<a>) control which contains this close image.So, I decided to clear this OOB handler and add my own events on this anchor to display the confirmation and added the below code in the js file being referred in list forms(editform.aspx, newform.aspx etc..,) 

    if (window.frameElement != null) 
    { 
    $removeHandler(window.frameElement.parentNode.parentNode.childNodes[1].childNodes[1].childNodes[1], 'click'); 
    $addHandlerwindow.frameElement.parentNode.parentNode.childNodes[1].childNodes[1].childNodes[1], 'click', cancelingForm); 
    } 
    }); 
    
    function cancelingForm() 
    { 
    if (confirm('Do you want to close this form?')) 
    { 
    window.frameElement.commonModalDialogClose(); 
    return false; 
    } 
    }

     

     

    Here "window.frameElement.parentNode.parentNode.childNodes[1].childNodes[1].childNodes[1]" gives you the object of the anchor containing the 'x' image.And now clicking on the 'x' gives me a confirnmation box.

     

     


    Sri

    • Marked as answer by Srikanth_S Wednesday, August 10, 2011 7:33 AM
    • Edited by Srikanth_S Thursday, August 11, 2011 10:56 AM using $cancelHandlers gives problems when adding attachments to items. so replaced it with removeHandler
    Wednesday, August 10, 2011 7:31 AM
  • Srikanth,

    I tried implementing your code from above and its working just fine...

    Thanks a lot :)

     

     

    Wednesday, August 10, 2011 7:39 AM
  • Hi, i tried your solution.

     

    The function cancellingForm is called when the X button is clicked but the popup window is still closed.

    I think the click Handler is not removed but i can't find why. Can you help me ?

     

    $(window).ready(function () {
                if (window.frameElement != null) {
                    $removeHandler(window.frameElement.parentNode.parentNode.childNodes[1].childNodes[1].childNodes[1], 'click');
                    $addHandler(window.frameElement.parentNode.parentNode.childNodes[1].childNodes[1].childNodes[1], 'click', cancelingForm);           
                }
            });
    Thursday, August 25, 2011 12:53 PM
  • neothoms,

    I'm also facing the same issue as of now, need to find a way to remove 'click' event from the 'x'.

    Will post the solution once I find it out.

    Regards,

    Srikanth

     


    Sri
    Thursday, August 25, 2011 1:15 PM
  • Hello Ashraf, I've tried this solution but the myOnDialogClose i called after the dialog is already closed.. could you please you elaborate on that?

    Thanks.

    Saturday, March 3, 2012 3:35 PM
  • I was able to remove all of the 'click' handlers with the clearHandlers function.

    My implementation looks like this:

    if (window.frameElement != null) {
     $clearHandlers(window.frameElement.parentNode.parentNode.childNodes[1].childNodes[1].childNodes[1]);
     $addHandler(window.frameElement.parentNode.parentNode.childNodes[1].childNodes[1].childNodes[1], 'click', ShowConfirmDialog);
    }

    Thursday, August 23, 2012 5:51 PM
  • Hi ,

    I tried the above code .

    Its working in IE 8 ,9,10 but not in IE 11.

     Out of stack space  error when hitting $clearhandlers.

    Can someone help how can I achieve this functionality in IE 11 also?

    Wednesday, May 6, 2015 12:30 PM
  • I have the same error as Athulya with $clearHandlers in IE 11 and SP 2013. Does someone already have a solution?
    Wednesday, August 1, 2018 8:23 AM