Firing the JQuery Dialog using an ASP.NET Button?

Question

I have a Page which has a Control on it with 2 textboxes (username and password) and an asp:Button. If the user's membership is going to exipre within 30 days and the button is clicked, I want the JQuery dialog to popup. Inside the JQuery dialog, I have some text and an asp:LinkButton. The link button has an event attached to it, but it is not being fired when I click it in the dialog box. Here is the script tags for the Jquery:

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
<script type="text/javascript" src="ui.resizable.js"></script>
<script type="text/javascript" src="ui.dialog.js"></script>

Here is the script the dialog: For testing, I am closing the dialog on Renew Membership click, but I actually want it to fire a method I create in asp.net to direct the user to a another page and pass a session variable.

<script type="text/javascript">
    $(document).ready(function() {
        $("#dialog").dialog({
         // autoOpen: false,
            modal: true,
            buttons: { "Renew Membership": function() { $(this).dialog("close"); } }
        });
    });
</script>

<asp:Conent ID="mainConent" runat="server" ContentPlaceHolderID="Content">
<div id="dialog" title="Membership Renewal">
    <p>Uh Oh! Your membership is going to expire.</p><br />
    <p>Hurry up and renew today!</p><br />
    <asp:LinkButton runat="server" Text="Click Here to Renew" 
        onclick="Unnamed2_Click"></asp:LinkButton>
</div>

Here is the click event for the LinkButton:

protected void Unnamed2_Click(object sender, EventArgs e)
{
    UserProfiles userProfile = (UserProfiles)Session["userProfile"];
    Response.Redirect("~/Renew.aspx");
}

What should happen is that when the user clicks the sign-in button, it should popup up the dialog only if the days they have left to expire is <= 30 and if they do, they have the option of clicking the link in the dialog and going to a renew page where I want to pass it a Session variable with a Profile, but that is not being called, so I guess, I would like to know is how can I add the event handler of the button to the dialog and is there a way to set it so that it only comes up once, for example adding a cookie to the users browswer and only showing it if they don't have a cookie set.

Answer 1

I believe this is more of an ASP.NET issue and not a jQuery dialog issue.

I wouldn't use the onClick and PostBackUrl within the same LinkButton. So, take off the PostBackUrl attribute and instead use

protected void Unnamed2_Click(object sender, EventArgs e){
    UserProfiles userProfile = (UserProfiles)Session["userProfile"];
    Response.Redirect("~/Renew.aspx");
}

If you only need to show the control when the user is > 30 days. I would create a user control.

jquery.renewDialog.js

$(document).ready(function() {
    $("#dialog").dialog({
        modal: true
    });
});

RenewalUserControl.ascx

<asp:ScriptManager runat="server" id="ScriptManager1">
  <Scripts>
    <asp:ScriptReference Path="jquery.renewDialog.js" />
  </Scripts>
</asp:ScriptManager>
<div id="dialog" title="Membership Renewal">
    <p>Uh Oh! Your membership is going to expire.</p><br />
    <p>Hurry up and renew today!</p><br />
    <asp:LinkButton runat="server" Text="Click Here to Renew" 
        onclick="Unnamed2_Click" />
</div>

Login.aspx

<uc1:RenewalUserControl runat="server" ID="RenewalUserControl1" Visible="false" />

Login.aspx.cs

if (user.IsExpired)
{
  RenewalUserControl1.Visible = true;
}

Answer 2

Hi,

Thanks for this detailed answer. One question that I have on this is on the usage of the ScriptManager in the user control. If the page that this user control is used in has a Script Manager then this generates errors.

I tried putting the script manager on the page, instead of the user control, but then the javascript functions dont seem to work.

Cheers, Sam

Answer 3

HI everybody,

How can I fires a jquery dialog as a result of an login error ?

I am using Login control on a master page and at server side I have a ctrLogin_OnLoginError method to treat login error.

I´d like to show jquery modal as a result of a login error, but the jquery functions doesn't working. I cannot execute the dialog cause jquery js doesn't load.

I tried to use user control, but I still have a script manager control im my master page, son I cannot use another one. Using the master page script manager turns the user control disabled, cause ths jquery js doesn't load.

Is there a simple way to call this dialog every time I need to show an error im my site ?

thanks, Marcelo