locked
Pop up window - closing it? RRS feed

  • Question

  • I have a list and when a user click on one of the items, it loads the item data in the standard Sharepoint 2010 pop up window.

    Within the window I have added a link that opens a list form so users can enter some data.  The issue i have is when this form is submitted i would like to close the pop up window.  This is the standard newform.aspx that has a "save" button.  It would be good if i could add a function to this to close the window after submission.

    Any ideas?



     

     


    Monday, February 6, 2012 9:30 PM

Answers

  •  

    I ran into this issue before.  You can look over my issues here:

    http://sharepoint.stackexchange.com/questions/22107/closing-a-modal-dialog-using-a-custom-form

    For everyone who doesn't want to look at the link, the answer is to pass in your own callback function with the SP.UI.ModalDialog.showModalDialog(); function.

     

    function OpenModalForm(staticListName, ID, title, formType, options) {
    	options = options || {};
    	//url will find current site for each scenario
    	var url;
    	//L_Menu_BaseUrl --- //http://community.zevenseas.com/Blogs/Vardhaman/Lists/Posts/Post.aspx?ID=9
    
    
    	if ( options.hasOwnProperty("url") ) {
    		//Locates full path URL's or relative URL's
    		if ( options.url.substring(0,1) === "." || options.url.substring(0,4) === "http" ) {
    			url = options.url;
    		} else {
    			url = L_Menu_BaseUrl + options.url;
    		}
    		//deletes property to prevent overwriting when extending options
    		delete options.url
    		
    	} else {
    	
    		switch ( formType.toUpperCase() ) {
    			case "DISPLAY":
    				formType = "DispForm"
    				break;
    			case "EDIT":
    				formType = "EditForm";
    				break;
    			case "NEW":
    				formType = "NewForm";
    				break;
    			default:
    				formType = "DispForm";
    				break;
    		}
    		
    		//Default the base URL to the url variable
    		if ( L_Menu_BaseUrl === "" ) {
    			url = "/Lists/" + staticListName + "/" + formType + ".aspx?ID=" + ID;
    		} else {
    			url = L_Menu_BaseUrl + "/Lists/" + staticListName + "/" + formType + ".aspx?ID=" + ID;
    		}
    	}
    	
    	//Valid options listed here: //http://blogs.msdn.com/b/sharepointdev/archive/2011/01/13/using-the-dialog-platform.aspx
    	var opt = $.extend({}, {
    		title: title || "",
    		url: url,
    		//x: 0,
    		//y: 0,
    		width: 800,
    		height: 600,
    		allowMaximize: true,
    		showMaximized: false,
    		showClose: true,
    		autoSize: false,
    		dialogReturnValueCallback: OnDialogClose,
    		//Use args to pass data to the modal.  Access using: window.frameElement.dialogArgs
    		args: {}
    	}, options);
    
    	//Create modal
    	SP.UI.ModalDialog.showModalDialog(opt);
    }
    

     


    So to use this function, the call would look like: 

     

    OpenModalForm("staticListName", ID, "titleOfPopup", "Edit", {
    
    	dialogReturnValueCallback: YourFunctionCall
    
    });

     


    The function above is dependent on jQuery, but you could easily remove that dependency.

    Hope this helps!

     


    Cheers, Matt Bramer
    My Blog
    Send me a tweet



    • Edited by iOnline247 Monday, February 6, 2012 11:33 PM
    • Proposed as answer by Sjoukje ZaalMVP Tuesday, February 7, 2012 7:27 AM
    • Marked as answer by Entan Ming Thursday, February 16, 2012 2:44 AM
    Monday, February 6, 2012 11:32 PM

All replies

  •  

    I ran into this issue before.  You can look over my issues here:

    http://sharepoint.stackexchange.com/questions/22107/closing-a-modal-dialog-using-a-custom-form

    For everyone who doesn't want to look at the link, the answer is to pass in your own callback function with the SP.UI.ModalDialog.showModalDialog(); function.

     

    function OpenModalForm(staticListName, ID, title, formType, options) {
    	options = options || {};
    	//url will find current site for each scenario
    	var url;
    	//L_Menu_BaseUrl --- //http://community.zevenseas.com/Blogs/Vardhaman/Lists/Posts/Post.aspx?ID=9
    
    
    	if ( options.hasOwnProperty("url") ) {
    		//Locates full path URL's or relative URL's
    		if ( options.url.substring(0,1) === "." || options.url.substring(0,4) === "http" ) {
    			url = options.url;
    		} else {
    			url = L_Menu_BaseUrl + options.url;
    		}
    		//deletes property to prevent overwriting when extending options
    		delete options.url
    		
    	} else {
    	
    		switch ( formType.toUpperCase() ) {
    			case "DISPLAY":
    				formType = "DispForm"
    				break;
    			case "EDIT":
    				formType = "EditForm";
    				break;
    			case "NEW":
    				formType = "NewForm";
    				break;
    			default:
    				formType = "DispForm";
    				break;
    		}
    		
    		//Default the base URL to the url variable
    		if ( L_Menu_BaseUrl === "" ) {
    			url = "/Lists/" + staticListName + "/" + formType + ".aspx?ID=" + ID;
    		} else {
    			url = L_Menu_BaseUrl + "/Lists/" + staticListName + "/" + formType + ".aspx?ID=" + ID;
    		}
    	}
    	
    	//Valid options listed here: //http://blogs.msdn.com/b/sharepointdev/archive/2011/01/13/using-the-dialog-platform.aspx
    	var opt = $.extend({}, {
    		title: title || "",
    		url: url,
    		//x: 0,
    		//y: 0,
    		width: 800,
    		height: 600,
    		allowMaximize: true,
    		showMaximized: false,
    		showClose: true,
    		autoSize: false,
    		dialogReturnValueCallback: OnDialogClose,
    		//Use args to pass data to the modal.  Access using: window.frameElement.dialogArgs
    		args: {}
    	}, options);
    
    	//Create modal
    	SP.UI.ModalDialog.showModalDialog(opt);
    }
    

     


    So to use this function, the call would look like: 

     

    OpenModalForm("staticListName", ID, "titleOfPopup", "Edit", {
    
    	dialogReturnValueCallback: YourFunctionCall
    
    });

     


    The function above is dependent on jQuery, but you could easily remove that dependency.

    Hope this helps!

     


    Cheers, Matt Bramer
    My Blog
    Send me a tweet



    • Edited by iOnline247 Monday, February 6, 2012 11:33 PM
    • Proposed as answer by Sjoukje ZaalMVP Tuesday, February 7, 2012 7:27 AM
    • Marked as answer by Entan Ming Thursday, February 16, 2012 2:44 AM
    Monday, February 6, 2012 11:32 PM
  • Thanks for the information, i will try it out and get back to you.

    One thing though, i couldn't get jQuery to work on the Newform.aspx page.  I put the link to the jQuery source file in the masterpage and tested it worked ok by putting a little script in the default.aspx file.  When i put the script in the newform.aspx page i get a "jQuery source files not found" msg back from my script.  Any ideas?

    Tuesday, February 7, 2012 9:04 AM
  • Double check your reference to jQuery and make sure the filepath is correct.  That always gets me too.


    Cheers, Matt Bramer
    My Blog
    Send me a tweet

    Wednesday, February 8, 2012 2:55 AM
  • yeah like i said, i put a test script in default.aspx and it works fine.  The link to the jquery source files are in the masterpage, so this should be accessible throughout the site.
    Wednesday, February 8, 2012 9:53 PM
  • You'll want to verify the URL that is being passed into the SP.UI.ModalDialog.showModalDialog(opt);

    The script makes some assumptions for you.  If the url is not correct, you need to pass the correct URL in the options parameter.  Here's an example:

    OpenModalForm("staticListName", ID, "titleOfPopup", "Edit", {
            url: "yourURLPath",
    	dialogReturnValueCallback: YourFunctionCall
    
    });


    Cheers, Matt Bramer
    My Blog
    Send me a tweet


    • Edited by iOnline247 Sunday, February 12, 2012 4:25 PM grammar correction
    Sunday, February 12, 2012 4:23 PM