C# .NET - Jquery UI Dialog fired from CodeBehind!

Asked By Alex Developer on 15-Mar-12 09:14 AM
Earn up to 30 extra points for answering this tough question.
Cheers!
Well! i'm trying to show a Jquery UI Dialog from codebehind! these are my jquery functions!
<script language="javascript" type="text/javascript">
  $(document).ready(function ()
    {
    //CUADRO DE DIALOGO EXITOSO
    $('#Success').dialog({
    autoOpen: false,
    draggable: true,
    title: "Ingreso Exitoso",
    open: function (type, data) {
      $(this).parent().appendTo("form");
    }
    });
  });
 
  //ABRE CUADRO DE DIALOGO JQUERY UI
  function showDialog(id)
  {
    $('#' + id).dialog("open");
  }
 
  //CIERRA CUADRO DE DIALOGO JQUERY UI
  function closeDialog(id)
  {
    $('#' + id).dialog("close");
  }
    
  </script>

And this is my c# code!
protected void btn_nuevoIngreso_Click(object sender, ImageClickEventArgs e)
  {
 
  OpenDialog("Success");
 
  }
 
  private void OpenDialog(string dialogId)
  {
  string script = "showDialog('" + dialogId + "');";
  ScriptManager.RegisterStartupScript(this, typeof(Page), "openpopup", script, true);
 
 
  UPnl_Success.Update();
  }

I have my dialog in a div! and inside the div i have an updatepanel with one asp: button on it!  The code posted before is not working! if you can help me i'll appreciate it a lot!
PD: Sorry for my english!!
pD2: I'm using a masterpage (with the script references) and this functions are in the childpage.aspx! Also, the tolscriptmanager is in the masterpage ;)
Thanks in advance!
Danasegarane Arunachalam replied to Alex Developer on 16-Mar-12 11:07 PM
1. Does the Script actually fired ?
2. Place an alert in the script and see if the alert is fired ?
3. Is the btn_nuevoIngreso is the Button inside the Ajax panel ?
4. The ScriptManager.RegisterStartupScript will register the startup script only for Ajax request.


Somesh Yadav replied to Alex Developer on 19-Mar-12 01:36 AM
Read http://blog.dreamlabsolutions.com/post/2009/06/03/run-jQuery-code-from-ASPNET-Server-Side.aspx.
[)ia6l0 iii replied to Alex Developer on 19-Mar-12 09:57 PM
This is how I did for a quick POC last year - 

Add attributes for a control, in this sample, it is click event of a button,
string deleteScript = String.Format("javascript:SampleDeleteConfirm('{0}', function() {{ {1} }}); return false;", filename, Page.ClientScript.GetPostBackEventReference(tthis.ButtonDelete, String.Empty));
                this.ButtonDelete.Attributes.Add("onclick", deleteScript);

Write the javascript function that invokes the jquery ui dialog.
function SampleDeleteConfirm(someId, callBackFunc) 
{
    var ask = ShowMessage("Are you sure you want to delete this file?- " + someId + "", "confirm", callBackFunc);
    return  (ask == true);
}

And the actual method that wraps calls to jQuery UI dialog.
function ShowMessage(ival, ioption,iobject) {
    var iresult = false;
   $("#dialog-confirm").find('> p').html(ival);
    if (ioption == "confirm") {
        $("#dialog-confirm").dialog({
            resizable: false,
            autoOpen: true,
            title: "Please Confirm",
            height: 140,
            minWidth: 310,
            modal: true,
            padding:5,
            buttons: {
                "OK": function () { iobject(); },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    }
    else {
        $("#dialog-confirm").dialog({
            resizable: false,
            autoOpen: true,
            title: "Alert Message",
            height: 140,
            width: 310,
            padding: 5,
            modal: true,
            buttons: {
                OK: function () {
                    $(this).dialog("close");
                }
            }
        });
    }
   return false;
}

I hope the code is self-explanatory. 

Hope this helps.