[Koha-devel] Javascript errors in OPAC

Thu Mar 5 00:56:09 CET 2020

After writing some patches and doing some testing here’s the results:

1.	Jonathan’s idea of using “#” instead of “/cgi-bin/koha/opac-user.pl” works. 
2.	My idea of using “#loginModal” instead of “/cgi-bin/koha/opac-user.pl” (and disabling our a.login-link.loginModal-trigger click handler workaround) also works.

I’ll post both patches on https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=24803, although for now I’m just targeting this one spot. It looks like there are a number of other links (like the Google OpenID Connect one) which will also need patches.

I’m wondering if anyone knows why the “href” was “/cgi-bin/koha/opac-user.pl” instead of “#” or “#loginModal”. I’m wondering if the idea was to keep the A element as a functional link? 

I think we decided a while ago though that the OPAC is too Javascript heavy to support non-Javascript, so I don’t see any dramas in changing it to “#” or “#loginModal” (even if Bootstrap’s methodology of embedding a CSS selector in the href attribute seems problematic imho). 

David Cook

Systems Librarian

Prosentient Systems

72/330 Wattle St

Ultimo, NSW 2007

Australia

Office: 02 9212 0899

Direct: 02 8005 0595

From: Koha-devel <koha-devel-bounces at lists.koha-community.org> On Behalf Of dcook at prosentient.com.au
Sent: Thursday, 5 March 2020 10:24 AM
To: 'Jonathan Druart' <jonathan.druart at bugs.koha-community.org>
Cc: 'koha-devel' <koha-devel at lists.koha-community.org>
Subject: Re: [Koha-devel] Javascript errors in OPAC

Thanks for replying so quickly, Jonathan. 

Based on https://www.w3schools.com/Bootstrap/bootstrap_ref_js_modal.asp, I’d say that it should actually be a CSS ID selector. In this case #loginModal. This makes sense because when I was debugging the Jquery, it was failing to use “/cgi-bin/koha/opac-user.pl” as a selector for creating a Jquery object. Looks like Bootstrap is cheating by requiring using a href attribute to store a CSS ID selector…

I’ll write up a patch for this and see how I go.

For what it’s worth, I don’t think using href=”#” would work because it’s not a valid CSS selector. I think you’d get something like this instead (which I’ve been getting in a 19.11 instance with some custom HTML in the OPAC system preferences although admittedly I haven’t 100% determined its cause either):

jquery-3.4.1.min.js?date=08032016:formatted:546 Uncaught Error: Syntax error, unrecognized expression: #

    at Function.se.error (jquery-3.4.1.min.js?date=08032016:formatted:546)

    at se.tokenize (jquery-3.4.1.min.js?date=08032016:formatted:969)

    at se.select (jquery-3.4.1.min.js?date=08032016:formatted:1024)

    at Function.se [as find] (jquery-3.4.1.min.js?date=08032016:formatted:289)

    at k.fn.init.find (jquery-3.4.1.min.js?date=08032016:formatted:1138)

    at new k.fn.init (jquery-3.4.1.min.js?date=08032016:formatted:1159)

    at k (jquery-3.4.1.min.js?date=08032016:formatted:50)

    at i (bootstrap.min.js?date=08032016:6)

    at HTMLAnchorElement.<anonymous> (bootstrap.min.js?date=08032016:6)

    at Function.each (jquery-3.4.1.min.js?date=08032016:formatted:146)

But… we didn’t follow https://www.w3schools.com/Bootstrap/bootstrap_ref_js_modal.asp in previous versions of Koha, so I’m wondering why things didn’t bust previously. 

Debugging the Bootstrap JS…. In 17.05 the Jquery object instantiation was using “init” and 19.11 it uses “s.fn.init” which appears to be provided by jquery-migrate-3.1.0. In 17.05, the function that dies in 19.11 succeeds… and it looks like it’s using “/cgi-bin/koha/opac-user.pl” as a selector… which was invalid but it didn’t die. It just returned nothing.

Ahhh so the Bootstrap handling would fail, and then eventually the a.loginModal-trigger click handler that we define in script.js runs and does the work. 

So it seems to me we were probably using Bootstrap incorrectly before 19.11 but it didn’t matter because it didn’t throw an error and we worked around it. 

Ok, I’m going to write up a patch and see how I go…

Thanks, Jonathan ^_^. This was driving me a bit crazy last night heh.

David Cook

Systems Librarian

Prosentient Systems

72/330 Wattle St

Ultimo, NSW 2007

Australia

Office: 02 9212 0899

Direct: 02 8005 0595

From: Jonathan Druart <jonathan.druart at bugs.koha-community.org <mailto:jonathan.druart at bugs.koha-community.org> > 
Sent: Wednesday, 4 March 2020 8:34 PM
To: David Cook <dcook at prosentient.com.au <mailto:dcook at prosentient.com.au> >
Cc: koha-devel <koha-devel at lists.koha-community.org <mailto:koha-devel at lists.koha-community.org> >
Subject: Re: [Koha-devel] Javascript errors in OPAC

href is supposed to be an anchor, but it's an url

https://www.w3schools.com/Bootstrap/bootstrap_ref_js_modal.asp

Caused by

  commit 8b1fb387acee35ba64f61d59fd332a79
  Bug 14862: Upgrade jQuery from 1.7 to 3.4.1 in OPAC

We should replace the href="/cgi-bin/koha/opac-user.pl <http://opac-user.pl> " with href="#". But I first glance I'd say that the open id connect stuff is broken.

Le mer. 4 mars 2020 à 09:36, <dcook at prosentient.com.au <mailto:dcook at prosentient.com.au> > a écrit :

Hi all (and especially Owen),

I’m noticing some odd Javascript errors in the OPAC in 19.11 and master. 

Steps to reproduce:

1.	Go to the OPAC and open the F12 dev tools. 
2.	Click on “Log in to your account”
3.	Note the following in your console logs

jquery-3.4.1.min_19.1200030.js:2 Uncaught Error: Syntax error, unrecognized expression: /cgi-bin/koha/opac-user.pl <http://opac-user.pl> 

    at Function.se.error (jquery-3.4.1.min_19.1200030.js:2)

    at se.tokenize (jquery-3.4.1.min_19.1200030.js:2)

    at se.select (jquery-3.4.1.min_19.1200030.js:2)

    at Function.se (jquery-3.4.1.min_19.1200030.js:2)

    at Function.s.find (jquery-migrate-3.1.0.min_19.1200030.js:2)

    at k.fn.init.find (jquery-3.4.1.min_19.1200030.js:2)

    at s.fn.init.k.fn.init (jquery-3.4.1.min_19.1200030.js:2)

    at new s.fn.init (jquery-migrate-3.1.0.min_19.1200030.js:2)

    at k (jquery-3.4.1.min_19.1200030.js:2)

at HTMLAnchorElement.<anonymous> (bootstrap.min_19.1200030.js:6)

Using the Chrome tools, I was able to pretty print the Javascript, so now I see the following:

Uncaught Error: Syntax error, unrecognized expression: /cgi-bin/koha/opac-user.pl <http://opac-user.pl> 

    at Function.se.error (jquery-3.4.1.min_19.1200030.js:formatted:546)

    at se.tokenize (jquery-3.4.1.min_19.1200030.js:formatted:969)

    at se.select (jquery-3.4.1.min_19.1200030.js:formatted:1024)

    at Function.se (jquery-3.4.1.min_19.1200030.js:formatted:289)

    at Function.s.find (jquery-migrate-3.1.0.min_19.1200030.js:2)

    at k.fn.init.find (jquery-3.4.1.min_19.1200030.js:formatted:1138)

    at s.fn.init.k.fn.init (jquery-3.4.1.min_19.1200030.js:formatted:1159)

    at new s.fn.init (jquery-migrate-3.1.0.min_19.1200030.js:2)

    at k (jquery-3.4.1.min_19.1200030.js:formatted:50)

at HTMLAnchorElement.<anonymous> (bootstrap.min_19.1200030.js:formatted:535)

It kind of looks to me like some sort of incompatibility between Bootstrap 2.3.1 and Jquery 3.4.1?

I’ve put breakpoints up and down this code but it’s not jumping out at me exactly what’s happening except that maybe it’s trying to use the href attribute as a selector and it’s not working… but why it would even try in the first place confuses me. It looks like a Bootstrap-level thing, which is why I’m thinking maybe older versions of Jquery worked a bit differently? 

Anyway I’ve already stayed way too late at work today. Maybe someone smarter than me can figure this one out.

David Cook

Systems Librarian

Prosentient Systems

72/330 Wattle St

Ultimo, NSW 2007

Australia

Office: 02 9212 0899

Direct: 02 8005 0595

_______________________________________________
Koha-devel mailing list
Koha-devel at lists.koha-community.org <mailto:Koha-devel at lists.koha-community.org> 
https://lists.koha-community.org/cgi-bin/mailman/listinfo/koha-devel
website : http://www.koha-community.org/
git : http://git.koha-community.org/
bugs : http://bugs.koha-community.org/

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.koha-community.org/pipermail/koha-devel/attachments/20200305/ce77daeb/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 484 bytes
Desc: not available
URL: <http://lists.koha-community.org/pipermail/koha-devel/attachments/20200305/ce77daeb/attachment-0001.sig>