ansaurus

Question

How do I write my script for each link I want to redirect

Answer 1

A:

A far better approach would be to do something like the below - that way the logic for redirecting the user stays reasonably close to the link, and so people looking at the source wont become incredibly confused when the page takes people elsewhere.

<a href="nickname.html" id="redirect1" onclick="return initRedirect('Go to Salestax page?', 'nickname.html');">Some link</a>

External script:

function initRedirect(message, url)
{
    confirm(message);
    window.location = url;
    return false;
}

Kragen 2010-01-14 16:49:22

Except that you should stay away from HTML embedded event registration and that the `confirm` in that function does nothing.

Justin Johnson 2010-01-14 17:31:49

The confirm function is copied and pasted from the posters question, and I disagree with the argument against embedded event handlers - although I agree with separating behaviour and structure, there needs to be a link between behaviour and structure at some point and this method makes the link obvious. The fact that the link does something unexpected it clear from looking at the link itself, whereas in your code you need to look elsewhere, possibly in a different file, before the link is visible.

Kragen 2010-01-14 18:48:05

Answer 2

A:

A nice thing about onclick events is that if you return false it'll stop the browser from going to the link defined in the HREF. If you return true it'll keep going through with the navigation. You don't need to worry about the window.location in your function if you use this method, which will simplify things a lot. So you can just do:

<a href="salestax.html" onclick="return confirm('Go to Salestax page?');">Salestax</a>

I'll prompt them if they want to continue. They click yes it'll keep going as if they clicked the link normally, they click no it'll stop them from navigating away. This way you don't have to duplicate the link's HREF in both your HTML and javascript.

You could still dynamically bind this, but if you're doing it by ID I don't really see any advantage vs just defining the onclick in the HTML.

Parrots 2010-01-14 16:51:13

-1 See "Don't use it" here: http://www.quirksmode.org/js/events_early.html

Justin Johnson 2010-01-14 17:34:44

Agreed, but if he's not using something like jQuery where he can easily bind all these events using a selector, it's crazy to have to bind everything by ID one at a time. Best refactor would be to add the confirm text as the title and use a nice little bit of jQuery, but was avoiding that much of a change.

Parrots 2010-01-14 17:46:55

Answer 3

A:

First off, unless you're trying to prevent a user from losing changes that they've made on the current page, it's not clear why you would want to create this functionality. But at any rate, here's a standard/basic approach:

window.onload = function() {
     document.getElementById("redirect").onclick = redirectConfirmation("Go to Salestax page?");
     document.getElementById("redirect1").onclick = redirectConfirmation("Go to Nickname?");
};

redirectConfirmation = function(msg, urlOverride) {
    return function() {
        if ( confirm(msg) ) {
            window.location = urlOverride || this.href || "#"
        }
        return false;
    };
};

redirectConfirmation optionally takes a second parameter which can be used to explicitly set the url that the page is redirected to; otherwise, it will default to the URL specified by the href attribute of the anchor tag being acted upon (and if all else fails, it will fail gracefully with "#").

If you're using a common library, like jQuery, you can simplify your event registration as follows:

$(function() {
     $("#redirect").click( redirectConfirmation("Go to Salestax page?") );
     $("#redirect1").click( redirectConfirmation("Go to Nickname?") );
});

Justin Johnson 2010-01-14 17:46:48

ansaurus

tags:

views:

answers:

How do I write my script for each link I want to redirect

related questions