[Koha] some jQuery advice please?

[Carlos Lopez]

Thank you Eric! Very quick reply

I'll try that out .


With kind regards from the Dalton McCaughey Library Team



Carlos Lopez



Dalton McCaughey Library | 29 College Crescent, Parkville, VICTORIA 3052

Ph: 03 9340 8888 ext.1 | library at dml.vic.edu.au<mailto:library at dml.vic.edu.au> | library.dmlibrary.org.au


________________________________
From: Eric Phetteplace <ephetteplace at cca.edu>
Sent: Wednesday, 2 September 2020 2:15 PM
To: Carlos Lopez <clopez at dml.vic.edu.au>
Cc: koha <koha at lists.katipo.co.nz>
Subject: Re: [Koha] some jQuery advice please?

Hi Carlos,

You actually need an attribute selector.

.isbn works for class=isbn
#isbn works for I'd=isbn

But the ISBN spans don't have either of those, they have property=isbn. The way you select that, in both CSS and jQuery, is

[property="isbn"]

Or span[property="isbn"] if you want to add the HTML tag (should work either way). So try a selector like

$('[property="isbn"]')

(note the mixed single versus double quotes to prevent an error)

Best,
Eric Phetteplace
Systems Librarian
California College of the Arts

On Tue, Sep 1, 2020, 9:02 PM Carlos Lopez <clopez at dml.vic.edu.au<mailto:clopez at dml.vic.edu.au>> wrote:
Hi folks

My Javascript/jQuery skills are rudimentary at best and I hope someone might be able to help me out.

I'm trying to collapse large blocks of ISBNs on OPAC records (where for example we have someone's works catalogued as a set and every volume has a different ISBN).

We have a similar bit of jQuery that collapses large contents notes:

----
// Collapse contents on OPAC
if(window.location.href.indexOf("cgi-bin/koha/opac-detail.pl?biblionumber<http://opac-detail.pl?biblionumber>") > -1) {
  $(document).ready(function(){
    var countclass = $(".contentblock").length; //counts number of contentblocks
    if(countclass > 0){ //if more than one contentblock
    var expander = "<div id='expander' style='font-size:14px; color:green;'>Click to Expand +</div>"; //create expansion button
    function tog(){$(document).find('.contentblock').slideToggle("slow")}; //create slide toggle function
    function typ(){ //change expansion button based on display of contentblocks
        if($(".contentblock").css('display') == 'block'){
          $("#expander").text("Click to Expand +");
        }else if($(".contentblock").css('display') == 'none'){
          $("#expander").text("Click to Collapse -");
        };
    };
    $("span:contains('Contents:')").append(expander); //add expansion button to page
    $(".contentblock").hide(); //hide contentblocks initially
    $("#expander").click(function(){ //execute the two functions when the expansion button is clicked
      typ();
      tog();
    });
    };
  });
}
----
(from https://wiki.koha-community.org/wiki/JQuery_Library#Collapsible_contents_in_bib_record)

I thought if I replaced instances of ".contentblock" with ".isbn" this might do what I want:
----
// Collapse ISBNs on OPAC
if(window.location.href.indexOf("cgi-bin/koha/opac-detail.pl?biblionumber<http://opac-detail.pl?biblionumber>") > -1) {
  $(document).ready(function(){
    var countisbns = $(".isbn").length; //counts number of isbns
    if(countisbns > 2){ //if more than 3 isbns
    var expander = "<div id='expander' style='font-size:14px; color:green;'>Click to Expand +</div>"; //create expansion button
    function tog(){$(document).find('.isbn').slideToggle("slow")}; //create slide toggle function
    function typ(){ //change expansion button based on display of isbns
        if($(".isbn").css('display') == 'block'){
          $("#expander").text("Click to Expand +");
        }else if($(".isbn").css('display') == 'none'){
          $("#expander").text("Click to Collapse -");
        };
    };
    $("span:contains('ISBN:')").append(expander); //add expansion button to page
    $(".isbn").hide(); //hide isbns initially
    $("#expander").click(function(){ //execute the two functions when the expansion button is clicked
      typ();
      tog();
    });
    };
  });
}
----

Unfortunately that doesn't work.

I can see that the contents blocks look like <div class="contentblock" property="description" style="display: block;"> while ISBNs look like <span property="isbn"> (so really I should have used "#isbn" rather than ".isbn" but that didn't work either).

How do I select these ISBNs so that I can hide them? Should I be using XPath or CSS Selectors instead?



With kind regards from the Dalton McCaughey Library Team



Carlos Lopez



Dalton McCaughey Library | 29 College Crescent, Parkville, VICTORIA 3052

Ph: 03 9340 8888 ext.1 | library at dml.vic.edu.au<mailto:library at dml.vic.edu.au><mailto:library at dml.vic.edu.au<mailto:library at dml.vic.edu.au>> | library.dmlibrary.org.au<http://library.dmlibrary.org.au>

_______________________________________________

Koha mailing list  http://koha-community.org
Koha at lists.katipo.co.nz<mailto:Koha at lists.katipo.co.nz>
Unsubscribe: https://lists.katipo.co.nz/mailman/listinfo/koha

Report this message as spam<https://console.mailguard.com.au/ras/1YRQfMv15C/7DTgryF1DZA9fwTno6aqr6/0.4>