locked
click event of anchor tag does not work RRS feed

  • Question

  • User1804579801 posted

    Hi all,

    I have

    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle"   data-toggle="dropdown" id="dash">Dashboard
                
                    </a>
                     <ul class="dropdown-menu drop-menu multi-drop" role="menu">
                         <li class="dropdown-submenu"><a href="#sicdash_dist" tabindex="-1">District-Wise Alert Status</a></li> 
                         <li class="dropdown-submenu"><a href="#sicdash_inspalerts" tabindex="-1">Inspection Body Wise Alert Status</a></li>
                         <li class="dropdown-submenu"><a href="#sicdash_target" tabindex="-1">Target Status of Inspection Bodies' Visits</a></li>
                         <li class="dropdown-submenu"><a href="#sicdash_ccialerts" tabindex="-1">CCI Category and Type Alert Status</a></li>
                         <li class="dropdown-submenu"><a href="#sicdash_category" tabindex="-1">Category-Wise Alerts Status</a></li>
                        </ul> 
                     </li> 

    now I want a click event on   Dashboard when i click it should redirect to my page.aspx

    but href does not work so tried click event of the anchor tag 

    <script type="text/javascript">
        var jq = jQuery.noConflict();
    
        j(document).ready(function () {
            jq("li nav-link dropdown-toggle").click(function () {
                alert("click");
            });
           // $('#dash').trigger('click');
        });
    </script>

    but event not firing 

    Friday, January 31, 2020 1:18 PM

All replies

  • User475983607 posted

    If you make the dropdown clickable then you will not be able to select the menu items.  Why not add the path to href attributes in the menu items?

    <li class="dropdown-submenu"><a href="/path/to/the/page.aspx#sicdash_dist" tabindex="-1">District-Wise Alert Status</a></li> 

    Friday, January 31, 2020 1:53 PM
  • User753101303 posted

    Hi,

    The "#location" notation is to redirect inside the same page. If you want to go to another page this is "page.aspx#location". You'll need also <a name="location">Target</a> in the destination page.

    A small remark. IMHO never try to do something another way because  what should work doesn't. Else you could end up in doing things in a more complex way (here using javascript etc...) when a basic link could just work perfectly fine.

    Always try first to understand what happens exactly and then you can change your mind but at least based on a firm understanding of the situation rather than just entering now forever into your home using the window because your door "doesn't work".

    Friday, January 31, 2020 2:06 PM
  • User-474980206 posted

    Anchors <a>, don’t fire a click event unless a href is defined. It’s common in this case to use just a #. href=“#”. You can also use the jquery on()  to get the click at the body, but use a selector to check it happened in the anchor.

    Sunday, February 2, 2020 6:36 PM
  • User288213138 posted

    Hi nagapavanich,

    <script type="text/javascript">
        var jq = jQuery.noConflict();
    
        j(document).ready(function () {
            jq("li nav-link dropdown-toggle").click(function () {
                alert("click");
            });
           // $('#dash').trigger('click');
        });
    </script>

    I tested your code and  found some question.

    j(document).ready(function () {

    It should be jq instead of j.

    and If you want to fire Dashboard click event, you can try the following code:

    <script type="text/javascript">
            var jq = jQuery.noConflict();
    
            jq(document).ready(function () {
                jq("#dash").click(function () {
                    alert("click");
                });
                // $('#dash').trigger('click');
            });
        </script>

    Best regards,

    Sam

    Monday, February 3, 2020 4:01 AM
  • User1804579801 posted

    Hi mgebhard,

    tried this already but it does work 

    Monday, February 3, 2020 9:37 AM
  • User1804579801 posted

    Hu samwu,

    implemented the code but did not worked nothing happens when i click.

    My Requriement in Dashbaord click should redirect to sic_dashbaord.aspx and other inks which i mentioned earlier in the post will redirect to same page 

    sic_dashbaord.aspx but different div s

     <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle"   data-toggle="dropdown" id="dash">Dashboard
                
                    </a>
                     <ul class="dropdown-menu drop-menu multi-drop" role="menu">
                         <li class="dropdown-submenu"><a href="#sicdash_dist" tabindex="-1">District-Wise Alert Status</a></li> 
                         <li class="dropdown-submenu"><a href="#sicdash_inspalerts" tabindex="-1">Inspection Body Wise Alert Status</a></li>
                         <li class="dropdown-submenu"><a href="#sicdash_target" tabindex="-1">Target Status of Inspection Bodies' Visits</a></li>
                         <li class="dropdown-submenu"><a href="#sicdash_ccialerts" tabindex="-1">CCI Category and Type Alert Status</a></li>
                         <li class="dropdown-submenu"><a href="#sicdash_category" tabindex="-1">Category-Wise Alerts Status</a></li>
                        </ul> 
                     </li> 

    Monday, February 3, 2020 9:40 AM
  • User-474980206 posted

    why use on click? just set the href

    <a class="nav-link dropdown-toggle" href="sic_dashbaord.aspx"   data-toggle="dropdown" id="dash">Dashboard

    note: you should use the server to generate the url  in razor (don't remember webforms) it is:  

    <a class="nav-link dropdown-toggle" href="@Url.Content("~/sic_dashbaord.aspx")" data-toggle="dropdown" id="dash">Dashboard

    Wednesday, February 5, 2020 4:55 PM
  • User288213138 posted

    Hi nagapavanich,

    implemented the code but did not worked nothing happens when i click.

    The code is work fine in my side. Can you provide the complete code?

    My Requriement in Dashbaord click should redirect to sic_dashbaord.aspx and other inks which i mentioned earlier in the post will redirect to same page 

    Do you want to redirect li to the same page? if so, you can try what Bruce said, using href to redirect.

    Best regards,

    Sam

    Thursday, February 6, 2020 2:54 AM
  • User753101303 posted

    nagapavanich

    will redirect to same page 

    This is just what you asked for. What follows # is the location inside a page. As you give no page indication, it is searched inside the current page.

    It seems you want instead something such as (assuming the other page is in the same folder)  to tell both which page should be loaded "as usual" and then which location you want to reach inside that page.

    <a href="sic_dashbaord.asxpx#sicdash_inspalerts">Go there</a> 
    Thursday, February 6, 2020 8:41 AM