locked
Jquery dialog not working in Master Pages but OK in content pages RRS feed

  • Question

  • User1343581070 posted

    Hi,

          I have a master page with a login button . I want to display a Jquery popup dialog form with the login data fields when the user clicks the login button .  I have used the following code in my master page

    in the head section

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"/>

     <link rel="stylesheet" href="/resources/demos/style.css"/>

     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

     <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <script type="text/javascript">

     

            $(function ShowPopUpLogin() {

                $[id$ = PopupLogin].dialog({

                    width: 750,

                    title: "Enter Login Details",

                });

            })

    </script>

    and inside the form tag

     

    <form id="form1" runat="server">

       <div id="PopupLogin" style="display:none;" >

             Login Test

           </div>    

       <section style="left:910px;top:82px;position:absolute;font-family:'AvantGarde Bk BT';font-weight:bold;">

          <asp:button ID="LoginButton" Autopostback="false"  runat="server" OnClientClick="ShowPopUpLogin();"  CausesValidation="false" Text="Login"       

            BackColor="#ff6a00" ForeColor="White"></asp:button>         

       </section>

    </form

    The popup does not display even though the ShowPopUpLogin function does execute . If I use the login control in a content page then there is no problem

    Please help

    regards

    Sanjish

    Sunday, August 7, 2016 5:40 PM

Answers

  • User1343581070 posted

    Hello Fei Han,

                            The Jquery dialog was very frustrating , so i opted for Bootstrap Modal dialog and it is working fine . Thanks a lot for your support

    Regards

    Sanjish

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 18, 2016 4:55 AM

All replies

  • User61956409 posted

    Hi Sanjish,

    Firstly, please debug the code to make sure if you could find the <div> “PopupLogin” before you initiate jQuery dialog.

    Secondly, according to your code, we could find that you are using asp.net button control, which will cause page post back and web page will be reloaded after you click the button. You could make the function return false to prevent it.

    <asp:Button ID="LoginButton" Autopostback="false" runat="server" OnClientClick="return ShowPopUpLogin();" CausesValidation="false" Text="Login" BackColor="#ff6a00" ForeColor="White"></asp:Button>
    function ShowPopUpLogin() {
    
        $('[id$ = PopupLogin]').dialog({
            width: 750,
            title: "Enter Login Details",
    
        });
    
        return false;
    }
    

    Best Regards,

    Fei Han



    Monday, August 8, 2016 7:59 AM
  • User1343581070 posted

    Hi,

            I tried it your way but still not working . Is it because there is no space on the form  to display the popup ? My entire code is given below

    <%@ Master Language="VB" CodeFile="Frontend.master.vb" Inherits="MasterPages_Frontend" AutoEventWireup="true" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <meta charset="utf-8"/>
    
        <title></title>
    <!--Note we have used section tags in master page instead of div tags because in frmregistration.aspx we have used div tags and changed line height -->
    
    <!--of divs to compress the data entry form .If we had used div tags in the master page then even the master page controls would have shrunk -->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
    
    
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"/>
    
      <link rel="stylesheet" href="/resources/demos/style.css"/>
    
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    
      <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    
    
        <style type="text/css">
             .txtbox
            {
                border-top-left-radius: 20px;
                border-top-right-radius: 20px;
                border-bottom-left-radius: 20px;
                border-bottom-right-radius: 20px;
            }
    
               .ui-dialog > .ui-widget-header {text-align:center;color:white;background: Brown;}
               .ui-dialog .ui-dialog-content  {
                    border: 0;
                    padding: .5em 1em;
                    background:  #ffd800;
                    overflow: auto;
                    zoom: 1;
                       }
          .ui-dialog-titlebar{
              height:30px;
          }
          .ui-dialog-titlebar-close {
                    ;
                    right:0;   
                    background:  #ccbebe;
          }          
    
    
        </style>
    
        <script type="text/javascript">
    
            function ShowPopUpLogin() {
                alert("awit");
                $('[id$ = PopupLogin]').dialog({
                    width: 750,
                    title: "Enter Login Details",
                    
                });
    
                return false;
            }
               
        </script> 
    
        <asp:ContentPlaceHolder id="head" runat="server">
    
    
    
        </asp:ContentPlaceHolder>
        <link href="../App_Themes/Monochrome/Menu.css" rel="stylesheet" />
    
    
    </head>
    <body>
    
    
    
      <form id="form1" runat="server">
    
            <div id="PopupLogin" style="display:none;" >
                <table >
                <tr>
                <td class="label">User Name:</td>
                <td>
                <asp:TextBox ID="txtUserName" ClientIDMode="Static"  runat="server"/>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ErrorMessage="User name required" ControlToValidate="txtUserName" runat="server" />
                </td>
                </tr>
                <tr>
                <td class="label">Password:</td>
                <td>
                <asp:TextBox ID="txtPassword" Mode="password" ClientIDMode="Static"  runat="server"/>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ErrorMessage="Password required" ControlToValidate="txtPassword" runat="server" />
                </td>
                </tr>
                </table>
        
            </div>
    
    
    
        <section id ="PageWrapper">
    
    
            <section style="display:block;height:120px;background-size:100% 100%;background-image:url(App_Themes/Monochrome/Images/top.jpg);"> <!--<a href ="/"></a>-->
               <section style="left:1300px;top:46px;;">
                  <asp:ContentPlaceHolder ID="CartPlaceHolder" runat="server">
    
    
                  </asp:ContentPlaceHolder>
                  
               </section>
    
            
               <section style="left:910px;top:82px;;font-family:'AvantGarde Bk BT';font-weight:bold;">
                  <asp:button ID="LoginButton" runat="server" UseSubmitBehavior="false" OnClientClick="return ShowPopUpLogin();"  CausesValidation="false" Text="Login" BackColor="#ff6a00" ForeColor="White"></asp:button>
                  
               </section>
    
               <section style="left:982px;top:82px;;font-family:'AvantGarde Bk BT';font-weight:bold;">
                  <asp:button ID="RegisterButton" runat="server" CausesValidation="false" Text="Register" OnClick="RegisterButton_Click" BackColor="#ff6a00" ForeColor="White"></asp:button>
                  
               </section>
    
               <section style="left:1192px;top:86px;;font-family:'AvantGarde Bk BT';font-weight:bold;">
                  <asp:dropdownlist ID="currencydropdown" Width="155px" runat="server" CausesValidation="false" ForeColor="Black">
                        <asp:ListItem Text="Rupees" Value="0"></asp:ListItem>
                        <asp:ListItem Text="Dollars" Value="1"></asp:ListItem>
                        <asp:ListItem Text="Pounds" Value="2"></asp:ListItem>                
                  </asp:dropdownlist>
               </section>
    
    
            </section>  <!-- from monochrome.css header  from web.config <pages theme="Monochrome" styleSheetTheme="Monochrome">  defaults to app_themes/Monochrome   -->
             <nav>
                <ul id="menu">
                  <li><a href="#">Home</a></li>
                  <li><asp:LinkButton ID="SareesLink" runat="server" OnClick="SareesLink_Click" Text="Sarees"></asp:LinkButton> 
                     <ul>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">Graphic design</a></li>
                        <li><a href="#">Development tools</a></li>
                        <li><a href="#">Web design</a></li>
                     </ul>
                  </li>
                  <li><asp:LinkButton ID="DressMatLink" runat="server" OnClick="DressMatLink_Click" Text="Dress Materials"></asp:LinkButton> 
                    <ul>
                      <li><a href="#">Work1</a></li>
                      <li><a href="#">Work2</a>
    
                         <ul>
                            <li><a href="#">Work21</a>
                              <ul>
                                <li><a href="#">Work211</a></li>
                                <li><a href="#">Work212</a></li>
                                <li><a href="#">Work213</a></li>
                              </ul>
                            </li>
                            <li><a href="#">Work22</a></li>
                            <li><a href="#">Work23</a></li>
                         </ul>
                     </li>
                     <li><a href="#">Work3</a></li>
                  </ul>
                 </li>
                 <li><asp:LinkButton ID="KurtisLink" runat="server" OnClick="KurtisLink_Click" Text="Kurtis"></asp:LinkButton> </li>
                 <li><asp:LinkButton ID="LegginsLink" runat="server" OnClick="LegginsLink_Click" Text="Leggins"></asp:LinkButton> </li>
                 <li><asp:LinkButton ID="ReadyMadeLink" runat="server" OnClick="ReadyMadeLink_Click" Text="Ready Made Dresses"></asp:LinkButton> </li>
                 <li><asp:LinkButton ID="AboutLink" runat="server" OnClick="AboutLink_Click" Text="About"></asp:LinkButton> </li>
                 <li><a href="#">Contact</a></li>
              </ul>
    
    
    
            </nav>
    <!--
            <aside id="Sidebar">
    
                <asp:ContentPlaceHolder id="cpOptionsContent" runat="server">
            
                </asp:ContentPlaceHolder>
    
    
            </aside>         
    -->
            <section id ="MainContent">
                <asp:ContentPlaceHolder id="cpMainContent" runat="server">
            
                </asp:ContentPlaceHolder>
            </section>
    
            <section style="display:block;clear:both;height:200px;background-size:100% 100%;background-image:url(App_Themes/Monochrome/Images/bottom.jpg);"> <!--<a href ="/"></a>-->
    
               <section style="left:252px;top:837px;;font-family:'AvantGarde Bk BT';">
                  <asp:Linkbutton ID="LinkButton1"  runat="server" Font-Size="18px"  CausesValidation="false" Text="Sarees" BackColor="#ff6a00" ForeColor="White"></asp:Linkbutton>
                  
               </section>
               <section style="left:252px;top:856px;;font-family:'AvantGarde Bk BT';">
                  <asp:Linkbutton ID="LinkButton2"  runat="server" Font-Size="18px"  CausesValidation="false" Text="Dresses" BackColor="#ff6a00" ForeColor="White"></asp:Linkbutton>
                  
               </section>
               <section style="left:252px;top:875px;;font-family:'AvantGarde Bk BT';">
                  <asp:Linkbutton ID="LinkButton3"  runat="server" Font-Size="18px"  CausesValidation="false" Text="Dress materials" BackColor="#ff6a00" ForeColor="White"></asp:Linkbutton>
                  
               </section>
               <section style="left:252px;top:895px;;font-family:'AvantGarde Bk BT';">
                  <asp:Linkbutton ID="LinkButton6"  runat="server" Font-Size="18px"  CausesValidation="false" Text="Lahnga Choli&nbsp;&nbsp;" BackColor="#ff6a00" ForeColor="White"></asp:Linkbutton>
                  
               </section>
               <section style="left:252px;top:916px;;font-family:'AvantGarde Bk BT';">
                  <asp:Linkbutton ID="LinkButton7"   runat="server" Font-Size="18px"  CausesValidation="false" Text="Evening gown&nbsp;" BackColor="#ff6a00" ForeColor="White"></asp:Linkbutton>
                  
               </section>
               <section style="left:252px;top:937px;;font-family:'AvantGarde Bk BT';">
                  <asp:Linkbutton ID="LinkButton8"   runat="server" Font-Size="18px"  CausesValidation="false" Text="Kurtis" BackColor="#ff6a00" ForeColor="White"></asp:Linkbutton>
                  
               </section>
               <section style="left:252px;top:958px;;font-family:'AvantGarde Bk BT';">
                  <asp:Linkbutton ID="LinkButton9"   runat="server" Font-Size="18px"  CausesValidation="false" Text="Leggings" BackColor="#ff6a00" ForeColor="White"></asp:Linkbutton>
                  
               </section>
               <section style="left:520px;top:943px;;font-family:'AvantGarde Bk BT';">
                  <asp:Imagebutton ID="ImageButton3" Width="38px" Height="38px"   runat="server" CausesValidation="false" ImageUrl="~/App_Themes/Monochrome/Images/facebook.png" ></asp:Imagebutton>
                  
               </section>
    
               <section style="left:628px;top:943px;;font-family:'AvantGarde Bk BT';">
                  <asp:Imagebutton ID="ImageButton4" Width="49px" Height="38px"   runat="server" CausesValidation="false" ImageUrl="~/App_Themes/Monochrome/Images/twitter.png" ></asp:Imagebutton>
                  
               </section>
    
               <section style="left:986px;top:834px;;font-family:'AvantGarde Bk BT';">
                  <asp:textbox ID="newsname" Width="283px" Height="26px" BorderStyle="None"  runat="server" CausesValidation="false" ></asp:textbox>
                  
               </section>
    
               <section style="left:986px;top:865px;;font-family:'AvantGarde Bk BT';">
                  <asp:textbox ID="newsmobext" Width="62px" Height="28px" BorderStyle="None"  runat="server" CausesValidation="false" ></asp:textbox>
                  
               </section>
    
               <section style="left:1050px;top:865px;;font-family:'AvantGarde Bk BT';">
                  <asp:textbox ID="newsmob"  Width="218px" Height="28px" BorderStyle="None"  runat="server" CausesValidation="false" ></asp:textbox>
                  
               </section>
    
               <section style="left:986px;top:898px;;font-family:'AvantGarde Bk BT';">
                  <asp:textbox ID="newsemail"  Width="283px" Height="26px" BorderStyle="None"   runat="server" CausesValidation="false" ></asp:textbox>
                  
               </section>
    
               <section style="left:1145px;top:940px;;font-family:'AvantGarde Bk BT';">
                  <asp:button ID="newssubmit" cssClass="txtbox" Width="142px" Height="45px" text="Submit" Font-Size="18px" font-bold="true"  runat="server" CausesValidation="false" ></asp:button>
                  
               </section>
    
            </section>  <!-- from monochrome.css header  from web.config <pages theme="Monochrome" styleSheetTheme="Monochrome">  defaults to app_themes/Monochrome   -->
    
    
    
        </section>
      </form>
    
    </body>
    </html>
    

    Please help , as it is urgent

    Regards

    Sanjish

    Monday, August 8, 2016 10:48 AM
  • User61956409 posted

    Hi Sanjish,

    Please debug your code to check if function ShowPopUpLogin could fire, and please make sure if $('[id$ = PopupLogin]') could return the element as expected. Besides, please use F12 developer tools to inspect <div> PopupLogin and check if display property could be updated.

    Best Regards,

    Fei Han

    Wednesday, August 17, 2016 4:43 AM
  • User1343581070 posted

    Hello Fei Han,

                            The Jquery dialog was very frustrating , so i opted for Bootstrap Modal dialog and it is working fine . Thanks a lot for your support

    Regards

    Sanjish

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 18, 2016 4:55 AM