Jquery Mobile adding dozens of corner classes to random, non-JQM divs

Matt K
Matt K used Ask the Experts™
on
JQuery Mobile 1.4.5 is randomly adding .ui-corner-top or .ui-corner-bottom literally all over the place, and for the life of me I can't figure out why.

Here's a screenshot of the generated code showing these classes added like crazy all over the place, with little rhyme or reason. This seems to have just started happening.

https://postimg.cc/QHPJJNz5

Note the highlighted lines. Each of these elements has corner classes added in addition to the one other (non-JQM-related) class. This is just plain weird.

I have some custom JS code in its own separate file, but neither of these corner classes are mentioned there, so it seems to somehow be coming from JQM itself. I'm not enough of a JS whiz to determine why these are being added, but it doesn't really make sense out of the box... none of the affected divs have any JQM-related classes added by me. Why would JQM add these?

I previously used JQM 1.2.1 and have never seen the like of this.

How can I stop this madness? I'd love to add a link for reference but I'm concerned about exposing my client's code (or more accurately my own ignorance to said client somehow – I like to think they think I know everything).

Thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Robb HillSenior .Net Full Stack Developer

Commented:
This is why you can make a question private:)

With that being said you did indicate that you recently made changes.
Can you roll back your code and do a compare on the versions when it worked versus now.

Hopefully  you have some version control and can see what change was made that caused this behavior.

Then perhaps you can send a segment of code if needed to further troubleshoot.
Matt KWeb Designer

Author

Commented:
Thanks Robb - indeed, I did make this private... I'm just a bit paranoid. I work at a place where we are literally expected to (at least pretend to) know absolutely everything. Unfortunately, as an artist thrust into the role of developer, I find myself – on occasion – completely lost. I've also learned a lot and really like this stuff...

The only changes I've made recently are to my custom CSS, not to anything that would change things programmatically.

I do use git(kraken), but the act of rolling things back is still a little beyond my ken. I can branch, commit, push and merge, but after that things get fuzzy (and terrifying). Considering that this may have been going on longer than I know (for all the places these classes are added, there's only one or two spots where the results are visible) I'm not sure if it would reveal anything.

Am I to infer that it's perfectly fine to share a direct link here? I'm sure that would be the quickest and easiest way to figure things out...
Robb HillSenior .Net Full Stack Developer

Commented:
I always santize my questions from anything company specific.  So if you think that is in your code you might want to do that.

I have not used Kraken....but you should be able to view a commiit.

Here is the instructions.

I would look at what was committed in the code area around your JS or jquery ui..etc and see what changed.  You can view a commit with out republishing the change.  That is the beauty of version control.

If it makes you feel better download a tool like beyond compare.  Its free.

you can take an older version of a file and compare it to a newer version without being inside your repo...its not necessary but if it makes you feel better by all means do it.

Its a great tool to have in your toolbox either way.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Robb HillSenior .Net Full Stack Developer

Commented:
Sorry here are the instructions per Kraken's website.

https://support.gitkraken.com/working-with-commits/search/
Robb HillSenior .Net Full Stack Developer

Commented:
Here is beyond compare proper link...just use the correct OS.
https://www.scootersoftware.com/download.php
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Are those classes in the underlying code?
If you do a view source on the page are they there?

If not then they are being added after the fact by a JavaScript function.

Try removing your JavaScript files one by one until the problem goes away then we can look at what that particular script is doing.

It would help if we had more than a screenshot to work on though.
Hi,
This was hardcoded and was removed on v 1.5 and this give you the ability to change it
https://jquerymobile.com/upgrade-guide/1.5/#widget
(#7053) jQuery UI used to hardcode classes like .ui-corner-all in widgets. We removed the hardcoding and added the ability to customize the style-related classes based on the functional classes

So if you can just upgrade to v 1.5 that will be easier to fix.
Matt KWeb Designer

Author

Commented:
Thanks for the replies, all. Apologies for the delay in jumping back in... this is a project I can only work on when everything else isn't on fire... which explains why I didn't remember making this change (It was late last year, it turns out).

I figured this out, and it's kind of embarrassing that I didn't do so without involving three experts. The classes were added programmatically by me, of course, I'm my custom JS.

        $(".routesections div:first-child").each(function () {
            $(this).addClass('ui-corner-top');
        });

Open in new window


This did the job I wanted, and then some, adding rounded top corners to every single little div inside .routesections that is a first child of its parent. I only want this to happen to one div (the top of a collapsible that is the first of a group – not a collapsible-set but a group of individual collapsibles styled to look like a set).

Need to rethink my selectors here. (My first few tries to remedy this have failed... I might have to start a new, equally embarrassing question).

This is 101 stuff, darn it all. The first thing I should have done was comment out my custom JS, because of course that's going to be where the problem is.

Thanks again for all the replies – all of it was helpful.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Post an example of a before and after or your markup and we can help you with the selector
Matt KWeb Designer

Author

Commented:
Thanks, Julian - I was actually able to suss this out fairly quickly. I needed to get rid of the .each function and simply use a child selector:

       
 $(".routesections>div:first-child").addClass('ui-corner-top');

Open in new window


This affected only the element I was aiming for and not all the others nested inside.
Hi,

The main class is hardcoded for each inside jQuery Mobile and you are using an old version that will be a lot easier just to update to v 1.5
Once jQuery Mobile updated to v 1.5 you will be able to call the class on demand which is what you want...
Matt KWeb Designer

Author

Commented:
How much of a PITA is the upgrade from 1.4.5 to 1.5? I know the upgrade from 1.2.1 to 1.4.5 was whole different world with all new classes and methods, necessitating a big overhaul. Is this the same deal?
Hi,

Check the upgrade guide  https://jquerymobile.com/upgrade-guide/1.5/
and you have all the changes listed on the page

It's always depending of your code but I think this is worth the change...
Matt KWeb Designer

Author

Commented:
I initially went with 1.2.1 back in 2013 because this website's users – often elderly, low income – lagged far behind in terms of tech adoption, and I needed solid support of ancient versions of IE, which 1.2.1 had.

Certainly due for an upgrade, and now it's hard to find functional devices that don't force you to stay relatively up to date (please correct me if I'm wrong, that's my interpretation). I've been working with 1.4.5 because – honestly – that was the latest version for which Themeroller was available, and it offered the browser support I needed. When I first started, it didn't look like 1.5 was out of alpha, and that seems to still be the case. Has 1.5 officially been released? I'm having trouble finding much info on it.

I'm seeing now that the themeroller for 1.5 is merged with that of JQUI, is that right?

At a glance, it looks like my current user base would be ready for 1.5 (any unsupported browsers constitute <2% of the total user base) and most of what works with 1.4.5 still will work in 1.5, so the switch might not be too horrifying.

1.2.1 -> 1.4.5 isn't exactly a turnkey operation, that's for sure.
I'm not a fan of jQuery Mobile specially because of the UI, I'm a Bootstrap fan...

I have not seen your website but it probably look old...

So depending of your code, and the website purpose you may also want to consider switching to Bootstrap https://getbootstrap.com/
Bootstrap is a lot more popular and it is much better to my opinion with more features, better responsive and performance.

If the website is could be transformed into a mobile apps you may think switching to React Native and create a native apps https://facebook.github.io/react-native/
Matt KWeb Designer

Author

Commented:
Easy there, friend...  I don't speculate about the quality of your work. ;)

To be fair, the current website is old, which is partly the reason for the update. But a good eye for color and type, a design background and judicious use of custom CSS all go a long way, regardless of your starting point. By now I've gotten pretty familiar with JQM. The download builder allows me to avoid loading features I won't use. In the end I'll have a site that pleases the client, does its job well and loads quickly across platforms.

I got a little stuck on something rather simple – it can happen to the best of us. I figured that's why I signed up here, so I formulated and posted a question to try and jog my memory. I find that sometimes just this act alone can precipitate a solution, as was the case here.

I agree that Bootstrap is lovely, and I actually know the grid system quite well. Still, the idea of tearing this apart and starting over from scratch w/ Bootstrap is neither especially appealing nor realistic at this juncture.

All that said, your suggestions – while arguably all fair points – didn't address any of my actual questions.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
@Matt K

It seems you have answered your own question - do you still need any assistance on this one?
Web Designer
Commented:
Sorry, Julian. I think we got off in the weeds on this one.  I'm good. Looks like I should have clicked "Found my own solution" above with this:

Thanks, Julian - I was actually able to suss this out fairly quickly. I needed to get rid of the .each function and simply use a child selector:

       
 $(".routesections>div:first-child").addClass('ui-corner-top');

Open in new window



This affected only the element I was aiming for and not all the others nested inside.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial