OJS 2.4.6 Problem with JQuery / Javascript on header.tpl

I’m trying to use twitter bootstrap’s nav menu with CWSpear’s bootstrap-hover-dropdown, but there seem to be some javascript conflicts.
At first, the hover and click events didn’t work on the nav menu. I removed the ojs default older version of jquery and included ver 1.11.3, then went ahead to find out the first problem:

$(".tagit").live('click', function() { in the header. It turned out live was deprecated, so I replaced with on and got hover events to work on the nav menu. (but this was as far as I could go)

click events still don’t fire.

I removed the entire jqueryValidatorI18n function before $(".tagit").live('click', function() { , and everything worked perfectly.

I don’t understand what’s going on in the jqueryValidatorI18n function, so I can’t modify it.
I would be very glad if someone pointed out to me how to go about solving this problem.

thanks.
PS: please go easy on me, I’m not a pro with jquery / Javascript :smile:

Hi, @samice!
Third-party JavaScript on my site didn’t work until I’ve place it inside the {literal}{/literal} construction of each *.tpl. After that works fine. I don’t know but maybe it helps you to avoid modification.

Hi @samice,

Are you using a developer tool like Firebug? If Javascript code stops running it’s usually because an error was encountered; Firebug or something similar should show you what the error was.

Regards,
Alec Smecher
Public Knowledge Project Team

Thanks @gusar and @asmecher for the replies… …after moving around some lines, I finally got things to work.
But now, the “Font Size” block in the sidebar just shows title “Font Size” with nothing below it (i.e no buttons to increase/decrease fonts.); also on the search page, the tab that tells you “Additional Search Options (click to hide)”, is no longer there. for some reason it now has a class that’s telling css to display: none. It’s clearly still javascript conflicts. Not like I need these two (search and fonts) for now. I’m just afraid something more important (that I don’t know of yet), might also be “broken”.

Pointers::
In Chrome developer mode, I see this error: Uncaught Error: The handler "$.pkp.plugins.generic.lucene.LuceneAutocompleteHandler" has already been bound to the selected element! …I have no idea what it implies.

What I’ve modified in “header.tpl” (in order of appearance) :slight_smile:
1. changed jquery to ver 1.11.3
2. changed jquery migrate to latest version
3. changed jquery-ui to latest version
4. added bootstrap.min.js
5. added bootstrap-hover-dropdown.min.js

More help will be appreciated. thank you.

Hi @samice,

The problem is caused by the new version of JQuery being incompatible with some of the older OJS code. If you don’t strictly need to replace the current version of JQuery, then I’d suggest keeping the old version. If you do need to replace it, I can see about tracking down the problem – one of our developers has been through this before.

Regards,
Alec Smecher
Public Knowledge Project Team

wow, thanks @asmecher for the prompt reply!

As much as I do not want (at all) to break the core functionalities of my beloved OJS, I also (very badly) want to use these other plugins (i.e bootstrap and co). So, I’m gladly going with your second suggestion, “I can see about tracking down the problem”.
I await further instructions.
and thanks again.

Hi @samice,

No problem. Tagging @jmacgreg and @mfelczak, as I believe they were working through this recently – if neither of them have it at their fingertips I can try tracking down an email thread.

Regards,
Alec Smecher
Public Knowledge Project Team

Hi @asmecher,

Alright then. I appreciate all the help.

Hi all, unfortunately I’m probably not going to be of much assistance here - I know one of the journals we host had updated their jquery, and I can confirm that it caused problems, but I’m not sure how it was done originally and how the problems were resolved. (Also, the developer who did that implementation is no longer with us.) @mfelczak may have come across this kind of thing before, though.

J

Hi @samice ,

I tracked this down. For the master (development) versions of our software, we upgraded JQuery/JQueryUI on this bug entry:
https://pkp.sfu.ca/bugzilla/show_bug.cgi?id=8707

There’s a lot of stuff there, and it might not be apparent how to apply it to the stable release, but I think there are really only one or two changes that you’ll need. Try in particular this change:

Regards,
Alec Smecher
Public Knowledge Project Team

Awesome! thanks @asmecher.

I changed the lines suggested in the commit, [quote]
*8707* Fixed argument count issue for $(selector).data()
[/quote], and I got the advanced search page back in shape.

Still finding it difficult though tracking down the font issue in the bug entry.
I guess I need to search harder (though a little help would still be appreciated). :slight_smile:

thanks again @asmecher!

Hi @samice,

We had to change a bunch of plugins we had been using but were no longer maintained. I suspect the font sizer is likely one of these. I don’t think we’ve got a font sizer for OJS 3.0 or OMP 1.2 (the next releases from the master branch), so I’d suggest looking for a 3rd-party font sizer that’s compatible with the most recent release of JQuery; there should be lots, and integration ought to be easy.

Regards,
Alec Smecher
Public Knowledge Project Team

@asmecher,
ok then… …I’ll look around, and see what I’ll find.
Cheers