1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.3 # jquery trigger link and base href

Discussion in 'Styling and Customization Questions' started by sinucello, Jun 26, 2014.

  1. sinucello

    sinucello Well-Known Member

    Hi,
    I`m using this link:
    Code:
    <a href="#" id="toggleLastLinks">some text</a>
    as a trigger for some jquery script.

    It works fine on the start page but on every other page, clicking the link will not only trigger the script function but also immediately redirect the user to the home page. I think this happens because xenForo uses base href (yes, I use friendly URLs).

    I now added a
    Code:
    return false;
    to the function to avoid the redirect and it works.

    But I still would like to know how I could replace the # with a link to the current page URL (including all parameters).

    thank you - all the best,
    Sacha
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    You could use javascript: as the href, which may avoid the behaviour you're reporting.

    But, aside from that, rather than using return false; your script should be using e.preventDefault(); inside the function you bind to the click event. That will enable your script to continue executing, but prevent the default behaviour of clicking on a link.

    That is especially useful if your link should work with javascript disabled too because you could give your anchor a valid URL that would be followed normally if JS is disabled.
     
    sinucello likes this.
  3. sinucello

    sinucello Well-Known Member

    thank you. Yes, a valid URL would be much better. I tried to include your suggestion:
    Code:
    $(document).ready( function() {
         $('#lastLinks').toggle();
         $('#toggleLastLinks').click( function() {
              $('#lastLinks').toggle();
              e.preventDefault();
         });
    });
    
    HTML:
    <div class="section widget-group-no-name widget-container widget-container-custom">
    <div class="secondaryContent widget" id="widget-999"><div id="tglblock_WidgetFramework_WidgetForumNews" class="tglSidebar active"></div>
    <h3>Forum-News</h3>
    <ul>
    <li><a href="/find-new/posts">New posts</a></li>
    <li><a href="/account/news-feed">What are my friends doing?</a></li>
    <li><a href="/recent-activity/">What is happening in the forum right now?</a></li>
    <li><a href="/find-new/threads?days=1" id="toggleLastLinks">Post of the last ...</a>
    <ul id="lastLinks"><li><a href="/find-new/threads?days=1">24 hours</a></li>
    <li><a href="/find-new/threads?days=2">2 days</a></li>
    <li><a href="/find-new/threads?days=3">3 days</a></li>
    <li><a href="/find-new/threads?days=4">4 days</a></li>
    <li><a href="/find-new/threads?days=5">5 days</a></li>
    <li><a href="/find-new/threads?days=6">6 days</a></li>
    <li><a href="/find-new/threads?days=7">7 days</a></li>
    <li><a href="/find-new/threads?days=14">14 days</a></li>
    <li><a href="/find-new/threads?days=21">21 days</a></li>
    </ul></li></ul>
    </div></div>
    <script src="/js/wk_custom.js" type="text/javascript"></script>
    
    but it doesn`t prevent the browser to call the valid URL.
     
  4. Chris D

    Chris D XenForo Developer Staff Member

    This is where the "e" comes from, in red below:
    Code:
    $(document).ready( function() {
         $('#lastLinks').toggle();
         $('#toggleLastLinks').click( function(e) {
              $('#lastLinks').toggle();
              e.preventDefault();
         });
    });
    jQuery events always pass the "event" parameter through to functions that bind to it as the first parameter.

    Also, it's probably better to do e.preventDefault(); first in that function (before your toggle) to always ensure the default behaviour is prevented first before any other code is run. Just to ensure there's no race condition between the toggle and the link being clicked.
     
    sinucello likes this.
  5. sinucello

    sinucello Well-Known Member

    Thanks again, works perfectly now.
     

Share This Page