How to dissable href and call onclick at once with(out) jquery?

Question

I found some answers for this question, but non of them worked for me.
What I wants is to call function myFunc() without refreshing page where href wants.
This href is doing his job with GET request and I want it to stay in cause if someone have script block. It have to work without scripts too.
But when somebody hadn't dissabled script, then I wants to not go where href redirect but do myFunc() onclick

I had Tried something like this:
at javascript:

function onClickFunc(somedata){
  event.preventDefault();
  myFunc(somedata);
}

at html:

<a onclick="javascript:onClickFunc({{ some_django_data.id }})" href="?current={{ some_django_data.id }}{% if other_django_data %}&page={{ other_django_data.number }}{% endif %}">

When I replace href body with # and put javascript:myFunc({{ some_django_data.id }}) inside onclick then it works.
Bit it's not soloution because people with script block would lose possibility of using my site.
What is wrong with this solution?

@Rahi Had you read what I wrote? I wants href to stay and it's my whole problem. — Marta Wiśniowiecka, Aug 04 '16 at 16:46
Add `return false` to `onclick` and call only function. Dont put javascript into `href`. Use redirect from function — Dave, Aug 04 '16 at 16:46
@MartaWiśniowiecka: Even if Rahi missed it, "Have you read what I wrote?" is not constructive. Just repeat it. — T.J. Crowder, Aug 04 '16 at 16:49

score 3 · Answer 1 · answered Aug 04 '16 at 16:46

Two things:

onXyz attribute-style handlers contain JavaScript code, so there's no need for the javascript: pseudo-protocol.
Because you're coding a function call, if you want access to the event object, you need to pass it into the function

So:

onclick="onClickFunc(event, {{ some_django_data.id }})"

Then

function onClickFunc(event, somedata) {
    event.preventDefault(); // Stops the default behavior of following the link
    // ...
}

If you need to support really old browsers (or browsers hobbling themselves and behaving like really old browsers [I'm looking at you, IE9-IE11]), you'll need to allow for the possibility that preventDefault isn't present on the event object. The good news is, though, that return false in an onXyz attribute handler prevents the default action. So:

So (note the return):

onclick="return onClickFunc(event, {{ some_django_data.id }})"

and (note the return here too):

function onClickFunc(event, somedata) {
    if (event.preventDefault) {
        event.preventDefault(); // Stops the default behavior of following the link
    }
    // ...

    return false;
}

Thanks I added `event` argument, and `return false` as you recomended and now it's working. — Marta Wiśniowiecka, Aug 05 '16 at 08:36

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

Your code is on the right track, but you forgot to pass the event object to the javascript function.

SEE THIS WORKING EXAMPLE:

function myfunc(event, data) {
  event.preventDefault();
  alert("HELLO");
  return false;
}

<a onclick="myfunc(event, 'foo')" href="www.google.com">TESTER</a>

Note: You do not really need to specify the JS protocol. Have a look at this SO post.

edited May 23 '17 at 11:44

Community

1
1

answered Aug 04 '16 at 16:47

Iceman

6,035
2
23
34

How to dissable href and call onclick at once with(out) jquery?

2 Answers2