locked
update UI dialog pop up without refreshing the page RRS feed

  • Question

  • User-1418038711 posted

    <div class="votecell post-layout--left"> <div class="js-voting-container grid fd-column ai-stretch gs4 fc-black-200" data-post-id="61534955"> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-vote-down-btn grid--cell s-btn s-btn__unset c-pointer" title="This question does not show any research effort; it is unclear or not useful" aria-pressed="false" aria-label="down vote" data-selected-classes="fc-theme-primary"></button><button class="js-favorite-btn s-btn s-btn__unset c-pointer py4 js-gps-track" aria-pressed="false" aria-label="favorite" data-selected-classes="fc-yellow-600" data-gps-track="post.click({ item: 1, priv: -1, post_type: 1 })" title="Click to mark as favorite question (click again to undo)"></button></div> </div> <div class="postcell post-layout--right"> <div class="post-text" itemprop="text">

    I have been pulling my hair out for 8 hours now, trying to get this little piece of code to work. Any help would be greatly appreciated!

    I'm trying to create a address verification popup. the popup has 2 div's one for the shipping address and one for the billing address. those div's also have button for the user to select which address he wants to use.

    I'm using a asp:Repeater to populate the addresses div's

    What I'm trying to achieve is. say the user picks the suggested shipping address, I want to hide the shipping address div but still keep the UI dialog open and also keep the billing address div visible for the user to also select which billing address he wants to use. this has to be done from code behind.

    I'm able to hide the panel but as soon as the button is clicked the page refreshes and the UI dialog goes to the bottom of the page and it's not a pop up anymore.

    After lots of research, seems like the best option to achieve this is to use the asp:UpdatePanel(please correct me if there are better options) to hide the panel without refreshing the page.

    if anyone can give some help on how to achieve this, it would be really appreciated and thanks in advance.

    Here is the code (a little sanitized):

    aspx code:

    <asp:Panel ID="pnlAddressVerificationPopup" CssClass="addrVerifPopup" Width="600px" runat="server" 
    
    Visible="false">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="addressUpdatePanel" UpdateMode="Always" runat="server">
        <Triggers>
            <asp: ControlID="rptrAddressVerification" EventName="ItemCommand" />
       </Triggers>
       <ContentTemplate>
    
           <asp:Repeater ID="rptrAddressVerification" runat="server" OnItemCommand="rptrAddressVerification_ItemCommand">
               <HeaderTemplate></HeaderTemplate>
               <ItemTemplate>
                   <div>
                       <div id="shippingAddress" runat="server">
                           <div>
                               <asp:Panel ID="pnlAddressEntered" Style='<%# DataBinder.Eval(Container.DataItem, "PanelStyle") %>' runat="server">
                                   <asp:Label ID="lblEnteredAddress" runat="server" Style="font-size: 15px; margin-top: 10px;" Text='<%# DataBinder.Eval(Container.DataItem, "EnteredAddress") %>'></asp:Label>
    
                                   <div class="AddressPanelButons">
                                       <asp:LinkButton ID="btnUseAddressEntered" runat="server" CssClass="clickLink linkButton" CommandName="btnUseAddressEntered" Text="<%$Resources:AddressEnteredButton%>"></asp:LinkButton>
                                       <asp:LinkButton ID="btnEditAddressEntered" runat="server" CssClass="clickLink linkButton" CommandName="btnEditAddressEntered" Text="<%$Resources:buttonAddressEdit%>"></asp:LinkButton>
                                   </div>
                               </asp:Panel>
    
                               <asp:Panel ID="pnlAddressSugested" class="AddressPanel" Style="float: right;" runat="server">
                                   <asp:Label ID="lblSuggestedAddress" runat="server" Style="font-size: 15px; margin-top: 10px;" Text='<%# DataBinder.Eval(Container.DataItem, "SuggestedAddress") %>'></asp:Label>
    
                                   <div style="font-size: 15px; margin-top: 20px; font-weight: bold; text-align: center; width: 100%; ; bottom: 10px;">
                                       <asp:LinkButton ID="btnUseAddressSuggested" runat="server" CssClass="clickLink linkButton" CommandName="btnUseAddressSuggested" Text="<%$Resources:AddressSuggestedButton%>"></asp:LinkButton>
                                   </div>
                               </asp:Panel>
                           </div>
                           </div>
                   </div>
               </ItemTemplate>
               <FooterTemplate></FooterTemplate>
           </asp:Repeater>
       </ContentTemplate>
    </asp:UpdatePanel>

    .cs code

    private void LoadAddress(Address AddressResults)
    {
      for (int i = 0; i < reply.AddressResults.Length; i++)
      {
        DataTable dtAddressValues = new DataTable();
        dtAddressValues.Columns.Add("EnteredAddress", typeof(String));
        dtAddressValues.Columns.Add("SuggestedAddress", typeof(String));
    
        DataRow drValues = dtAddressValues.NewRow();
        drValues["EnteredAddress"] = "<p>" + AddressResults[i].EnteredAddress.streetName + "<br>" + 
        AddressResults[i].EnteredAddress.city + "," + AddressResults[i].EnteredAddress.state + " " + 
        AddressResults[i].EnteredAddress.zip;
        drValues["SuggestedAddress"] = "<p>" + AddressResults[i].Suggested.streetName + "<br>" + 
        AddressResults[i].Suggested.EnteredAddress.city + "," + 
        AddressResults[i].Suggested.EnteredAddress.state + " " + 
        AddressResults[i].Suggested.EnteredAddress.zip;
    
        dtAddressValues.Rows.Add(drValues);
       }
    
       rptrAddressVerification.DataSource = dtAddressValues;
       rptrAddressVerification.DataBind();
    
       pnlAddressVerificationPopup.Visible = true;
       this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), Guid.NewGuid().ToString(), 
       "$(document).ready(function() {$(\"#pnlAddressVerificationPopup\").dialog({width: 'auto' , 
        minWidth: 600, height: 'auto', modal: true, resizable: true, autoOpen: true, closeOnEscape: 
        false, open: function (event, ui) {$('.ui-dialog').css('z-index', 8001);$('.ui-widget- 
        overlay').css('z-index', 8000);},close: function (event, ui){closeAddressValidationPopup();} }); 
        });", true);
         }
    
    
         protected void rptrAddressVerification_ItemCommand(object source, RepeaterCommandEventArgs e)
         {
             HtmlGenericControl addressPanel = (HtmlGenericControl)e.Item.FindControl("pnlAddresses");
                addressPanel.Visible = false;
          }

    </div> </div>

    Friday, May 1, 2020 2:50 PM

All replies

  • User1535942433 posted

    Hi raffaa,

    Accroding to your description and codes,I'm guessing that when you have fire popup ItemCommand event,the Panel is unvisible but the dialog popup cann't show.

    As far as I think,you could add ClientScript.RegisterStartupScript in the rptrAddressVerification_ItemCommand.

    More details,you could refer to below codes:

         protected void rptrAddressVerification_ItemCommand(object source, RepeaterCommandEventArgs e)
         {
             HtmlGenericControl addressPanel = (HtmlGenericControl)e.Item.FindControl("pnlAddresses");
                addressPanel.Visible = false;
                this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), Guid.NewGuid().ToString(),"$(document).ready(function() {$(\"#pnlAddressVerificationPopup\").dialog({width: 'auto' ,  minWidth: 600, height: 'auto', modal: true, resizable: true, autoOpen: true, closeOnEscape:false, open: function(event, ui) {$('.ui-dialog').css('z-index', 8001);$('.ui-widget-  overlay').css('z - index', 8000);},close: function (event, ui){closeAddressValidationPopup();} }); });", true);
    
          }

    Best regards,

    Yijing Sun

    Tuesday, May 5, 2020 8:27 AM