0

I have created SharePoint application page and I have a Dropdownlist (ddlTaskFrequency). On dropdown text changed(Monthly) I have written a jQuery code to show panel2 and hide panel1. it is working fine when the form is saved .

When I click on Edit item it is loading Panel 1 where it has to load panel 2. So the Panel1 which I am hiding through jQuery is not working after post back. How to achieve this.

Any help please.

enter image description here

<asp:Panel ID="Panel1" runat="server">
                    <font face="Arial" class="TextSize">The Due Date Of this Task will be </font>
                    <asp:TextBox ID="txtNoofDays" runat="server" Width="28px"></asp:TextBox>
                    &nbsp;<font face="Arial" class="TextSize">Day(s) Following the Task&nbsp;Start Date<br />
                        <br />
                        <font color="#c00000">The Calculated Due Date is:</font>
                        <asp:TextBox ID="Txtdailyweekly" runat="server" Style="margin-top: 8px" Height="18px"
                            Width="101px" BackColor="#F1F0EF" BorderStyle="None"></asp:TextBox>
                    </font>
                </asp:Panel>


                <asp:Panel ID="Panel2" runat="server">
                    <font face="Arial" class="TextSize">Happens Every </font>
                    <asp:DropDownList ID="ddlMonthDay" runat="server" Height="21px" Width="45px">
                        <asp:ListItem Selected="True" Text="1st" Value="1"></asp:ListItem>
                        <asp:ListItem Text="2nd" Value="2"></asp:ListItem>
                        <asp:ListItem Text="3rd" Value="3"></asp:ListItem>
                        <asp:ListItem Text="4th" Value="4"></asp:ListItem>
                    </asp:DropDownList>
                    &nbsp;<asp:DropDownList ID="ddlMonthWeekDay" runat="server" Height="21px" Width="115px">
                        <asp:ListItem Selected="True" Text="Sunday" Value="0"></asp:ListItem>
                        <asp:ListItem Text="Monday" Value="1"></asp:ListItem>
                        <asp:ListItem Text="Tuesday" Value="2"></asp:ListItem>
                        <asp:ListItem Text="Wednesday" Value="3"></asp:ListItem>
                        <asp:ListItem Text="Thursday" Value="4"></asp:ListItem>
                        <asp:ListItem Text="Friday" Value="5"></asp:ListItem>
                        <asp:ListItem Text="Saturday" Value="6"></asp:ListItem>
                    </asp:DropDownList>
                    <font face="Arial" class="TextSize">&nbsp;of the Month
                        <br />
                        <br />
                        <font color="#c00000">The Calculated Due Date is:&nbsp; </font>
                        <asp:TextBox ID="txtMonthDueDate" runat="server" Height="18px" Width="101px" BackColor="#F1F0EF"
                            BorderStyle="None"></asp:TextBox>
                    </font>
                </asp:Panel>
 pageload(){ 
$(document).ready(function () {


 $('#' + '<%=this.Panel2.ClientID  %>').hide();
                Dailyweekly();

                $('#' + '<%=this.ChkNoofDays.ClientID  %>').change(function () {
                    ddltaskfreqselcted = $('#' + '<%=this.ddlTaskFrequency.ClientID  %> option:selected').text();
                    if (ddltaskfreqselcted == "Daily" && this.checked) {
                        $('#' + '<%=this.Panel1.ClientID  %>').hide();
                        $('#' + '<%=this.Panel2.ClientID  %>').hide();


                    }
                    else {

                        $('#' + '<%=this.Txtdailyweekly.ClientID  %>').val('');
                        $('#' + '<%=this.txtNoofDays.ClientID  %>').val('');
                        $('#' + '<%=this.Panel1.ClientID  %>').show();
                        $('#' + '<%=this.Panel2.ClientID  %>').hide();
                    }


                });
$('#' + '<%=this.ddlTaskFrequency.ClientID  %>').change(function taskfreqchanged() {


                    $('#' + '<%=this.ddlMonthDay.ClientID %>').val('1');
                    $('#' + '<%=this.ddlMonthWeekDay.ClientID %>').val('0');

                    ddltaskfreqselcted = $('#' + '<%=this.ddlTaskFrequency.ClientID  %> option:selected').text();
                    // alert(ddltaskfreqselcted);
                    if (ddltaskfreqselcted == "Daily") {
                        $('#' + '<%=this.Txtdailyweekly.ClientID  %>').val('');
                        $('#' + '<%=this.txtNoofDays.ClientID  %>').val('');

                        $('#' + '<%=this.Panel1.ClientID  %>').show();
                        $('#' + '<%=this.Panel2.ClientID  %>').hide();

                        var Dropdownvalues = $('#' + '<%=this.ddlDayofMonth.ClientID%>').empty();
                        Dailyweekly();

                        $('#' + '<%=this.ChkNoofDays.ClientID  %>').change(function () {
                            if (ddltaskfreqselcted == "Daily" && this.checked) {
                                $('#' + '<%=this.Panel1.ClientID  %>').hide();
                                $('#' + '<%=this.Panel2.ClientID  %>').hide();


                            }
                            else {
                                $('#' + '<%=this.Txtdailyweekly.ClientID  %>').val('');
                                $('#' + '<%=this.txtNoofDays.ClientID  %>').val('');

                                $('#' + '<%=this.Panel1.ClientID  %>').show();
                                $('#' + '<%=this.Panel2.ClientID  %>').hide();
                            }
                            $('#' + '<%=this.ChkNoofDays.ClientID  %>').val('');
                        });

                    }
                    if (ddltaskfreqselcted == "Weekly") {

                        $('#' + '<%=this.Txtdailyweekly.ClientID  %>').val('');
                        $('#' + '<%=this.txtNoofDays.ClientID  %>').val('');

                        $('#' + '<%=this.Panel1.ClientID  %>').show();
                        $('#' + '<%=this.Panel2.ClientID  %>').hide();

                        var Dropdownvalues = $('#' + '<%=this.ddlDayofMonth.ClientID%>').empty();
                        Dailyweekly();

                        $('#' + '<%=this.ChkNoofDays.ClientID  %>').change(function () {

                            if (ddltaskfreqselcted == "Weekly" && this.checked) {
                                $('#' + '<%=this.Panel1.ClientID  %>').hide();
                                $('#' + '<%=this.Panel2.ClientID  %>').hide();


                            }
                            else {
                                $('#' + '<%=this.Txtdailyweekly.ClientID  %>').val('');
                                $('#' + '<%=this.txtNoofDays.ClientID  %>').val('');


                                $('#' + '<%=this.Panel1.ClientID  %>').show();
                                $('#' + '<%=this.Panel2.ClientID  %>').hide();
                            }
                            $('#' + '<%=this.ChkNoofDays.ClientID  %>').val('');
                        });

                    }

                    if (ddltaskfreqselcted == "Monthly") {
                        $('#' + '<%=this.Txtdailyweekly.ClientID  %>').val('');
                        $('#' + '<%=this.txtNoofDays.ClientID  %>').val('');

                        $('#' + '<%=this.Panel1.ClientID  %>').hide();
                        $('#' + '<%=this.Panel2.ClientID  %>').show();

                        var Dropdownvalues = $('#' + '<%=this.ddlDayofMonth.ClientID%>').empty();
                        monthly();

                        $('#' + '<%=this.ChkNoofDays.ClientID  %>').change(function () {

                            if (ddltaskfreqselcted == "Monthly" && this.checked) {
                                $('#' + '<%=this.Panel1.ClientID  %>').hide();
                                $('#' + '<%=this.Panel2.ClientID  %>').hide();
                                $('#' + '<%=this.txtMonthDueDate.ClientID %>').val('');
                            }

                            else {

                                $('#' + '<%=this.Panel1.ClientID  %>').hide();
                                $('#' + '<%=this.Panel2.ClientID  %>').show();
                            }
                            $('#' + '<%=this.ChkNoofDays.ClientID  %>').val('');
                        });
                    }
                    $('#' + '<%=this.lblNameChange.ClientID  %>').text($('#' + '<%=this.ddlTaskFrequency.ClientID  %>').val());
                }); //dropdownchanged
}); 
}
  • I really dislike downvoting people but you need to provide a little more information than this. When the code is not working, is the ready event firing? does the change event get fired? The jQuery selectors that call show() and hide(), do they return any elements? Is jquery itself loading properly? – Derek Gusoff Aug 9 '13 at 3:09
  • Sorry if i am not clear. The code is not working when the page gets poasted back to server. Yes the change event gets fired – santosh kondapalli Aug 9 '13 at 5:00
  • I have included the screen shot for the same if my description is not clear???. Hope i am clear in my quetion – santosh kondapalli Aug 9 '13 at 7:47
0

Hi I have achieved this by including the below validation on the dropdown value changed.

if (ddltaskfreqselcted != "Monthly") {

                $('#' + '<%=this.Panel2.ClientID  %>').hide();
                Dailyweekly();

            }
            else {
                $('#' + '<%=this.Panel1.ClientID  %>').hide();
                monthly();

            }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.