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
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
3 Answers, 1 is accepted
0

Princy
Top achievements
Rank 2
answered on 26 Feb 2014, 08:48 AM
Hi Jack,
Please have a look into the sample code snippet which works fine at my end.
ASPX:
JavaScript:
Thanks,
Princy.
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.
0

Jon
Top achievements
Rank 1
answered on 14 Mar 2014, 08:08 AM
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
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
0

Princy
Top achievements
Rank 2
answered on 19 Mar 2014, 03:53 AM
Hi Jack,
Please try the sample code snippet which works fine at my end.
ASPX:
ASCX:
JavaScript:
Hope this will helps you.
Thanks,
Princy.
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.