[Solved] Prevent LightBox closing

[Jon]

Hi,

I  am opening a contact form in a LightBox similar to the template demo. The form is a usercontrol inside the LightBox Item Template.
When the form is submitted - how can I keep the LightBox open so I can display a 'sent' message to the user? At present submitting the form closes the LightBox.

Cheers,

Jack 

[Princy]

Hi Jack,

Please have a look into the sample code snippet which works fine at my end.

ASPX:

<telerik:RadLightBox ID="FeedbackLightBox" runat="server" Width="400px" Height="250px"
    CssClass="lb_feedback" Modal="true">
    <ClientSettings>
        <AnimationSettings HideAnimation="Resize" NextAnimation="Fade" PrevAnimation="Fade"
            ShowAnimation="Resize" />
    </ClientSettings>
    <Items>
        <telerik:RadLightBoxItem>
            <ItemTemplate>
                <asp:Label ID="FormTitle" runat="server" Text="SHARE YOUR FEEDBACK" CssClass="feedback_header"></asp:Label>
                <br />
                <asp:Label Text="FirstName:" ID="FirstNameLabel" runat="server" CssClass="feedback_label" />
                <telerik:RadTextBox runat="server" ID="FirstNameTextBox" Width="245px" />
                <br />
                <asp:Label Text="LastName:" ID="LastNameLabel" runat="server" CssClass="feedback_label" />
                <telerik:RadTextBox runat="server" ID="LastNameTextBox" Width="245px" />
                <br />
                <asp:Label Text="Email:" ID="EmailLabel" runat="server" CssClass="feedback_label" />
                <telerik:RadTextBox runat="server" ID="EmailTextBox" Width="245px" />
                <br />
                <asp:Label Text="Comments:" ID="CommentsLabel" runat="server" CssClass="feedback_label" />
                <telerik:RadTextBox ID="RadTextBox1" runat="server" Resize="None" TextMode="MultiLine"
                    Width="245px" Height="100px">
                </telerik:RadTextBox>
                <br />
                <asp:Label ID="Label1" runat="server" Text="Mail Sent" Style="display: none;" CssClass="demo">
                </asp:Label>
                <telerik:RadButton ID="RadButton1" Text="Submit Feedback" runat="server" Skin="Silk" CssClass="submit_feedback_btn rbPrimaryButton" AutoPostBack="false" OnClientClicked="ShowMessage">
                </telerik:RadButton>
            </ItemTemplate>
        </telerik:RadLightBoxItem>
    </Items>
</telerik:RadLightBox>

JavaScript:

<script type="text/javascript">
    function OpenCodeLightBox() {
        var lightBox = $find('<%=FeedbackLightBox.ClientID %>');
        lightBox.show();
    }
    function ShowMessage() {
        var lightBox = $find('<%=FeedbackLightBox.ClientID %>');
        var label= lightBox.get_element().getElementsByClassName("demo");
        label.FeedbackLightBox_Label1.style.display = "block";
    }
</script>

Thanks,
Princy.

[Jon]

Thanks Princy,

I just can't get this to work for some reason; also would prefer to use a usercontrol inside the LightBox if that's at all possible for getting it to stay open.

Cheers,
Jack

[Princy]

Hi Jack,

Please try the sample code snippet which works fine at my end.

ASPX:

<telerik:RadButton ID="RadButton1" runat="server" Text="OpenFeedBackLightBox" AutoPostBack="false"
    OnClientClicked="OpenFeedbackLightBox">
</telerik:RadButton>
<telerik:RadLightBox ID="FeedbackLightBox" runat="server" Width="400px" Height="250px" Modal="true">
    <ClientSettings>
        <AnimationSettings HideAnimation="Resize" NextAnimation="Fade" PrevAnimation="Fade"
            ShowAnimation="Resize" />
    </ClientSettings>
    <Items>
        <telerik:RadLightBoxItem>
            <ItemTemplate>
                <uc1:WebUserControl ID="WebUserControl1" runat="server" />
            </ItemTemplate>
        </telerik:RadLightBoxItem>
    </Items>
</telerik:RadLightBox>

ASCX:

<asp:Label ID="FormTitle" runat="server" Text="SHARE YOUR FEEDBACK"></asp:Label>
<br />
<asp:Label Text="FirstName:" ID="FirstNameLabel" runat="server" />
<telerik:RadTextBox runat="server" ID="FirstNameTextBox" Width="245px" />
<br />
<asp:Label Text="Email:" ID="EmailLabel" runat="server" />
<telerik:RadTextBox runat="server" ID="EmailTextBox" Width="245px" />
<br />
<asp:Label ID="Label1" runat="server" Text="Mail Sent" Style="display: none;" CssClass="demo">
</asp:Label>
<telerik:RadButton ID="RadButton1" Text="Submit Feedback" runat="server" Skin="Silk"
    AutoPostBack="false" OnClientClicked="ShowMessage">
</telerik:RadButton>

JavaScript:

<script type="text/javascript">
    function OpenFeedbackLightBox() {
        var lightBox = $find('<%=FeedbackLightBox.ClientID %>');
        lightBox.show();
    }
    function ShowMessage() {
        var lightBox = $find('<%=FeedbackLightBox.ClientID %>');
        var label = lightBox.get_element().getElementsByClassName("demo");
        lightBox.get_element().getElementsByClassName("demo").FeedbackLightBox_WebUserControl1_Label1.style.display = "block";
    }
</script>

Hope this will helps you.
Thanks,
Princy.