***This post has been published in ACRL TechConnect on April 8, 2013. ***
In this post, I will describe two cases in which I solved a practical problem with a little bit of JavaScript and JQuery. Check them out first here before reading the rest of the post which will explain how the code works.
- Library ebook link HTML string generator
- EZproxy bookmarklet generator – Longer version (with EZproxy Suffix)
- EZproxy bookmarklet generator – Shorter version (with EZproxy Prefix)
Source: http://www.flickr.com/photos/albaum/448573998/
1. Library ebook link HTML string generator
If you are managing a library website, you will be using a lot of hyperlinks for library resources. Sometimes you can distribute some of the repetitive tasks to student workers, but they are usually not familiar with HTML. I had a situation in which I needed to add a number of links for library e-books for my library’s Course E-book LibGuide page, when I was swamped with many other projects at the same time. So I wondered if I could somehow still use the library’s student assistant’s help by creating an providing a simple tool, so that the student only needs to input the link title and url and get me the result as HTML. This way, I can still delegate some work when I am swamped with other projects that require my attention. (N.B. Needless to say, this doesn’t mean that what I did was the best way to use the student assistance for this type of work. I didn’t want them to edit the page directly because this page had tabs tabs and the student using the WYSWYG editor might inadvertently remove part of the tabbed box code.)
The following code exactly does that.
- Create a block of strings that you can drop into a html page
- Code (Also shown below)
This HTML form takes an e-book title and the link to the book as input and spits out a hyperlink as a list item as a result. For example, if you fill in the title field with ‘Bradley’s Neurology in Clinical Practice’ and the link field with its url: http://ezproxy.fiu.edu/login?url=http://www.mdconsult.com/public/book/view?title=Daroff:+Bradley’s+Neurology+in+Clinical+Practice, then the result would be shown in the text area : <li><a href=”http://ezproxy.fiu.edu/login?url=http://www.mdconsult.com/public/book/view?title=Daroff:+Bradley’s+Neurology+in+Clinical+Practice”> Bradley’s Neurology in Clinical Practice</a></li> I also wanted the library student assistant to be able to do this for many e-books at once and just send me the whole set of HTML snippets that cover all ebooks. So after running the form once, if one fills out the title and the link field with another e-book information, the result would be added to the end of the previous HTML string and be displayed in the text area. The result would be like this: <li><a href=”http://ezproxy.fiu.edu/login?url=http://www.mdconsult.com/public/book/view?title=Daroff:+Bradley’s+Neurology+in+Clinical+Practice”> Bradley’s Neurology in Clinical Practice</a></li><li><a href=”http://ezproxy.fiu.edu/login?url=http://www.accessmedicine.com/resourceTOC.aspx?resourceID=64″>Cardiovascular Physiology</a></li>. Since the code is in the text area, the student can also edit if there was any error when s/he was filling out the form after clicking the button ‘Send to Text Area’.
Now, let’s take a look at what is going on behind the scene. This is the entire html file. The Javascript/JQuery code that is generating the html string in the text area is from line 22-32.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<p>
This page creates the html-friendly string for a link with a title and a url.
<ul>
<li>Fill out the form below and click the button. </li>
<li>If the link is messy, clean up first by using the <a href="http://meyerweb.com/eric/tools/dencoder/">URL decoder</a>.</li>
<li>Copy and paste the result inside the text area after you are done.</li>
</ul>
</p>
<p>
Title: <input type="text" id="title1" size="100"/><br/>
Link: <input type="text" id="link1" size="100"/><br/>
<button id="b1">Send to Text Area</button>
</p>
<p id="result1"></p>
<textarea rows="20" cols="80"></textarea>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").click(function(){
// alert('<a href="'+$("#link").val()+'">' + $("#title").val()+"</a>");
$('#result1').text('<li><a href="'+$("#link1").val()+'">' + $("#title1").val()+"</a></li>");
var res1='<li><a href="'+$("#link1").val()+'">' + $("#title1").val()+"</a></li>";
$('textarea').val($('textarea').val()+res1);
// $('textarea').text(res1);
});
}); // doc ready
</script>
</body>
</html>
Since I am using JQuery I am starting with the obligatory $(document).ready in line 2. In line 3, I am giving a callback function that will be executed when the #b1 – the button with the id of b1 in line 17 above- is clicked. Line 4 is commented out. I used this initially to test if I am getting the right string out of the input from the title and the link field using the JS alert. Line 5 is filling the p tag with the id of result 1 in line 19 above with the thus-created string. The string is also saved in variable res1 in line 7. Then it is attached to the content of the textarea field in line 8. Line 9 is commented out. If you use line 9 instead of line 8, any existing content in the textarea will be removed and only the new string created from the title and the link field will show up in the text area.
<script type="text/javascript">
$(document).ready(function(){
$("#b1").click(function(){
// alert('<a href="'+$("#link").val()+'">' + $("#title").val()+"</a>");
$('#result1').text('<li><a href="'+$("#link1").val()+'">' + $("#title1").val()+"</a></li>");
var res1='<li><a href="'+$("#link1").val()+'">' + $("#title1").val()+"</a></li>";
$('textarea').val($('textarea').val()+res1);
// $('textarea').text(res1);
});
}); // doc ready
</script>
You do not have to know a lot about scripting to solve a simple task like this!
2. EZproxy bookmarklet generator – Longer version
My second example is a bookmarklet that reloads the current page through a specific EZproxy system.
- EZproxy bookmarklet creator- Longer version
- Code (Also shown below)
If you think that this bookmarklet reinvents the wheel since the LibX toolbar already does this, you are correct. And also if you are a librarian working with e-resources, you already know to add the EZproxy suffix at the end of the domain name of the url when a patron asks if a certain article on a web page is available through the library or not. But I found that no matter how many times I explain this trick of adding the EZproxy suffix to patrons, the trick doesn’t seem to stick in their busy minds. Also, many doctors and medical students, who are the primary patrons of my library, work at the computers in hospitals and they do not have the necessary privilege to install a toolbar on those computers. But they can create a bookmark.
Similarly, many students asked me why there is no LibX toolbar for their mobile devices unlike in their school laptops. (In the medical school where I work, all students are required to purchase a school-designated laptop; this laptop is pre-configured with all the necessary programs including the library LibX toolbar.) Well, mobile devices are not exactly computers and so the browser toolbar doesn’t work. But students want an alternative and they can create a bookmark on their tablets and smartphones. So the proxy bookmarklet is still a worthwhile tool for the mobile device users.
This is where the bookmarklet is: http://htmlpreview.github.com/?https://github.com/bohyunkim/examples/blob/master/bkmklt.html. To test, drag the link on the top that says Full-Text from FIU Library to your bookmark toolbar. Then go to http://jama.jamanetwork.com/Issue.aspx?journalid=67&issueID=4452&direction=P. Click the new bookmarklet you got on your toolbar. The page will reload and you will be asked to log in through the Florida International University EZproxy system. When you are authenticated, you will be seeing the page proxied: http://jama.jamanetwork.com.ezproxy.fiu.edu/Issue.aspx?journalid=67&issueID=4452&direction=P.
You will be surprised to see how simple the bookmarklet is (and there is even a shorter version than this which I will show in the next section). It is a JavaScript function wrapped inside a hyperlink. Lines 2-5 each takes the domain name, the path name, and any search string after the url path from the current window location object. So in the case of http://jama.jamanetwork.com.ezproxy.fiu.edu/Issue.aspx?journalid=67&issueID=4452&direction=P, location.host is http://jama.jamanetwork.com and location.pathname is Issue.aspx . The rest of the url – ?journalid=67&issueID=4452&direction=P – is location.search. In line 4, I am putting my institution’s ezproxy suffix between these two, and in line 5, I am asking the browser load this new link.
<a href="javascript:(function(){
var host=location.host;
var path=location.pathname;
var srch=location.search;
var newlink='http://'+host+'.ezproxy.fiu.edu'+path+srch;
window.open(newlink);
})();">Full-Text from FIU Library</a>
Now let’s take a look at the whole form. I created this form for those who want to create a ready-made bookmarklet recipe. All they need is their institution’s EZproxy suffix and whatever name they want to give to the bookmarklet. Once one fills out those two fields and click ‘Customize’ button, one will get the full HTML page code with the bookmarklet as a link in it.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<h1>EZproxy Bookmarklet</h1>
<p><ul><li>
<a href="javascript:(function(){
var host=location.host;
var path=location.pathname;
var srch=location.search;
var newlink='http://'+host+'.ezproxy.fiu.edu'+path+srch;
window.open(newlink);
})();">Full-Text from FIU Library</a>
(Drag the link to the bookmark toolbar!)
</li></ul></p>
<p>This is a bookmarket that will reroute a current page through FIU EZproxy.
<br/>
If you have the LibX toolbark installed, you do not need this bookmarklet. Simply select 'Reload Page via XYZ EZproxy' on the menu that appears when you right click.
<br/>
Created by Bohyun Kim on March, 2013.
</p>
<h2>How to Test</h2>
<ul>
<li>Drag the link above to the bookmark toolbar of your web browser.</li>
<li>Click the bookmark when you are on a webpage that has an academic article.</li>
<li>It will ask you to log in through the FIU EZproxy.</li>
<li>Once you are authenticated and the library has a subscription to the journal, you will will able to get the full-text article on the page.</li>
<li>Look at the url and see if it contains .ezproxy.fiu.edu. If it does, the bookmarklet is working.</li>
</ul>
<h2>Make One for Your Library</h2>
<p>
Bookmark title: <input type="text" id="title1" size="40" placeholder="e.g. Full-Text ABC Library"/>
<em>e.g. Full-text ABC Library</em>
<br/>
Library EZproxy Suffix: <input type="text" id="link1" size="31" placeholder="e.g. ezproxy.abc.edu"/>
<em>e.g. ezproxy.abc.edu
<br/>
<button id="b1">Customize</button></em>
</p>
<p><strong>Copy the following into a text editor and save it as an html file.</strong></p>
<ul>
<li>Open the file in a web browser and drag your link to the bookmark toolbar.</li>
</ul>
<p id="result1" style="color:#F7704F;">**Customized code will appear here.**</p>
<p><strong>If you want to make any changes to the code:</strong></p>
<textarea rows="10" cols="60"></textarea>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").click(function(){
var pre="<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body> <a href="javascript:(function(){ var hst=location.host; var path=location.pathname; var srch=location.search; var newlink='http://'+hst";
var link1=$('#link1').val();
var post="'+path+srch; window.open(newlink); })();">";
var title=$("#title1").val();
var end="</a> </body> </html>";
var final=$('<div />').html(pre+"+'."+link1+post+title+end).text()
$('#result1').text(final);
$('textarea').val(final);
});
}); // doc ready
</script>
</body>
</html>
That ‘customize’ part is done here with several lines of JQuery. You will notice that the process is quite similar to what I did in my first example. In lines 4-8, I am just stitching together a bunch of text strings to spit out the whole code in the text area eventually when the ‘Customize’ button is clicked. All special characters used in HTML tags such as ‘<’ and ‘>’ have been changed to html enities. In line 9, I am taking the entire string saved in the variable end –I hope you name your variables a little more carefully than I do!– and adding it to an empty div so that the string would be set as the inner HTML property of that div. And then I retrieve it using the .text() method. The result is the HTML code with the html entities decoded.
<script type="text/javascript">
$(document).ready(function(){
$("#b1").click(function(){
var pre="<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body> <a href="javascript:(function(){ var hst=location.host; alert(hst); var path=location.pathname; var srch=location.search; var newlink='http://'+hst";
var link1=$('#link1').val();
var post="'+path+srch; window.open(newlink); })();">";
var title=$("#title1").val();
var end="</a> </body> </html>";
var final=$('<div />').html(pre+"+'."+link1+post+title+end).text()
$('#result1').text(final);
$('textarea').val(final);
});
}); // doc ready
</script>
Not too bad, right? I hope these examples show how just a few or several lines of code can be used to solve your practical problems at work. Coding is there for you to automate time-consuming and/or repetitive tasks.
3. EZproxy bookmarklet generator – Shorter version
There is a simpler way to create a EZproxy bookmarklet than the one sketched above. If you simply add EZproxy prefix in front of the entire url of the page where a user is is, you achieve the same result. In this case, you do not have to break the url with host, pathname, search string, etc.
<a href="javascript:void(location.href=%22http://ezproxy.fiu.edu/login?url=%22+location.href)">Full-Text from FIU Library</a>
Here are the code for this much simpler EZproxy bookmarklet and the bookmarklet generator. If you know the prefix of you library’s EZproxy prefix, you can make one for your library.
So there are many ways to get the same thing done. Some are more elegant and some are less so. Usually a shorter one is a more elegant solution. The lesson is that you usually get to the most elegant solution after coming up with many less elegant solutions first.
Do you have a problem that can be solved by creating several lines of code? Have you ever solved a practical problem using a bit of code? Share your experience in the comments!
