• 0

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

Asked by Gerowen,

 Share

Question

Grand Master

Gerowen

Posted
Posted

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?

2 answers to this question

Recommended Posts

  • 0
Rising Star

kyosuken

Posted
Posted

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 ! :)

  • 0
Grand Master

Gerowen

Posted
  • Author
Posted
  On 28/04/2011 at 08:20, kyosuken said:

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!

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.