[Resolved] Something changes between Views 2.8.4 and 2.9 that affects other javascript code

[Author]

Posts

[katrina]

I am trying to: Upgrade Views Plugin

Link to a page where the issue can be seen: I can provide privately

I expected to see:

Instead, I got:

When i upgrade my Views plugin from 2.8.4 to 2.9, something happens that affects my mobile menu, which utlizes the SlickNav javascript code found here: hidden link

I am not an expert in javascript or jquery, but I suppose it must have to do with those libraries in some way.

Is this something you might be easily able to explain how I can fix? I can provide login details to my staging site privately if it's easier to poke around directly in the code.

[Beda]

I would need to know what happens, and how to replicate the issue, then I might be able to not only suggest a solution, but eventually spot a compatibility issue, given you mention it happens only after the Views update, it may very well be a issue we introduced in the latest Toolset Views Version.

I tried to login to your site but it's not found / the address does not exist, so tells me the browser and terminal-pings I made to the site. It seems an unknown host.
Can you review the login details you provided?

To help you better with this I will need:
1. The precise steps to make the issue happen on a fresh install
2. If that is not possible, a precise description of what was working how before the update of Views and how it is broken after the update of Views.
==> In that case also a copy of the site, or access to a staging site where I can make edits will help a lot.

You can see here how to create a duplicate:
https://toolset.com/faq/provide-supporters-copy-site/

Thanks!

[Beda]

These login details still do not work, I get "invalid username".

I also asked my colleagues to test, none of which could log in successfully.

You can either provide me with steps or a duplicate, alternatively, if the Login is an issue for some reason.
I will likely need a copy of the plugin anyway additionally to steps (which I would be able to figure out on the site, but given we have no access, maybe providing simple steps and a Google Drive uploaded copy of the plugin are faster)

Thank you, and I extend my apologies for the problems with login, along with the delay due to my weekend.

[katrina]

Hi Beda - I'm sorry - would you mind trying one more time to login usingthe recent credentials i gave. I think what happened is I did a push from the live site to the staging site, and it over-wrote the new user i had set up for you. I have re-instated it now though and it should work. Please let me know... if not, I'll try and create the duplicate site.

[Beda]

OK, I was able to get in this time

I see there are currently 7 JS errors when that menu is appearing, this with or without Toolset

Hence I am not entirely surprised it breaks when Views updates, although of course, it's not View's "job" to break other plugins if they have errors 🙂

Also my browser automatically blocks several scripts on your site as they are loaded from unsafe sources (not authenticated).
This is likely due to the mixed content you use (HTTP and HTTPS).
Expectedly such issues will affect delicate JS code such as this menu uses.

The only way to go here is to (either on a local duplicate, or a staging site) remove every plugin but Toolset and that menu code, then use a native WordPress theme, and fix every JS error appearing right now in the console.
Then, test the issue.

If then it still appears, we would need to escalate it to the Developers for analysis.

Since the site you provided is a staging site, I already did most of it.
1. Disabled all Plugins but Toolset and immediately saw I cannot: you use 4 must-use and one drop in that have to be removed too.
2. Something on your site is altering Toolset UI, for example, in hidden link everything is green background, which is not what we deliver. The code or software doing this must be removed.
3. You use a Custom Theme that we cannot debug. The issue needs to be replicated with a Theme that is supported, such as a native WordPress theme or any WordPress standard theme. I understand that you likely have the SlickMenu code in the custom theme, but still we need to isolate the conflict.

This is why locally it is often better and easier to debug, but given this is a Staging site, for now we can proceed there.
Or, in other words, steps about how to achieve the issue can be faster in such cases, if available.

What I'd need you to do, is remove the Must Use and Drop In Plugins, and change the theme so we have ONLY the now broken menu code, and Toolset active.

Note that the HTTP/HTTPS errors in the console (unauthenticated content) should be resolved as well, to proceed.

[katrina]

Ok Wow - thanks so much for delving in so deep Beda. A lot of this is above my head, but i will take some time to see what I can understand myself, and then also to do as you suggest and remove those must use plugins and change the theme. It's been so long since i built the theme, and I have no memory of what those plugins are or what they are for. But I will look into it and get back to you.

When you mention the green background, are you referring to the sections shown in the attached image?

[Beda]

I mean those green backgrounds, yes.
They are not standard in Toolset.

Remember that I already deactivated most plugins and A) the Menu you report broken still exists, B) the Green Backgrounds still exist and C) the WordPress Menu Customizations as well still exist, hence I am almost sure, all those customizations are actually from your theme.

Hence, once you disable the theme, you will likely not see the Menu you report broken anymore, and that makes it impossible to debug as if it's not there, there won't be any issue either, and that is not what we want.
The best thing in this case, is to take a very minimal theme (speak, Twenty Nineteen or something alike that) and enqueue your Custom Menu as you did in the current theme. Then test the issue

I can then help you debug this, if the issue is directly happening only when Toolset is active.
I can exceptionally also help you test this locally, if you could for example create a ZIP file of your theme, and send that to me in a Google Drive Folder (make sure that it is really the theme enqueuing the scripts).
Please also add a description as of how to create a menu so to have it working with that script.
I can then locally quickly test a few things, such as making sure there are no namespace conflicts (using $ instead of jQuery when initializing the scripts, etc).
Note, this is a grey area of our support, technically, I am not allowed to analyze this because it's a Custom Theme, but on the other hand, if we can replicate a clean enqueued theme with that script and issue, we should of course not ignore it, so I am stepping a bit over the limits here to be sure, we have no conflict in Toolset.

Thanks!

[katrina]

Thank you so much. I greatly appreciate it. I will do some investigation based on your recommendations and post back here within the next few days with some more info.

[Beda]

OK, I activate a private reply just in case you need to Submit me some private data or files.

[Beda]

That's good news and bad news, you are right.
Good because you know where the issue is, bad because it's a custom theme that we cannot help with debug.

But let me not abandon you here.

I'd as first make a copy of the theme (just copy the entire theme to a new folder).
Then dissect it. This means to target particularly JavaScript codes and CSS codes. I'd as first open that theme's functions.php and look out for wp_enqueue_scripts() code.
Comment those you find (comment in PHP means to put a // before the code, so it is grey in your editor).
That will effectively remove those scripts from the theme, and each time you do so, test again.

Of course, you shouldn't remove the one that enqueues your SlickNav codes as that is what you want to test.

I think this should quickly show what's conflicting with your scripts.
Another approach can be to "rebuild" the Custom theme.

The approach is similar but instead of copy the existing theme to a new one, you'd start a fresh theme and start only with index.php and functions.php.
Bit by Bit insert code from the old theme to the new one.
Start as soon as possible with inserting the SlickNav and the very minimal code you need for that to work (which will be a WordPress menu support and some basic init code for the theme)
Again check when the issue comes back.

Please also always keep your browser console open (to show eventual JS errors) and activate WP Debug to show every error eventually thrown (https://codex.wordpress.org/WP_DEBUG).

If everything fails, or if you narrow down the code causing the issue and are lost in how to fix it, please feel free to feedback here, because while I cannot debug your custom theme I can always put in ideas, indications and share documentations or other resources to debug it further and fix it.

Last but not least, I'd like to share a theme that you might be finding useful:
hidden link
This is a extremely minimal theme, that I built in past to work specifically with Toolset and layouts in special.
You can not only use it and adapt as you like - it's free and open source - but you can also consult it and eventually re-use knowledge gained from for your own themes.
Please acknowledge that this is not an OnTheGoSystems product and that just as for other custom themes we cannot support it here in the Forum. But, in all honesty, the theme is so minimal I had to make 2 adjustments since it was created - and those weren't bugs, just adjustments. This means, it's a very stable theme that has almost no conflict potential.

The downside to this theme is it uses Bootstrap 3, and isn't ready for Bootstrap 4 yet (if I find time in future I'll make adjustments in regard).

I do hope this helps and please do not hesitate to ask for any information or help - the worst answer you can get is "we can't help", but we always try to step a bit over that line and at least give recommendations or ideas.

Thank you for continuing with us and Toolset 🙂

[katrina]

I appreciate your helpful advice and tips and I will slowly do all that you recommend. I actually wanted to re-build the site anyway, because it's pieced together with lots of pieces of code and scripts that i don;t fully understand, but seemed to work for a time. My issue is taht I never really got my head around bootstrap at all, and now I know that the grid system seems to be more versatile, but learning something new always takes so much time (that i never seem to have enough of!)

But I will take your advice and do as you suggest, and maybe even try to work with the minimal theme you built to see how it goes. (The theme i built initially, the custom theme on the site, was build from the _underscore theme base, which i understood at the time to be fairly barebones as well.)

Have a good weekend and I will update here as soon as I figure out the issue 🙂

[Beda]

Great, please let me know if you need any help.

_underscore is a minimal theme, but In My Opinion still to bulky 😛

I also tried it in the begin, and ditched it because it's not adequate for real blank slates.
Note, the problem with real blank slates like MinimaX is, that WordPress will (if you install those plugins "theme checker" etc) tell you that "it's all done wrong" because it misses a bulk of files that are not really necessary when you use Toolset or just want "simple".
That's why _underscore is a bit more "bulky" as it comes with all calls and files that WordPress "in theory" expects.
It's not wrong to leave them out though, it's just that such a theme with none of those "expected" files will ever make it thru the Theme Check of WordPress and hence could never be offered as a WordPress them in the official repo, that's all.

It's a good learning tool, still, I learned a lot from _underscore and also Bootstrap WP (bootstrap wp) which is a paid tutorial site, but worth every penny.

Let me know if I can assist with some other details related to Toolset 🙂