• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Using onclick="alert('message')" With a Text File

Question

Gerowen    1,244

I am using onclick="alert('message')" to pop up a disclaimer on our website for links that go to websites external organization. The disclaimer however is rather long. Is there a way to get it to pull the message from a plain text file instead of me having to paste the disclaimer into the HTML of every single link?

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0
kyosuken    6

Solution number one : Vanilla JS FTW

<!-- // Make sure in your CSS that #message { display:none;} // -->
<div id="message">
Your message !
</div>

<!-- // in your onclick tag : // -->

<a href="somethinghere" onclick="alert(document.getElementById('message').innerHTML);">Click a me !!</a>

So what does it do ? basically stores the lenghty message in a "hidden" div. And then you just have to get the content on the fly when you build your alert !

Note that the code should work, unless i made a typo :) !

Solution number two : jQueryesque solution ~

The Html :

<!-- // We keep the very same method as above cause it's the cleanest IMO and make sure in your CSS that #message { display:none;} // -->
<div id="message">
Your message !
</div>

<!-- // Your links, don't add any inline JS to them ! (that's bad) instead we are going to use some jQuery hooking // -->

<a href="gosomewhere" class="hasmessage">My beautiful link !</a>

The JS :

- Make sure you have jquery added to your <head></head> and the following script by the end of your webpage

&lt;script&gt;
// Make sure the script is in an auto execute routine also to preserve compat with jQuery, and to prevent glob vars collision if any ~
(function($){

// Retrieve the message text from the div
var message = $('#message').html(); 

// we will "hook" on our links that should have the message
// Note that i added the class "hasmessage" so that only the links you want to have the alert will display it
$('.hasmessage').click(function () {

    alert(message);

});

})(jQuery);
&lt;/script&gt;

Methode 2 is the cleanest, cause you do not have a bunch of inline JS everywhere in your code, but it's also the less efficient if you only use jQuery for that (you would load 40KB worth of minified/gzipped JS just for 4 lines of code... well)

But you have the choice now ! :)

Share this post


Link to post
Share on other sites
  • 0
Gerowen    1,244

Solution number one : Vanilla JS FTW

&lt;!-- // Make sure in your CSS that #message { display:none;} // --&gt;
&lt;div id="message"&gt;
Your message !
&lt;/div&gt;

&lt;!-- // in your onclick tag : // --&gt;

&lt;a href="somethinghere" onclick="alert(document.getElementById('message').innerHTML);"&gt;Click a me !!&lt;/a&gt;

So what does it do ? basically stores the lenghty message in a "hidden" div. And then you just have to get the content on the fly when you build your alert !

Note that the code should work, unless i made a typo :) !

Solution number two : jQueryesque solution ~

The Html :

&lt;!-- // We keep the very same method as above cause it's the cleanest IMO and make sure in your CSS that #message { display:none;} // --&gt;
&lt;div id="message"&gt;
Your message !
&lt;/div&gt;

&lt;!-- // Your links, don't add any inline JS to them ! (that's bad) instead we are going to use some jQuery hooking // --&gt;

&lt;a href="gosomewhere" class="hasmessage"&gt;My beautiful link !&lt;/a&gt;

The JS :

- Make sure you have jquery added to your <head></head> and the following script by the end of your webpage

&lt;script&gt;
// Make sure the script is in an auto execute routine also to preserve compat with jQuery, and to prevent glob vars collision if any ~
(function($){

// Retrieve the message text from the div
var message = $('#message').html(); 

// we will "hook" on our links that should have the message
// Note that i added the class "hasmessage" so that only the links you want to have the alert will display it
$('.hasmessage').click(function () {

    alert(message);

});

})(jQuery);
&lt;/script&gt;

Methode 2 is the cleanest, cause you do not have a bunch of inline JS everywhere in your code, but it's also the less efficient if you only use jQuery for that (you would load 40KB worth of minified/gzipped JS just for 4 lines of code... well)

But you have the choice now ! :)

Thank you very much!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.