none
Sharepoint Pop Up Window

    Question

  • Hello!

    Guys, i need help!

    How can i call run javascript function from my .aspx page from .cs file?

    --------

    or how to show popup sharepoint windows from button click?

    Thanks!

    Monday, January 24, 2011 6:29 AM

Answers

  • Hi

    You have to use the SPModal Dialog framework

    Check this site for info on how to create a modal dialog

    http://www.chakkaradeep.com/post/Using-the-SharePoint-2010-Modal-Dialog.aspx

    Monday, January 24, 2011 9:09 AM
  • Let me make sure I understand what you are saying you want.

    1. User clicks button
    2. Server-side event fires
    3. Javascript runs

    If that is correct, then after your click event, use RegisterStartupScript to register the script to run when the page loads into the browser post-click.

    Hope this helps,
    --Doug

    Monday, January 24, 2011 11:33 AM
  • You need to get the scripts for the client object model into your page. The most direct way you can do that with a ScriptLink control.

    <SharePoint:ScriptLink Name="SP.js" runat="server" OnDemand="true" Localizable="false"/>

    Monday, January 24, 2011 6:09 PM
  • The client side object model loads after the page has finished loading using Sharepoint On Demand script loading mechanism,  Unless you ripped the SP.UI.Js and other Client side libraries from your master page, they should get loaded.  The thing is you can't register a ClientSide Script block that uses the client side object model because the client side object model has not been loaded yet.

    I've tried using the ScriptLink solution above before but I couldn't get that to work, in the end I wrote a little javascript class to use EnsureScriptLoaded, and then I wrote a server side C# function to regisater a start up script for it, looks like this,

    Heres the javascript function I wrote, you might need to tweak it per your needs, this version builds Html on the fly, it doesn't require a popup Url.

     

    function PopupDialog(title, type, message, redirectUrl) {
     if (!title)
     title = "Default Dialog";
     if (!type)
     type = "Information";
     if (!message)
     message = "";
     var popUpContents = document.createElement('div');
     popUpContents.setAttribute('class', 'popup ' + type);
     popUpContents.innerHTML = message;
     ExecuteOrDelayUntilScriptLoaded(ShowPopup, "sp.ui.dialog.js");
     function ShowPopup() {
     var _options = SP.UI.$create_DialogOptions();
     _options.html = popUpContents;
     _options.autoSize = true;
     _options.title = title;
     _options.showclose = true;
     _options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
     var value = SP.UI.ModalDialog.showModalDialog(_options);
     }
    
     function CloseCallback(result, target) {
     if (redirectUrl)
      window.location = redirectUrl;
     }
    }

    To use it client side, call it like this

     

    var thisDialog = new PopupDialog('Some Title', 'Information', 'This is a test popup', '/default.aspx');
    That will show a popup with a title of Some Title, a css class of "popup Information", a message of "This is a test popup", and when you close the dialog it will redirect the user to default.aspx at the root of the site collection.

     

    Now to Call that from a code behind, I wrote a little helper function, like this
    public enum boxType
    
    {
    
    Information,
    
    Warning,
    
    Error
    
    }
    
    public static void ShowLightBoxDialog(Control lControl, BoxType boxType, string Message, string Title, string redirectUrl)
    {
     object[] args = new object[4];
     args[0] = Title;
     args[1] = boxType.ToString();
     args[2] = Message;
     if (string.IsNullOrEmpty(redirectUrl))
     args[3] = "null";
     else
     args[3] = "'" + redirectUrl + "'";
     StringBuilder sb = new StringBuilder();
     sb.Append("<script type='text/javascript' language='Javascript'>");
     sb.AppendFormat("var dialog = new PopupDialog('{0}', '{1}', '{2}', {3});", args);
     sb.Append("</script>");
     lControl.Page.ClientScript.RegisterStartupScript(typeof(string), string.Format("ShowLightBoxDialog{0}", Title), sb.ToString());
    }

    Make sure the javascript function is included in w/e page calls that, then in your button click event or whatever, do this,

    protected void Button1_Click(object sender, EventArgs args)
    
    {
    
    //The button was clicked, show popup
    
    ShowLightBoxDialog(this, BoxType.Information, "You clicked the button!", "Cool", SPContext.Current.Web.Url);
    
    }
    

     

    Notice the call in the JavaScript function,

     

    ExecuteOrDelayUntilScriptLoaded(ShowPopup, "sp.ui.dialog.js");
    Makes sure sp.ui.dialog.js is finished loading before calling it.

     

    I'm sure theres easier, or better ways to do this, but this is what I had to do to get it to work for me.

     

     

     

    Monday, January 24, 2011 6:32 PM

All replies

  • Hi

    You have to use the SPModal Dialog framework

    Check this site for info on how to create a modal dialog

    http://www.chakkaradeep.com/post/Using-the-SharePoint-2010-Modal-Dialog.aspx

    Monday, January 24, 2011 9:09 AM
  • ok, thenks!

    But i how i can call this function from my file with c# code?

    function portal_openModalDialog() {
      var options = SP.UI.$create_DialogOptions();
      options.width = 500;
      options.height = 250;
      options.url = "/_layouts/StandardsPortal/ChangePassword.aspx";
      options.dialogReturnValueCallback = Function.createDelegate(
                null, portal_modalDialogClosedCallback);
      SP.UI.ModalDialog.showModalDialog(options);
    }

    This function from .aspx file. I have button, some code runs after click on the button. But i dont know how call to JavaScript function on .aspx file from code-behind file with C# code...

    Help please!

    Thanks!

    Monday, January 24, 2011 10:44 AM
  • Let me make sure I understand what you are saying you want.

    1. User clicks button
    2. Server-side event fires
    3. Javascript runs

    If that is correct, then after your click event, use RegisterStartupScript to register the script to run when the page loads into the browser post-click.

    Hope this helps,
    --Doug

    Monday, January 24, 2011 11:33 AM
  • Thanks for your answer! But when i use it- i get error, than there are no method... other scripts are worked sucsesful, such as "alert();"
    Monday, January 24, 2011 11:41 AM
  • about no method... no methos in class of sharepoint javascript dialog framework...

    but if i use script of popup calling in .aspx page and run it from html button- it works...

    Monday, January 24, 2011 11:45 AM
  • You need to get the scripts for the client object model into your page. The most direct way you can do that with a ScriptLink control.

    <SharePoint:ScriptLink Name="SP.js" runat="server" OnDemand="true" Localizable="false"/>

    Monday, January 24, 2011 6:09 PM
  • The client side object model loads after the page has finished loading using Sharepoint On Demand script loading mechanism,  Unless you ripped the SP.UI.Js and other Client side libraries from your master page, they should get loaded.  The thing is you can't register a ClientSide Script block that uses the client side object model because the client side object model has not been loaded yet.

    I've tried using the ScriptLink solution above before but I couldn't get that to work, in the end I wrote a little javascript class to use EnsureScriptLoaded, and then I wrote a server side C# function to regisater a start up script for it, looks like this,

    Heres the javascript function I wrote, you might need to tweak it per your needs, this version builds Html on the fly, it doesn't require a popup Url.

     

    function PopupDialog(title, type, message, redirectUrl) {
     if (!title)
     title = "Default Dialog";
     if (!type)
     type = "Information";
     if (!message)
     message = "";
     var popUpContents = document.createElement('div');
     popUpContents.setAttribute('class', 'popup ' + type);
     popUpContents.innerHTML = message;
     ExecuteOrDelayUntilScriptLoaded(ShowPopup, "sp.ui.dialog.js");
     function ShowPopup() {
     var _options = SP.UI.$create_DialogOptions();
     _options.html = popUpContents;
     _options.autoSize = true;
     _options.title = title;
     _options.showclose = true;
     _options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
     var value = SP.UI.ModalDialog.showModalDialog(_options);
     }
    
     function CloseCallback(result, target) {
     if (redirectUrl)
      window.location = redirectUrl;
     }
    }

    To use it client side, call it like this

     

    var thisDialog = new PopupDialog('Some Title', 'Information', 'This is a test popup', '/default.aspx');
    That will show a popup with a title of Some Title, a css class of "popup Information", a message of "This is a test popup", and when you close the dialog it will redirect the user to default.aspx at the root of the site collection.

     

    Now to Call that from a code behind, I wrote a little helper function, like this
    public enum boxType
    
    {
    
    Information,
    
    Warning,
    
    Error
    
    }
    
    public static void ShowLightBoxDialog(Control lControl, BoxType boxType, string Message, string Title, string redirectUrl)
    {
     object[] args = new object[4];
     args[0] = Title;
     args[1] = boxType.ToString();
     args[2] = Message;
     if (string.IsNullOrEmpty(redirectUrl))
     args[3] = "null";
     else
     args[3] = "'" + redirectUrl + "'";
     StringBuilder sb = new StringBuilder();
     sb.Append("<script type='text/javascript' language='Javascript'>");
     sb.AppendFormat("var dialog = new PopupDialog('{0}', '{1}', '{2}', {3});", args);
     sb.Append("</script>");
     lControl.Page.ClientScript.RegisterStartupScript(typeof(string), string.Format("ShowLightBoxDialog{0}", Title), sb.ToString());
    }

    Make sure the javascript function is included in w/e page calls that, then in your button click event or whatever, do this,

    protected void Button1_Click(object sender, EventArgs args)
    
    {
    
    //The button was clicked, show popup
    
    ShowLightBoxDialog(this, BoxType.Information, "You clicked the button!", "Cool", SPContext.Current.Web.Url);
    
    }
    

     

    Notice the call in the JavaScript function,

     

    ExecuteOrDelayUntilScriptLoaded(ShowPopup, "sp.ui.dialog.js");
    Makes sure sp.ui.dialog.js is finished loading before calling it.

     

    I'm sure theres easier, or better ways to do this, but this is what I had to do to get it to work for me.

     

     

     

    Monday, January 24, 2011 6:32 PM
  • ooo! guys! thanks for your answers! you are realy help me! big thanks!!!
    Friday, January 28, 2011 9:06 PM