How to convert this jQuery snippet to plain JS or Mootools?

October 15, 2011 10:55 AM

Need to get standard Javascript or Mootools equivalent code for this jQuery snippet.

The snippet is here: Link

It displays an alert box when you click a link to leave your website and go to a third-party website.

I can't use jQuery though--only standard Javascript or Mootools.

Can anyone advise or help? I'm not sure if the conversion to Mootools might be easy or if those are jQuery-specific tools that have no easy equivalent.

Thank you.

posted by circular to Computers & Internet (11 answers total)

Can you explain why you can't use jquery?
jquery and mootools can peacefully coexist if you use jQuery.noConflict
posted by jozxyqk at 10:59 AM on October 15, 2011

Response by poster: Hi, it's a page weight issue. Thank you.
posted by circular at 10:59 AM on October 15, 2011

It looks like the only thing special-to-jquery that's going on in your code snippet is that it's creating custom selectors ":internal" and ":external". You could just use classes instead, and a function that detects whether the link is class "internal" or "external" class when it is added to the page.
posted by jozxyqk at 11:11 AM on October 15, 2011 [1 favorite]

If including Sizzle was feasible instead of the whole of jQuery (Sizzle is the bit that does the element selecting, and can be used on its own) then instead of $.expr[':'].external you'd have Sizzle.selectors.filters.external (and the same for internal...) then you could use Sizzle.find instead of $().

Otherwise you'd have to find all 'a's, and then perform the checks before attaching the click-listeners.
posted by gregjones at 11:12 AM on October 15, 2011

You should ask on StackOverflow... the reputation from answering would motivate me to do the translation.
posted by Jacen Solo at 5:32 PM on October 15, 2011

Best answer: Like jozxyqk mentioned, you can do it with classes rather than jQuery's custom selectors. If links get added to your page dynamically you'll need to rerun this, but I doubt that's an issue.

So here's what the code in question looks like using MooTools (tested with MooTools 1.4):

<script>
window.addEvent('domready', function() {

    $$('a').each(function(el){
        var obj = document.createElement('a');
        obj.setAttribute('href', el.getAttribute('href'))
        if (obj.hostname === location.hostname) {
            el.addClass('internalLink');
        } else if (!obj.href.match(/^mailto\:/) && (obj.hostname != location.hostname)) {
            el.addClass('externalLink');
        }
        obj = null;
    });

    var unloadMessage = function() {
        return "Don't leave me!";
    };

    $$('a.internalLink').addEvent('click', function() { 
        window.onbeforeunload = null;
    });
    $$('form').addEvent('submit', function() { 
        window.onbeforeunload = null;
    });

    $$('a.externalLink').addEvent('click', function() { 
        window.onbeforeunload = unloadMessage;
    });

    window.onbeforeunload = unloadMessage;

});
</script>

posted by artlung at 6:46 PM on October 15, 2011

Response by poster: Artlung, that worked! Very helpful, thank you. And thanks to everyone else who helped out too.
posted by circular at 9:28 PM on October 15, 2011

Response by poster: Hm, just realized...there's a sign-in form for a third-party service on one of our pages. Is there a way to exclude a domain from this alert function?
posted by circular at 9:32 PM on October 15, 2011

Response by poster: Ah, nevermind, that works but annoyingly it does seem to call alert() if the page is reloaded. If anybody knows how to avoid that, please let me know. Thanks!
posted by circular at 10:01 PM on October 15, 2011

Best answer:

window.addEvent('domready', function() {

	$$('a').each(function(el){
		var obj = document.createElement('a');
		obj.setAttribute('href', el.getAttribute('href'))
		if (obj.hostname === location.hostname) {
			el.addClass('internalLink');
		} else if (!obj.href.match(/^mailto\:/) && (obj.hostname != location.hostname)) {
			el.addClass('externalLink');
		}
		obj = null;
	})

    var unloadMessage = function() {
        return "Don't leave me!";
    };

    $$('a.internalLink').addEvent('click', function() { 
        window.onbeforeunload = null;
    });

    $$('form').addEvent('submit', function() { 
        window.onbeforeunload = null;
    });

    $$('a.externalLink').addEvent('click', function() { 
        window.onbeforeunload = unloadMessage;
    });

    window.onbeforeunload = null;

});

The only change was to the final window.onbeforeunload = null;.

The code I've translated matches exactly the logic of the code you found. The form handling does nothing. If you want to have some forms do one thing and other forms do another you'd need to be more specific.
posted by artlung at 10:15 PM on October 15, 2011

Response by poster: Words great--thank you!
posted by circular at 10:08 AM on October 16, 2011