JQuery toggle() is not working with ASP.Net hyperlink control? RSS

• • Reply
  

  dazy

  Member

  119 Points

  258 Posts

  JQuery toggle() is not working with ASP.Net hyperlink control?

  Jul 23, 2010 01:47 PM|LINK

  Hi,

  I have used this Plugin in my asp.net(C#) web app.

  I have modified the code according to my requirments and web app layout, here is my code-

  <script type="text/javascript">
      $(document).ready(function() {
  
          $(".signin").click(function(e) {
              e.preventDefault();
              $("div#signin_menu").toggle();
        
          });
  
          $("div#signinMenu").mouseup(function() {
              return false
          });
          $(document).mouseup(function(e) {
              if ($(e.target).parent("a.signin").length == 0) {
        
                  $("div#signinMenu").hide();
              }
          });

  <div class="links" >
   <asp:LoginView ID="LoginView1" runat="server" >
         <AnonymousTemplate>

  <div class="container">
    <ul id="menu">
       <li id="login">
                                            
         <span class="title"><asp:HyperLink Text="Login" Class="signin" runat="server" id="lnkLogin" NavigateUrl="#"></asp:HyperLink><br /></span>
                                          <span class="description"></span> 
      </li>
      <li id="register">
        <span class="title"><asp:HyperLink Text="Register" runat="server" id="lnkRegister" NavigateUrl="#"></asp:HyperLink><br /></span>
                                          <span class="description"></span> 
                                   
       </li>
   </ul>
  </div>
   
  <div id="signinMenu">       
   <asp:Login ID="Login1" runat="server" DestinationPageUrl="~/Default.aspx" onloggedin="Login1_LoggedIn">
  <LayoutTemplate>
  <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName" Text="Username" />
  <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User Name is required." ToolTip="Usename is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
  <asp:TextBox ID="UserName" runat="server" />
  		                           
  <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password" Text="Password"  />
  <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
  <asp:TextBox ID="Password" runat="server" TextMode="Password"/>	           
  </LayoutTemplate>
  </asp:Login>
  </div>         	
  </AnonymousTemplate>
  

  </div>

  
  When I click on the login link it display the div but when I again click on the login link to close it it does not close the div.

  It seems the toggle() is not working, I have checked it in FF, IE, Chrome and Safari and this issue apprears in all the browsers.

  Can any one tell why the code isn't working correctly?

  Regards,

  Dazy
  

• • Reply
  

  dazy

  Member

  119 Points

  258 Posts

  Re: JQuery toggle() is not working with ASP.Net hyperlink control?

  Jul 23, 2010 01:52 PM|LINK

  PLUGIN Link: perfect-sign-in-dropdown-box-likes-twitter-with-jquery

  http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/

• • Reply
  

  SSA

  Star

  9368 Points

  1576 Posts

  Re: JQuery toggle() is not working with ASP.Net hyperlink control?

  Jul 23, 2010 02:22 PM|LINK

  I have used that plugin in one of my PHP site ...and with faded memory had same problem, toggle does work, even you can see it if you have firebug,set a breakpoint a toggle() line and you will see that line is clicked twice, so you will see it hiding, when you click next in debug, it will again come on same line and toggle it again, and you see it visible again, you can not see that with naked eyes.
  
  here is how I use it and its working:
  
  

  $(".signin").click(function(e) {
                  e.preventDefault();
                  $("fieldset#signin_menu").toggle();
       return false;
  });
  
  
              $("fieldset#signin_menu").mouseup(function() {
                  return false
              });
              $(document).mouseup(function(e) {
                  if($(e.target).parent("a.signin").length==0) {
                  
  
                      $("fieldset#signin_menu").hide();
                  }
              });

  
  
  
  return false from function, its event bubbling case, as far as I remember.

  • Edited by SSA on Jul 23, 2010 02:31 PM
  • Edited by SSA on Jul 23, 2010 07:54 PM
  • Edited by SSA on Jul 23, 2010 07:55 PM
• • Reply
  

  dazy

  Member

  119 Points

  258 Posts

  Re: JQuery toggle() is not working with ASP.Net hyperlink control?

  Jul 23, 2010 03:36 PM|LINK

  Thank you so much SSA, for replying and sharing your experience.

  I have tried your code but its not solving my problem :(.

  As far as I have observed you have added the following code in your solution
  

  <span style="font-weight: bold;" class="Apple-style-span">return false;</span> 

  But when I tried to add it in my javascript(which I have posted earlier), nothing happens at all and my situation becomes worse like my "login"  link stops working and even stops showing the div(which it was perfectly doing before).

  Can you elaborate your solution that why you add this span and what role it will play in hiding the div when user clicks the link again?

  Ragards,

  Dazy
  

• • Reply
  

  Maniak7

  Member

  211 Points

  111 Posts

  Re: JQuery toggle() is not working with ASP.Net hyperlink control?

  Jul 23, 2010 05:46 PM|LINK

  you have a typo

  in onclick event u use

   $("div#signin_menu").toggle(); - where id is "signing_menu"

  and for hiding you use

  $("div#signinMenu").hide(); - where id is "signinMenu"

  

  
   

• • Reply
  

  dazy

  Member

  119 Points

  258 Posts

  Re: JQuery toggle() is not working with ASP.Net hyperlink control?

  Jul 23, 2010 05:55 PM|LINK

  Thank you Maniak for pointing out this silly mistake. My code isn't contain this typo because it occured while coping the code here.

  So my problem persists!

  Can any one have the solution for this?
  

  Regards,

  Dazy
  

• • Reply
  

  Maniak7

  Member

  211 Points

  111 Posts

  Re: JQuery toggle() is not working with ASP.Net hyperlink control?

  Jul 23, 2010 06:10 PM|LINK

  ok...

  can you post the code directly from application then?:)

• • Reply
  

  dazy

  Member

  119 Points

  258 Posts

  Re: JQuery toggle() is not working with ASP.Net hyperlink control?

  Jul 23, 2010 07:51 PM|LINK

  The html code is same as I have posted in the first post.

  Now the jquery code is-

  And the problem with this code is, when user clicks on the login link it displays the div but when user agian clicks on the login link to close/hide the div it dose not hide the div. Then user have to click any where on the document (outside with div and link) to close/hide the div.
  

  <script type="text/javascript">
      $(document).ready(function() {
  
          $(".signin").click(function(e) {
              e.preventDefault();
              $("div#signinMenu").toggle();
  
          });
  
          $("div#signinMenu").mouseup(function() {
              return false
          });
          $(document).mouseup(function(e) {
              if ($(e.target).parent("a.signin").length == 0) {
  
                  $("div#signinMenu").hide();
              }
          });
          
      });
  </script>

  
  

  Below I have tried to write the ID in diffrent ways but I'm still unable to get all the functionality I required-
  

  1. If I modified code like the followings, nothing happens in any browser
  

  <script type="text/javascript">
      $(document).ready(function() {
  
          $(".signin").click(function(e) {
              e.preventDefault();
              $("signinMenu").toggle();
  
          });
  
          $("signinMenu").mouseup(function() {
              return false
          });
          $(document).mouseup(function(e) {
              if ($(e.target).parent("a.signin").length == 0) {
                  $("signinMenu").hide();
              }
          });
  
          
      });
  </script>

  <script type="text/javascript">
      $(document).ready(function() {
  
          $(".signin").click(function(e) {
              e.preventDefault();
              $("signinMenu").toggle();
        
          });
  
          $("div#signinMenu").mouseup(function() {
              return false
          });
          $(document).mouseup(function(e) {
              if ($(e.target).parent("a.signin").length == 0) {
  
  
                  $("div#signinMenu").hide();
              }
          });
          
      });
  </script>

  2. And if I modify the code like below, div starts toggling when user clicks login link but it stops to close/hide the div when user click on the document (like outside the div). So this make the link working (i.e. hiding the div on user click) but stops the div to close/hide when user clicks the document.
  

  <script type="text/javascript">
      $(document).ready(function() {
  
          $(".signin").click(function(e) {
              e.preventDefault();
              $("div#signinMenu").toggle();
  
          });
  
          $("div#signinMenu").mouseup(function() {
              return false
          });
          $(document).mouseup(function(e) {
              if ($(e.target).parent("a.signin").length == 0) {
                  $("signinMenu").hide();
              }
          });
  
          
      });
  </script>

  Regards,

  Dazy
  

• • Reply
  

  SSA

  Star

  9368 Points

  1576 Posts

  Re: JQuery toggle() is not working with ASP.Net hyperlink control?

  Jul 23, 2010 07:51 PM|LINK

  No it was not span ....it was bad formatting which I didn't notice.

  Its simply this line:

  return false;
  

• • Reply
  

  dazy

  Member

  119 Points

  258 Posts

  Re: JQuery toggle() is not working with ASP.Net hyperlink control?

  Jul 23, 2010 08:00 PM|LINK

  I have added this

  return false;

  but it isn't working for me :(

  
  

  Regards,

  Dazy