Anchor onclick should not reload the page but trigger javascript?

Question

I have a situation where I am dynamically adding some content to popup box (which is a div) on my page from c#

HtmlGenericControl content = new HtmlGenericControl();
content.InnerHtml = "<a id='close' href='' onclick='action()'>close</a><span>Some text here</span>";
divcontrl.Controls.Add(content);
divcontrl.Attributes.Add("class", "myclass");



javascript method:

function action() {
       $('.myclass').hide();
    }

If I keep href='' on anchor it's closing the window but reloading the page, if I remove it not closing the window.

Try `href='#'`, maybe that will help. – gdoron Jan 25 '12 at 17:27 — gdoron, Jan 25 '12 at 17:27
Can you please show the rendered HTML? – gdoron Jan 25 '12 at 17:32 — gdoron, Jan 25 '12 at 17:32

score 4 · Accepted Answer · answered Jan 25 '12 at 17:30

4

Change your link tag attr as below,

//Edit changed from href="#" as it will scroll you to the top
href="javascript:void(0);" onclick='return action()'

And add return to the js function,

function action() {
    $('.myclass').hide();
    return false;
}

answered Jan 25 '12 at 17:30

Selvakumar Arumugam

79,297
15
120
134

Thanks, This one works, I forgot to mention "return" in event onclick='return action()' – Tiger Jan 25 '12 at 17:36

score 2 · Answer 2 · edited Jan 25 '12 at 17:40

2

Add return false; at the last line of action() function. This will prevent the default link action - reloading the page (in your case empty href means "the same URL").

Add. Also change onclick="action()" to onclick="return action()". Or onclick="action(); return false;".

edited Jan 25 '12 at 17:40

gdoron

147,333
58
291
367

answered Jan 25 '12 at 17:27

Olegas

10,349
8
51
72

I've changed my answer a little bit. – Olegas Jan 25 '12 at 17:36

Susam Pal · Answer 3 · 2012-01-25T18:25:36.987

Use <a href="#" .... or <a href="javascript:void(0);" ...>.

We already know that <a href="#foo">Foo</a> would create a link to an element in the same page with ID as 'foo'. #foo in this case is called a fragment identifier. Clicking it would cause the browser to "jump" to that element in the page without reloading it.

When the fragment identifier doesn't mention the ID of any element in the page (e.g. <a href="#">Foo</a>), then the browser jumps to the top of the page.

score 1 · Answer 4 · edited May 23 '17 at 09:59

1

function action() {
       $('.myclass').hide();
       return false;
    }

Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

edited May 23 '17 at 09:59

Community

1
1

answered Jan 25 '12 at 17:30

Shyju

214,206
104
411
497

Anchor onclick should not reload the page but trigger javascript?

4 Answers4