Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 461
  • Last Modified:

Why ASP page (aspx) flick when I select an item from Drop Down List box and how I can prevent it using ajax Update Panel?

  I have few controls in one of my ASP page. Those are drop down list boxes, text box, push button in one <div> area and then I created <asp: Panel..> And in this Panel I have <div> …</div> area to display text to provide users information’s about the first part <div> where all the controls are.
As I select an item from one of the drop down list box the whole windows flicks. Especially the panel that has some text that flicks quite a lot along with the windows. I try to use update panel and it is not working for this drop down list box. I used Update Panel in one of the drop down list box and that is working fine. However the drop down list box that is working with Update Panel, its items is hard coded and it does not go to server side. The drop down list box which is creating the flickering problem got an event onSelectedItemClick. I implemented the event in the code behind C# file.
I am a new at AJAX and your help will be greatly appreciated.
<body id="bodyColor" runat="server">
    

    <script>
		    ....
    </script>

    <form id="myForm" method="post" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"
            AsyncPostBackTimeout="560000" EnablePageMethods="true" />

<div class="greatHead">
               
               <h1 class="test6"> This is your Party Time</h1>
                <br>
                <div style="margin-left: 15px;" class="firstLabel">
                    <p>

                        <label for="listBcolors" style="width: 100px; display: block; float: left;">
                            Colors:
                        </label>                     
                        <asp:UpdatePanel ID="UpDtPanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false"> 
                        <ContentTemplate>   
                        <asp:ListBox ID="listBcolors" runat="server" Rows="1" AutoPostBack="True">
                            <asp:ListItem Value="01">1 - Blue</asp:ListItem>
                            <asp:ListItem Value="02">2 - Red</asp:ListItem>
                            <asp:ListItem Value="03">3 - Orange</asp:ListItem>
                            <asp:ListItem Value="04">4 - Green</asp:ListItem>
                            <asp:ListItem Value="05">5 - White</asp:ListItem>
                            <asp:ListItem Value="06">6 - Purple</asp:ListItem>
                            <asp:ListItem Value="07">7 - Forest Green</asp:ListItem>
                            <asp:ListItem Value="08">8 - Purple</asp:ListItem>
                            <asp:ListItem Value="09">9 - Pink</asp:ListItem>
                        </asp:ListBox>
                        </ContentTemplate>  
                        </asp:UpdatePanel>  
                    </p>

                    <p> 
                        <label for="listBStates" class="shortlabel" style="width: 100px; display: block; float: left;" >
                            States:
                        </label>
                        <asp:ListBox ID="listBStates" runat="server" Rows="1" AutoPostBack="True" OnSelectedIndexChanged="listBStates_changed">
                        </asp:ListBox><br />
                    </p>


                    <p style="padding-top: 5px;">
                        <label for="listBPartyDate" style="padding: none; margin-top: 5px; width: 100px; display: block; float: left;">
                              Party  Date:
                        </label> 
                        <asp:ListBox ID="istBPartyDate" runat="server" Rows="1"></asp:ListBox>
                    </p>
                      
                    <span style="width: 100%; text-align: center; padding-top: 10px">
                       
                        <asp:Button ID="updateTest" runat="server" Text="Update" Width="50px" OnClick="updateTest_Click"
                            CausesValidation="true"></asp:Button>
                            <br />                        
                    </span>
                    
                </div>
            </div>


<!--Ajax container area  Code-->
        
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Panel ID="pnlNewYork" runat="server" Visible="False">
                    <br>
                    .....
                    <div class="first">
                       .....
                       ......
                    </div>
                  
                </asp:Panel>
                
     
                <asp:Panel ID="pnMessage" runat="server" Visible="False">
                    <br>
                   
                    <div class="fourth" style="width: 500px">
                        <b class="test1"></b><b class="test2"></b><b class="test3"></b><b class="test4">
                        </b>
                         
                        <div class="test5" align="left">
                            <h1 class="test6">
                                This area is flickering </h1>
                            <p>
                                <br>
                                Choose a state and date for your favourite party and ww will book your correct flight and hotel. Give us
                                about 15 min please. 
                                <br>
                                <br>
                            </p>
                        </div>
                        ....
                        .....
                        
                       
                    </div>
                   
                    <br>
                </asp:Panel>
                
               
                <table width="100%">
                    <tr>
                        <td>
                            <asp:Panel ID="pnMoreMessage" runat="server">
                                <br>
                               
                                <div class="blueWhite">
                                    
                                    </b>
                                   
                                    <div class="innerBorder">
                                        <h1 class="redBorder">
                                            <asp:Label ID="lblBestParty runat="server">Party Location</asp:Label>
                                        </h1>
                                        <br>
                                        <div class="PinkClass">
                                            <asp:Panel runat=server ID=pnThisIDChange>
                                                
                                               ....
                                               .....
                                            </asp:Panel>

                                            .......
                                        </div>
                                    </div>
                                   .....
                                </div>
                                
                                <br>
                              
                            </asp:Panel>
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="updateTest" />
            </Triggers>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Open in new window

0
WantToBe_JediIT
Asked:
WantToBe_JediIT
  • 4
  • 2
1 Solution
 
WantToBe_JediITAuthor Commented:
How I can implement an <asp:UpdatePanel..> with an Triggers so that when an item in the list box is selected that is not default the entire page does not flick.

Please help me to implement this.

Thanks a lot

Regards
Jedi
0
 
WantToBe_JediITAuthor Commented:
First of all thank you very much for your time and I really appreciated. I recently join in a company where my current project is make few enhancement in an ASP Page (aspx). This page has few controls. Those are drop down list boxes, text box, push button etc
What I am trying to achieve is to implement a Update Panel ASP-AJAX functionality.  As I select an item from one of the drop down list box the whole page flicks. Especially this page has a progress bar and that shows up for  few sec when I select an item from listbox, which shouldn’t This page has other hidden Panel where Update Panel being implemented. . I try to use update panel and it is not working for this drop down list box. I used Update Panel in one of the drop down list box and that is working fine. However the drop down list box that is working with Update Panel, its items is hard coded and it does not go to server side. The drop down list box which is creating the flickering problem got an event onSelectedItemClick. I implemented the event in the code behind C# file.

I am new at AJAX and your help will be greatly appreciated and will save my life. This is my new job and I need to implement it in less than 24 hours.

So here is the code

  

<p>
 
                        <label for="listBcolors" style="width: 100px; display: block; float: left;">
                            Colors:
                        </label>                    
                        <asp:UpdatePanel ID="UpDtPanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                        <ContentTemplate>  
                        <asp:ListBox ID="listBcolors" runat="server" Rows="1" AutoPostBack="True">
                            <asp:ListItem Value="01">1 - Blue</asp:ListItem>
                            <asp:ListItem Value="02">2 - Red</asp:ListItem>
                            <asp:ListItem Value="03">3 - Orange</asp:ListItem>
                            <asp:ListItem Value="04">4 - Green</asp:ListItem>
                            <asp:ListItem Value="05">5 - White</asp:ListItem>
                            <asp:ListItem Value="06">6 - Purple</asp:ListItem>
                            <asp:ListItem Value="07">7 - Forest Green</asp:ListItem>
                            <asp:ListItem Value="08">8 - Purple</asp:ListItem>
                            <asp:ListItem Value="09">9 - Pink</asp:ListItem>
                        </asp:ListBox>
                        </ContentTemplate> 
                        </asp:UpdatePanel> 
                    </p>

Open in new window


This is working fine but this not what I want..what I want to extend my Update Panel among few other control and utilize it functionality

<body id="bodyColor" runat="server">
   
 
    <script>
                                             ....
    </script>
 
    <form id="myForm" method="post" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"
            AsyncPostBackTimeout="560000" EnablePageMethods="true" />
 
<div class="greatHead">
              
               <h1 class="test6"> This is your Party Time</h1>
                <br>
                <div style="margin-left: 15px;" class="firstLabel">
                    <p>
 
                        <label for="listBcolors" style="width: 100px; display: block; float: left;">
                            Colors:
                        </label>  
                   
                        <asp:UpdatePanel ID="UpDtPanel2" runat="server" UpdateMode="Conditional" >
                        <ContentTemplate>  

                        <asp:ListBox ID="listBcolors" runat="server" Rows="1" AutoPostBack="True">
                            <asp:ListItem Value="01">1 - Blue</asp:ListItem>
                            <asp:ListItem Value="02">2 - Red</asp:ListItem>
                            <asp:ListItem Value="03">3 - Orange</asp:ListItem>
                            <asp:ListItem Value="04">4 - Green</asp:ListItem>
                            <asp:ListItem Value="05">5 - White</asp:ListItem>
                            <asp:ListItem Value="06">6 - Purple</asp:ListItem>
                            <asp:ListItem Value="07">7 - Forest Green</asp:ListItem>
                            <asp:ListItem Value="08">8 - Purple</asp:ListItem>
                            <asp:ListItem Value="09">9 - Pink</asp:ListItem>
                        </asp:ListBox>
                        
                    </p>
 
                    <p>
                        <label for="listBStates" class="shortlabel" style="width: 100px; display: block; float: left;" >
                            States:
                        </label>
                        <asp:ListBox ID="listBStates" runat="server" Rows="1" AutoPostBack="True" OnSelectedIndexChanged="listBStates_changed">
                        </asp:ListBox><br />
                    </p>
 
 
                    <p style="padding-top: 5px;">
                        <label for="listBPartyDate" style="padding: none; margin-top: 5px; width: 100px; display: block; float: left;">
                              Party  Date:
                        </label>
                        <asp:ListBox ID="istBPartyDate" runat="server" Rows="1"></asp:ListBox>
                    </p>


                      </ContentTemplate> 
                            <Triggers>
                                      <asp:AsyncPostBackTrigger ControlID="listBStates" />
                          </Triggers>
                       </asp:UpdatePanel> 
                     
                    <span style="width: 100%; text-align: center; padding-top: 10px">
                      
                        <asp:Button ID="updateTest" runat="server" Text="Update" Width="50px" OnClick="updateTest_Click"
                            CausesValidation="true"></asp:Button>
                            <br />                       
                    </span>
                   
                </div>
            </div>
 
 
<!--- This whole progress bar is flickering, when I select a different State
     from  listBStates then the following Progress Bar should not shows up
  even though its just appears and disappeared right away --->
<asp:UpdateProgress ID="UDateProgr1" runat="server" DisplayAfter="100">
            <ProgressTemplate>
                <div align="left">
                    <img src="../../Images/party.gif" alt="loading data..." /></div>
            </ProgressTemplate>
        </asp:UpdateProgress>
 
</br>
 
 
 
<!--Ajax container area  Code-->
       
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Panel ID="pnlNewYork" runat="server" Visible="False">
                    <br>
                    .....
                    <div class="first">
                       .....
                       ......
                    </div>
                 
                </asp:Panel>
               
    
                <asp:Panel ID="pnMessage" runat="server" Visible="False">
                    <br>
                  
                    <div class="fourth" style="width: 500px">
                        <b class="test1"></b><b class="test2"></b><b class="test3"></b><b class="test4">
                        </b>
                        
                        <div class="test5" align="left">
                            <h1 class="test6">
                                This area is flickering </h1>
                            <p>
                                <br>
                                Choose a state and date for your favourite party and ww will book your correct flight and hotel. Give us
                                about 15 min please.
                                <br>
                                <br>
                            </p>
                        </div>
                        ....
                        .....
                        
                    </div>
                  
                    <br>
                </asp:Panel>

            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="updateTest" />
            </Triggers>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Open in new window



Best regards,

Jedi
0
 
sammySeltzerCommented:
They flick because you se AutoPostBack to "True"
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
WantToBe_JediITAuthor Commented:
Hi,
    Thank you and I have been reading a lot about Update Panel and I don't think it is because of AutoPostBack is "True"


Jedi
0
 
sammySeltzerCommented:
How did you resolve it then?
0
 
WantToBe_JediITAuthor Commented:
I still have not received any solution for this question
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now