XF 1.3 # jquery trigger link and base href

[sinucello]

Hi,
I`m using this link:

<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

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

 

[Chris D]

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]

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.

thank you. Yes, a valid URL would be much better. I tried to include your suggestion:

$(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.

 

[Chris D]

This is where the "e" comes from, in red below:

$(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]

Thanks again, works perfectly now.