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

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!
Matt KWeb DesignerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Robb HillSenior .Net Full Stack DeveloperCommented:
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 DesignerAuthor 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 DeveloperCommented:
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.
Get Blueprints for Increased Customer Retention

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Robb HillSenior .Net Full Stack DeveloperCommented:
Sorry here are the instructions per Kraken's website.

https://support.gitkraken.com/working-with-commits/search/
Robb HillSenior .Net Full Stack DeveloperCommented:
Here is beyond compare proper link...just use the correct OS.
https://www.scootersoftware.com/download.php
Julian HansenCommented:
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.
lenamtlCommented:
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 DesignerAuthor 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.
Julian HansenCommented:
Post an example of a before and after or your markup and we can help you with the selector
Matt KWeb DesignerAuthor 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.
lenamtlCommented:
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 DesignerAuthor 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?
lenamtlCommented:
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 DesignerAuthor 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.
lenamtlCommented:
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 DesignerAuthor 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.
Julian HansenCommented:
@Matt K

It seems you have answered your own question - do you still need any assistance on this one?
Matt KWeb DesignerAuthor 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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Mobile

From novice to tech pro — start learning today.