Web Development Special Interest Group
Past Meetings
Description
The Web Development Special Interest Group meets on the third Thursday of each month at 10:00 AM Pacific (1:00 PM Eastern) to discuss and collaborate on topics relating to Koha user experience and interface design, jQuery/CSS/HTML customizations, and more.
jQuery Tutorials
Videos
Shared projects and guides
When an item that is owned by another library is marked lost, interrupt the process with a warning and the opportunity to print a reminder/invoice.
Instructions for adding notes to the Intranet “Purchase Suggestions” form via jquery. Includes step by step instructions that can be used to create notes on other pages as well.
//——————Begin Add ILL note to staff suggestion screen————————————–
$(document).ready(function(){
if (window.location.href.indexOf(“suggestion/suggestion.pl”) > -1) {
$(“li:contains(‘Notes’)”).prepend(“Please ask patron if they would like ILL if not purchased by the library and put ‘ILL yes’ or ‘ILL no’ in the notes field. Also please initial.”);
}
});
//——————END Add ILL note to staff suggestion screen——————————————-
Using JQuery to add notes to Koha
In my example I added a note to the beginning of the notes field on the ‘Suggestion’ screen, but you can use the method to add a note to any screen.
I always start with a jquery note to make sure anyone who looks at the code will know what I’m trying to do here. This can be accomplished by // at the beginning of a line. That whole line will then become a code comment.
//——————Begin Add ILL note to staff suggestion screen————————————–
I usually also add an “end” note at the bottom and put all my code between these two comments.
//——————Begin Add ILL note to staff suggestion screen————————————–
//——————END Add ILL note to staff suggestion screen——————————————-
Next I want to add:
$(document).ready(function()
This will make it so my code will only run after the page is loaded and ready. You might also see $() on some snippets of code as a shorthand for this.
So now my code looks like this:
//——————Begin Add ILL note to staff suggestion screen————————————–
$(document).ready(function()
//——————END Add ILL note to staff suggestion screen——————————————-
Next I’m going to define the function. The function will go inside some brackets. Again, I usually add the beginning and end bracket: I also have a free open ( at the beginning of the function, so I’ll close that off after the last }. I also want to add a ; at the end of my block to indicate the end. Everything else we do will go between those {} brackets.
//——————Begin Add ILL note to staff suggestion screen————————————–
$(document).ready(function(){
});
//——————END Add ILL note to staff suggestion screen——————————————-
The next thing we need to add is how we decide which page(s) we want the code to care about. We’ll need to add an ‘if’ statement to the code:
//——————Begin Add ILL note to staff suggestion screen————————————–
$(document).ready(function(){
If(window.location.href.indexOf(“suggestion/suggestion.pl”) >-1)
});
//——————END Add ILL note to staff suggestion screen——————————————-
If(window.location.href.indexOf(“suggestion/suggestion.pl”) >-1)
This ‘if’ statement asks if the url contains the string “suggestion/suggestion.pl” in the index position.
You can replace suggestion/suggestion.pl with other pages, such as:
circ/circulation.pl | Circulation – Check out |
members/pay.pl or members/boraccount.pl | Pay fines/account |
members.moremember.pl | Patron details screen |
catalogue/search.pl | Search |
These are just a few examples. You can always find more by checking the url of the page you want to effect.
Now that we’ve told our function where we want it to run, we have to tell it what to do.
For this we need to add more brackets:
//——————Begin Add ILL note to staff suggestion screen————————————–
$(document).ready(function(){
If(window.location.href.indexOf(“suggestion/suggestion.pl”) >-1){
}
});
//——————END Add ILL note to staff suggestion screen——————————————-
Everything else we need will go between those two brackets.
Next, we are going to add a note to one of the list items.
You can find the information for this by right clicking on the area you want to edit and selecting ‘inspect element’
This will open the following screen:
The list item
- does not have any sort of label or ID so we will need to check to see if the list item contains the word “Notes”://——————Begin Add ILL note to staff suggestion screen————————————–
$(document).ready(function(){
If(window.location.href.indexOf(“suggestion/suggestion.pl”) >-1){
$(“li:contains(‘Notes’))
});
//——————END Add ILL note to staff suggestion screen——————————————-The above code added asks if the list item contains the phrase “Notes”.
Next we need to tell it what to do when it does contain the phrase “Notes”://——————Begin Add ILL note to staff suggestion screen————————————–
$(document).ready(function(){
If(window.location.href.indexOf(“suggestion/suggestion.pl”) >-1){
$(“li:contains(‘Notes’)).prepend
});
//——————END Add ILL note to staff suggestion screen——————————————-Prepend adds text before, append adds text after.
I added the message in the ‘( )’ and ended the line with a ‘;’ and then closed out the block including the li check with a ‘}’.
That leaves us with a complete chunk of code with the following result:
This code gets placed in the intranetuserjs system preference.
$(document).ready(function() {
// RT 49582 – Force librarian to select a payment type
// RT 57710 – Don’t force selection for writeoff
if( $(“#payfine > input[name=’type’]”).val() != “writeoff”){
let payment_submit = $(‘#payfine input[type=”submit”]’);
payment_submit.attr(‘disabled’, ‘disabled’);
$(‘#payfine select[name=”payment_type”]’).on(‘change’, function() {
if ($(this).val()) {
payment_submit.removeAttr(‘disabled’);
} else {
payment_submit.attr(‘disabled’, ‘disabled’);
}
});
}