open jQuery Dialog from codebehind

10,650

First make a call to dialog to create it.

.dialog({ autoOpen: false }) //{} = settings

and then open it..

.dialog('open')
Share:
10,650
euther
Author by

euther

Updated on August 21, 2022

Comments

  • euther
    euther over 1 year

    So i have to show a jquery UI Dialog from codebehind.
    I've tried everything: this, this, this, and also changed those answers to test if it works with me but is not working.
    I'm using the first solution because it's organized. It works if i use alert('whatever') instead of my jquery dialog code. so i know its working, but nothing happens with the dialog. I've tried it with colorbox also, and not working either.

    Can anyone give me a workaround please? It would be apreciated.
    Thank you.

    My aspx:

    HEAD
    <script type="text/javascript">
    
        function BindEvents() {
            $.fx.speeds._default = 1000;
            $(document).ready(function () {                
                var dlg = $("#DivMostrarIguales").dialog({
                    autoOpen: false,
                    show: "fold",
                    hide: "clip",
                    width: 500,
                    height: 500
                });
                dlg.parent().appendTo(jQuery("form:first"));
            });
        }
    
    </script>
    ENDHEAD
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:UpdatePanel runat="server" ID="upTotal">
        <ContentTemplate>
            <script type="text/javascript">
                Sys.Application.add_load(BindEvents);                
            </script>....
     <tr>
              <td class="Izquierda">
                    (*) Número único:
              </td>
              <td class="Derecha">
                 <asp:TextBox ID="tbNumeroUnico" runat="server"></asp:TextBox>
                 <asp:Button ID="btMostrarIgualesEntrante" runat="server" Text="Revisar si ya existe"
                                                        OnClick="MostrarVentanaIgualesEntrante" ValidationGroup="none" CausesValidation="false"
                                                        CssClass="Button" />                 
                 <asp:Label runat="server" ID="lbNumeroUnicoEntrante" Text="Debe digitar el formato correcto del número único (completo)"
                                                        Visible="false" CssClass="ErrorCampo"></asp:Label>
              </td>
           </tr>...
            <div id="DivMostrarIguales" title="Número Único Igual">
                WhatEver              
            </div>           
        </ContentTemplate>
    </asp:UpdatePanel>
    </asp:Content>  
    

    My .CS functions:

    private string getjQueryCode(string jsCodetoRun)
        {
            StringBuilder sb = new StringBuilder();
            sb.AppendLine("$(document).ready(function() {");
            sb.AppendLine(jsCodetoRun);
            sb.AppendLine(" });");
    
            return sb.ToString();
        }
    
        private void runjQueryCode(string jsCodetoRun)
        {
    
            ScriptManager requestSM = ScriptManager.GetCurrent(this);
            if (requestSM != null && requestSM.IsInAsyncPostBack)
            {
                ScriptManager.RegisterClientScriptBlock(this,
                                                        typeof(Page),
                                                        Guid.NewGuid().ToString(),
                                                        getjQueryCode(jsCodetoRun),
                                                        true);
            }
            else
            {
                ClientScript.RegisterClientScriptBlock(typeof(Page),
                                                       Guid.NewGuid().ToString(),
                                                       getjQueryCode(jsCodetoRun),
                                                       true);
            }
        }
    
        protected void MostrarVentanaIgualesEntrante(object sender, EventArgs e)
        {
            CargarGridMostrarIgualesEntrante();
            runjQueryCode("$('#DivMostrarIguales').dialog('open')");            
        }
    
  • euther
    euther about 13 years
    thanks for your quick reply conqenator, it works perfectly. i'm using it this way: runjQueryCode("dlg = $('#DivMostrarIguales').dialog({autoOpen: false,show: 'fold',hide: 'clip',width: 500,height: 500}); $('#DivMostrarIguales').dialog('open')");
  • Robin Maben
    Robin Maben about 13 years
    Well, I'm glad it helped.. :)