Hi all,
I am using an collapsible Panel Extender that has a panel with textboxes used for sending a message.
When a user needs to send a message he expands the panel then fills in the boxes and presses the send button that
will send the message and collapse the panel as well.
I want to prevent the panel from collapsing if the required field validators are not valid.
I am not that great in javascript so please try and elaborate as much as possible.
Thanks.
Hi Itay,
Itay molecule:
I am not that great in javascript so please try and elaborate as much as possible.
Is is this javascript that collapses the panel?
Here is some javascript code that checks on the clientside if the page is valid. Merge this code with your javascript ;)
<script type="text/javascript"> function checkValidity() { if (Page_ClientValidate() == false) {//handle the fact that some controls are not valid! } } </script>
If you have questions/remarks please do so!
Kind regards,
Wim
Would it be a solution to use a little updatepanel for an async postback allowing you (the server) to either:
- disable or hide the ExpandControlID ?
- (temporarily) change the target control id of the CollapsiblePanelExtender to a hidden button (style="display:none;") ?
Actually this is not an option because my collapse button is the "send" button that is supposed to check the validation
of the form.
Hi Itay,
Actually this is not an option because my collapse button is the "send" button that is supposed to check the validation
of the form.
My solution will do!
If you allow javascript in the browser offcourse.
Give me your panelcode and I'll show you what to adapt!
Kind regards,
wim
Wim Hi,
My reply wasn't ment for you i am sure your solution is the way to do it.
Here is my code thanks alot for the help.
c#
protectedvoid ImageButton1_Click(object sender,ImageClickEventArgs e){
sendmail sendusamail =newsendmail();
sendusamail.sendmail1(Subject.Text + "from: " + From.Text );
}
ASPX
<body>
<formid="form1"runat="server">
<div>
<asp:ScriptManagerID="ScriptManager1"runat="server">
</asp:ScriptManager><asp:ImageButtonID="ImageButton1"runat="server"ImageUrl="~/animalsbusinessid/c2a1_66.png"OnClick="ImageButton1_Click1"CausesValidation="False"/>
<asp:PanelID="Panel1"runat="server"Height="7px"Width="376px"Direction="RightToLeft"HorizontalAlign="Center">
<asp:LabelID="Label1"runat="server"Font-Bold="True"></asp:Label>
<asp:TextBoxID="From"runat="server"Columns="23"></asp:TextBox><br/>
<asp:TextBoxID="UsersEmail"runat="server"Columns="23"></asp:TextBox>
<asp:TextBoxID="Subject"runat="server"Columns="23"></asp:TextBox>
<asp:TextBoxID="Body"runat="server"Columns="30"Rows="8"TextMode="MultiLine"></asp:TextBox>
<br/>
<asp:RequiredFieldValidatorID="RequiredFieldValidator2"runat="server"ControlToValidate="UsersEmail"
Display="Dynamic"ErrorMessage="please fill in your address"Font-Bold="False"Font-Size="13px"></asp:RequiredFieldValidator><asp:RequiredFieldValidatorID="RequiredFieldValidator1"runat="server"ControlToValidate="From"
Display="Dynamic"ErrorMessage="please fill in your name"Font-Bold="False"Font-Size="13px"></asp:RequiredFieldValidator><asp:RequiredFieldValidatorID="RequiredFieldValidator3"runat="server"ControlToValidate="Body"
Display="Dynamic"ErrorMessage="write your message"Font-Bold="False"Font-Size="13px"></asp:RequiredFieldValidator><br/><asp:ImageButtonID="ImageButton2"runat="server"ImageUrl="~/animalsbusinessid/mailto_10.png"OnClick="ImageButton1_Click"/>
<asp:RegularExpressionValidatorID="RegularExpressionValidator1"runat="server"ControlToValidate="UsersEmail"
Display="Dynamic"ErrorMessage="this is not a valid email address"Font-Bold="False"Font-Size="13px"ValidationExpression="\w+([-+.']\w+)*@.\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator></asp:Panel>
</div>
<ajaxToolkit:CollapsiblePanelExtenderID="cpe"runat="server"
TargetControlID="Panel1"
CollapsedSize="30"
ExpandedSize="500"
Collapsed="True"
ExpandControlID="ImageButton1"
CollapseControlID="ImageButton2"
AutoCollapse="False"
AutoExpand="False"
ScrollContents="False"
TextLabelID="Label1"
CollapsedText="Show Details..."
ExpandedText="Hide Details"ExpandDirection="Vertical">
</ajaxToolkit:CollapsiblePanelExtender>
</form>
</body>
Hi Itay,
The following code should do the trick.
More info about the $find function here:http://asp.net/AJAX/Documentation/Live/ClientReference/Sys/ApplicationClass/SysApplicationFindComponentMethod.aspx
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function handleCollapse(extenderId)
{
//Find your CollapsiblePanel Behavior on the page.
var myBehavior = $find(extenderId)//if the page is not valid, do something
if(!Page_ClientValidate())
{
//what I do here is dispose the behavior. This way the collapse will be cancelled.
myBehavior.dispose();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="my image.jpg" OnClick="ImageButton1_Click1" CausesValidation="False" />
<asp:Panel ID="Panel1" runat="server" Height="7px" Width="376px" Direction="RightToLeft" HorizontalAlign="Center">
<asp:Label ID="Label1" runat="server" Font-Bold="True"></asp:Label>
<asp:TextBox ID="From" runat="server" Columns="23"></asp:TextBox><br />
<asp:TextBox ID="UsersEmail" runat="server" Columns="23"></asp:TextBox>
<asp:TextBox ID="Subject" runat="server" Columns="23"></asp:TextBox>
<asp:TextBox ID="Body" runat="server" Columns="30" Rows="8" TextMode="MultiLine"></asp:TextBox>
<br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="UsersEmail"Display="Dynamic" ErrorMessage="please fill in your address" Font-Bold="False" Font-Size="13px"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="From"Display="Dynamic" ErrorMessage="please fill in your name" Font-Bold="False" Font-Size="13px"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="Body"Display="Dynamic" ErrorMessage="write your message" Font-Bold="False" Font-Size="13px"></asp:RequiredFieldValidator><br />
<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="confirm_icon.gif" OnClick="ImageButton1_Click"OnClientClick="handleCollapse('cpe')"/>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="UsersEmail"Display="Dynamic" ErrorMessage="this is not a valid email address" Font-Bold="False" Font-Size="13px" ValidationExpression="\w+([-+.']\w+)*@.\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator></asp:Panel>
</div>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server"TargetControlID="Panel1"CollapsedSize="30"ExpandedSize="500"Collapsed="True"ExpandControlID="ImageButton1"CollapseControlID="ImageButton2"AutoCollapse="False"AutoExpand="False"ScrollContents="False"TextLabelID="Label1"CollapsedText="Show Details..."ExpandedText="Hide Details"ExpandDirection="Vertical" >
</ajaxToolkit:CollapsiblePanelExtender>
</form>
</body>
</html>
If you have questions/remarks please do so!
Kind regards,
Wim
Thanks alot Wim,
Everything is almost up and running.
Just one little thing.
My collapse button doesn't collapse the panel on the first click even if the validation are valid.
Only the second time i click the button the panel collapeses back.
Any thoughts?
Hi Itay,
Hmm, that behavior is not right :)
Did you also have that behavior when you use my code example AS IS? Or is it only specific to your code?
If it is only occuring in your code, then please give me the code that replicates this behavior.
If it is also in my example, then I must say that it was not happening to me!
Can you please give me your browser version where you are noticing this behavior?
Also try your code in another browser and see if it also happens over there.
Please comment on my observations.
Kind regards,
Wim
Hi,
I tried using your code and the same thing happened. I will be more specific.
After expanding the panel i press the collapse panel in order to check that it won't collapse if not valid.
Then i fill in the required filled and press the collapse button again this time no none of the required fields error messages pop up
but the panel doesn't collapse as well then i press the collapse button again and it collapses the panel from there on
expanding or collapsing the panel works with a single click.
I did have a problem that every collapse or expanding the page would flicker (postback)
solved it with adding the
suppresspostback="true"
to theCollapsiblePanelExtender.
I am using IE7 version 7.0.5730.11
and again thanks for the help.
Wim do you have any idea to how i can resolve this problem?
Wim do you have any idea to how i can resolve this problem?
Sorry Itay that I didn't get back to you any sooner ....
I looked at the example again (the one I created):
it is not good!Hi Wim
Every thing works great just one little thing
in order to send the message on the panel
i need the collapse button/img ti initialize a postback calling the sendmail function
is there a way that the javascript function will create the postback as well?
Hi itay,
Ok I forgot about that functionality you needed.
I didn't try it yet, but I think you could use an ImageButton for that second one. The IMG that triggers the javascript. Then just set the javascript function in the OnClientClick of it. ImageButtons have those right? Then I think it's possible to NOT let the button postback until the page is valid. Look at the button's properties. Is it the CausesValidation property, I'm not sure ...
I would go for a setup like that!
Please give it a try and if it doesn't work out I'll look into it.
Kind regards,
Wim
Wim thanks
it works just fine
still getting a page refresh on the onclick="... from the image button
but that's expected
i will try to rap it up in an update panel.
Thanks a lot
hope some day i will the ability to help you back.
No comments:
Post a Comment