CODEWITHSUNDEEP
javascriptjqueryhtml
sazr
sazr

Reputation: 25938

Clicking anchor should execute javascript not go to new page

I have a HTML anchor that when clicked should make a div slide up or down (I call JQuery's .slideToggle(); function);

My Problem: When I click the link, instead of executing code, it goes to a new page, where the url is the javascript code, in my case, "javascript: $('#attachFileContainer').slideToggle();" and the contents of the page(body) is simply "[object Object]".

My Code:

<a class="interactiveLink" 
     href="javascript: $('#attachFileContainer').slideToggle();">Attach File</a>

What is going wrong, I have had many anchor elements where I call javascript from the href attribute and this have never happened?

Upvotes: 3

Views: 4208

Answers (5)

Muhammad Hassaan
Muhammad Hassaan

Reputation: 5

Solution 1:

HTML:

<a href="#">Click me</a>

jQuery:

$(function(){
    $("a").click(function(event){
        event.preventDefault();
    }); 
});

Solution 2:

HTML:

<a href="#.">Click me</a>

Solution 3:

HTML:

<a href="javascript:void(0);">Click me</a>

Solution 4:

HTML:

<a href="#">Click me</a>

jQuery:

$(function(){
    $("a").click(function(event){
        return false;
    }); 
});

Solution 5:

HTML:

<a href="javascript://">Click me</a>

Upvotes: 1

user17753
user17753

Reputation: 3161

I see a lot of answers that involve work-arounds, but none that hit the heart of the issue. The why behind what you're doing is not working, and why it often does work.

You're using javascript:XXX as the value for the href, hypertext source link, attribute on your anchor tag. Where XXX is some piece of javascript code, an expression, such as a function call.

When using this notation, the XXX code is first evaluated. If the expression results in a value, then most browsers will clear the page and display only the resultant value.

For example,

<a href="javascript:1+1">Click here!</a> will result in 2 being displayed.

Similarly, this could be rewritten with a function to produce the same results:

function addTwo() {
    return 1+1; 
}

<a href="javascript:addTwo()">Click here!</a> (expected output 2)

For most browsers, if the XXX code is evaluated and does not result in a value, then it has nothing to display -- as such, it will stay on the same page. So, there's a few ways to achieve this behavior.

  • We could assign the result to a variable.

<a href="javascript:var two = addTwo()">Click here!</a>

There is no result left over during assignment.

  • We could wrap another function that does not return anything around this function.

A. 

function addTwo2() {
    addTwo();
}
<a href="javascript:addTwo2()">Click Here!</a>

B. Same thing, but all inline:

<a href="javascript:(function() { addTwo();})()">Click Here!</a>

C. Same thing, but with the ! idiom you'll often see. (Same logical meaning, just uses the not operator to achieve less characters used):

<a href="javascript:!function() { addTwo();}()">Click Here!</a>

  • We could instead do what is referred to as hooking in most functional programming languages:

    function addTwo() {     
    alert( "sfsf" );
    return 1+1; 
}

var x = addTwo;

addTwo = function() {
    x();    
}

    <a href="javascript:addTwo();">Click Here!</a>

  • Lastly, if your function or expression does not need to return anything, simply don't do it in that function.

So in summary:

When your anchor using a javascript: href is clicked, the javascript code after javascript: is first evaluated, if it results in a value the browser will display only the result, otherwise the browser will stay on the page it currently is on since it has no value to display.

Upvotes: 1

RobG
RobG

Reputation: 147563

An A element with an href is a link, not an anchor (anchors are A elements with name attribute and are the target of links).

Since the element isn't being used either as a link or target, you shouldn't be using an A element at all, use a button or styled span. Then you don't need to worry about the default behaviour of a link.

<button class="interactiveLink" onclick="
  $('#attachFileContainer').slideToggle();
">Attach File</button>

or

<span class="interactiveLink button" onclick="
  $('#attachFileContainer').slideToggle();
">Attach File</span>

Upvotes: 0

DG3
DG3

Reputation: 5296

instead of write inline JavaScript code, try below. preventDefault method prevents the default action of the element. In your case, it prevents default action of the click event, which is, going to new page

$(".interactiveLink").on("click", function(e){
   e.preventDefault();
   $('#attachFileContainer').slideToggle();
});

Make your html code as

<a class="interactiveLink" href="##">Attach File</a>

Upvotes: 1

Trott
Trott

Reputation: 70183

You want this:

<a class="interactiveLink" onclick="$('#attachFileContainer').slideToggle(); return false;" href="#">Attach File</a>

The return false prevents the link from doing anything after the onclick stuff runs.

Upvotes: 2

Related Questions