How to make a link clickable but also not?

Question

So I'm working on my webshop and doing the final points to make it all good looking.

I thought you know what'd be cool? If there was a questionmark which said what you can search for. So few seconds later there it was.... but... you can't hover on mobile so I thought. Cheap fix. make it clickable. Which turns out wasn't a cheap fix because if you click on it, it links you to the top of the page. How do I make it that the popover is clickable, but leads to nowhere and also doesn't refresh the page or annything?

I got this so far:`

    <form method="GET" action="search.php#shop" class="navbar-form navbar-right">
      <a href="#" title="Zoektermen" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="U kunt zoeken op land, beschrijving, naam en merk."  >
        <p class="fa fa-question"></p>
      </a>
      <input id="form" name="id" type="text" placeholder="Producten zoeken" class="form-control" />
      <button type="submit" class="btn btn-primary">Zoekresultaten tonen</button>
    </form>
</div>

`

Kinda stuck here so help will be appreciated! Thanks in advance P.S. Don't mind the text. It's Dutch :P

The script is:

<script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script>

Why aren't you using the [bootstrap popover](http://getbootstrap.com/javascript/#popovers) plugin? — David Barker, Jan 18 '16 at 18:28
[This question](http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0) looks relevant — Rafi, Jan 18 '16 at 18:29
@Rafi I really want to do the popover like the bootstrap kind since I use that one everywhere. — Jessie Den Ridder, Jan 18 '16 at 18:33
@JessieDenRidder `event.preventDefault()` in the closure would help. — David Barker, Jan 18 '16 at 18:34
@DavidBarker That was exactly what I was looking for. Thank you! — Jessie Den Ridder, Jan 18 '16 at 18:37

score 1 · Accepted Answer · answered Jan 18 '16 at 18:36

1

First give it an id or class

<a href="#"  id="popover_button" title="Zoektermen" data-toggle="popover" data-trigger="facous" data-placement="left" data-content="U kunt zoeken op land, beschrijving, naam en merk."  ></a>

Than disable the functionality with jQuery

<script type="text/javascript">
$('#popover_button').click(function(e){
    e.preventDefault();
});
</script>

answered Jan 18 '16 at 18:36

Tewdyn

687
3
16

Yep like someone commented on my original post. Tho he said to put it in the closure. I kinda like your way more because it looks cleaner in the code. Thanks! – Jessie Den Ridder Jan 18 '16 at 18:44
@JessieDenRidder yes it's defenitly a very clean solution :) – Tewdyn Jan 18 '16 at 18:44

zer00ne · Answer 2 · 2016-01-18T18:35:33.150

0

Add to the<a>nchor:

onclick="e.preventDefault();"

or

onclick="return false;"

or

href="javascript:void(0)"

It'd be easier if you provided the actual function being used.

<form method="GET" action="search.php#shop" class="navbar-form navbar-right">
  <a href="#" title="Zoektermen" data-toggle="popover" data-trigger="facous" data-placement="left" data-content="U kunt zoeken op land, beschrijving, naam en merk." onclick="e.preventDefault();">
    <p class="fa fa-question"></p>
  </a>
  <input id="form" name="id" type="text" placeholder="Producten zoeken" class="form-control" />
  <button type="submit" class="btn btn-primary">Zoekresultaten tonen</button>
</form>

edited Jan 18 '16 at 18:35

answered Jan 18 '16 at 18:31

zer00ne

41,936
6
41
68

You mean the JAVA? Or do you mean what the form does? – Jessie Den Ridder Jan 18 '16 at 18:34
Yes, sir, the`` But if you place one of those lines inside your ``, it should work. especially the last one. – zer00ne Jan 18 '16 at 18:37
Well that was the script :P `` But if you look at the post I alreaddt got the answer. Thanks for you effort tho! I appreciate it! – Jessie Den Ridder Jan 18 '16 at 18:39
This is what I see after a refresh.... https://zer00ne.tinytake.com/sf/NDU1OTQwXzI0NTY4NTg – zer00ne Jan 18 '16 at 18:42
Woops all fixed now! Thanks for your time! – Jessie Den Ridder Jan 18 '16 at 18:46

score 0 · Answer 3 · answered Jan 18 '16 at 18:37

0

<a href="#" title="Zoektermen"> My Text</a>

This should work fine.

answered Jan 18 '16 at 18:37

Hollo1001

1

Nope thats exactly what I had in the first place without the popover :P @dDavidBarker had the answer I was looking for. Putting event.preventDefault() in the closure got it all fixed – Jessie Den Ridder Jan 18 '16 at 18:39

How to make a link clickable but also not?

3 Answers3