Archivo

Posts Tagged ‘JavaScript’

Problemas al mostrar ventana emergente


Hace unos días escribí sobre cómo mostrar una ventana emergente en SharePoint. Pues bien, todo se reducía a un simple código con JavaScript, el cual reproduzco:

<script type="text/javascript" language="javascript">
    function openAsgardDialog()
    {
        var options = {
            url: "/Pages/AsgardPantheon.aspx",
            width: 800,
            height: 650,
            title: "Hola mundo",
	    };
	    SP.UI.ModalDialog.showModalDialog(options);
    }
</script>";

Ahora bien, ese código funciona bien… o eso pensé. Resulta que correr eso en el Internet Explorer 7 nos piña y nos manda un error, diciendo que no se pudieron cargar los controles Ajax. El hecho, sin embargo, es que esta sintaxis no le funciona, al parecer. Estuve investigando y aquí hay una sintaxis alternativa para iniciar el objeto. Por lo demás, queda igual…

<script type="text/javascript" language="javascript">
    function openAsgardDialog() 
    {
        var options = SP.UI.$create_DialogOptions();
        options.url = "/Pages/AsgardPantheon.aspx";
        options.height = 800;
        options.width = 650;
        options.title = "Hola mundo";

	    SP.UI.ModalDialog.showModalDialog(options);
    }
</script>

Una sintaxis un poquito más tradicional, pero funciona con IE 7.

Mostrar una ventana emergente desde un WebPart


En SharePoint 2010 introdujeron para muchas cosas ventanas emergentes, aprovechando que todo el sitio ahora cuenta con soporte para Ajax a través del UpdatePanel. Para que podamos hacer algo similar, basta usar un sencillo código en JavaScript.

<script type="text/javascript" language="javascript">
    function openAsgardDialog() 
    {
        var options = {
            url: "/Pages/AsgardPantheon.aspx",
            width: 800,
            height: 650,
            title: "Hola mundo",
	    };
	    SP.UI.ModalDialog.showModalDialog(options);
    }
</script>";

Al ser invocada dicha función, aparecerá una ventana emergente con el título y dimensiones especificadas, y cargará la página /Pages/AsgardPantheon.aspx, o cualquier otra que especifiquemos.

Ahora bien, para hacer esto desde un WebPart, tres cosas deben ocurrir.

1.- Asegurarnos que el master page cuenta con un UpdatePanel. Esto es esencial, puesto que si no Ajax no funciona. Es el comportamiento por default en SharePoint, sólo una precaución por si alguien lo quitó.

2.- El WebPart deberá registrar el script que permitirá mostrar la ventana emergente.

private void RegisterOpenHelloWorldDialogScript()
{
    string script =
        @"<script type=""text/javascript"" language=""javascript"">
            function openAsgardDialog() 
            {{
                var options = {{
                    url: ""{0}/Pages/AsgardPantheon.aspx"",
                    width: 800,
                    height: 650,
                    title: ""ASGARD"",
	            }};
	            SP.UI.ModalDialog.showModalDialog(options);
            }}
            </script>";
    script = string.Format(script, SPContext.Current.Web.Url);

    Page.ClientScript.RegisterClientScriptBlock(GetType(),
            "OpenAsgardDialogScript", script);
}

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);

    RegisterOpenHelloWorldDialogScript();
}

3.- Llamamos a nuestro JavaScript desde algún control. En este caso, creamos una etiqueta <a> que haga lo propio.

protected override void CreateChildControls()
{
    Literal literal = new Literal();
    literal.Text = "<h3>Ejemplo Ventana Emergente</h3>" +
                           "Haga <a href="\&quot;#\&quot;" onclick="\"javascript:openAsgardDialog();\"">" +
                           "click aqu&iacute;</a> para abrir. ";
    Controls.Add(literal);
}

Y eso es todo. Una imagen de cómo luciría el WebPart…

image

…y la ventana emergente.

image