Javascript function results in HTML page reload: why?

Question

Hi all,

Newbie question...

The objective:

• I intend to have an HTML text input field as a kind of command line input.

• An unordered HTML list shows the 5 most recent commands. Clicking on one of the last commands in this list should populate the command line input text field with the respective command (in order to re-execute or modify it).

• An unordered HTML list contains a result set. Clicking on an ID in this list should bring the respective ID into the command line input text field.

In HTML (DHTML): Works as expected: when clicking on the the link the command line input text field is populated with a recent command.

<li><a href="#" id="last_cmd_01" onclick="document.getElementById('cli_input').value = document.getElementById('last_cmd_01').firstChild.nodeValue;document.getElementById('cli_input').focus()">here would be one of the recent commands</a></li>

In Javascript file: Doesn't work as expected: when clicking on the the link the command-line-input-text-field gets populated with the respective value (as it should), BUT then it seems like the full HTML page is being reloaded, the text input field and all dynamically populated lists become empty.

    function exec_cmd(cli_input_str) {
// a lot of code ...
// the code that should provide similar behavior as onclick=... in the DHTML example
$('.spa_id_href').click(function(){document.getElementById('cli_input').value = document.getElementById('cli_input').value + this.firstChild.nodeValue;});
}

Now the Question: Besides a potential Javascript (syntax) error, what could cause the browser to reload the page?

Answer 1

In both cases, you do nothing to cancel the default function of clicking on a link.

In the plain HTML example, the link to the top of the page is followed.

You don't specify what the href attribute for the second example looks like, but whatever it is, it will be followed.

See http://icant.co.uk/articles/pragmatic-progressive-enhancement/ for a good explanation of event cancelling and good event design. See http://docs.jquery.com/Tutorials:How_jQuery_Works for some jQuery specific guidance.

Answer 2

It seems that you just follow the link target URL. That is because you do not prevent the default click action:

e.preventDefault(); // `e` is the object passed to the event handler
// or
return false

Alternatively, you can set up a href starting with #, or not use <a> element at all (use <span style="cursor:pointer"> instead) — if it’s not a real link of course.

Answer 3

Change

$('.spa_id_href').click(function(){...

to

$('.spa_id_href').click(function(evt){...//notice the evt param

and in the function, call

evt.preventDefault();

Answer 4

While the other answers here make excellent points about canceling events, you will still run into problems if your JavaScript contains errors which prevent your event-canceling code from being run. (As might be the case if you're, say, debugging your code.

As an additional precaution, I strongly recommend you not use href="#" on links which only trigger scripts. Instead, use the void operator:

<a href="javascript:void(0)" onclick="...">...</a>

The reason for this is: when the event is not canceled, the browser will attempt to load the URL supplied by the href attribute. The javascript: "protocol" tells the browser to instead use the value of the accompanying code unless that value is undefined. The void operator exists explicitly to return undefined, so the browser stays on the existing page — with no reload/refresh — allowing you to continue debugging your script.

This also allows you to skip the entire event-canceling mess for JS-only links (though you will still need to cancel events in code attached to links which have a "fallback" URL for non-JS clients).

Answer 5

Its basically re-lated to event cancelling.. Try this.

try { ( e || window.event).preventDefault(); } catch( ex ) { /* do Nothing */ }