0

DISCLOSURE: Until this project, I hadn't coded anything since 2000. While I am a quick study, a lot has changed. So, go easy on me?

I'm working on tweaking the UI for my web store. On both the cart page and on the item pages there are events (i.e.: change of quantity and add to favorites) that have to refresh elements of the DOM, like the total price. The issue is that when it refreshes that, there are other elements like the action button or a couple of the DIV containers like the table that the quantities are in get refreshed too.

I'm using CSS and JQuery to tweak the UI since I only have front-end access to editing anything. If I edit things through CSS I'm fine, but any JS work is thrown out. I'm adding classes to existing elements and removing the ones I don't want.

When they are refreshed, the original classes come back and mine are gone.

For example, here's a link to the page: https://billingsley.orderprintnow.com/ProductDetails.aspx?TemplateOrderItemId=0a491fc1-d9c2-44b4-9a16-32ab3ee89b08&PortalId=1f5a8f5f-344e-40da-aa93-387e73c1c82c

the button is pink at first, but if you click on a radio button to change the quantity or click the heart at the top to add/remove from favorites the button will change to the default Bootstrap version. I don't want that to happen.

Any ideas on what to even research to find a workaround? Feels like if I could mark certain elements to be isolated from the refresh life would be easier. Thanks in advance!

Kevin Handy
  • 17
  • 4
  • JS work is thrown out ? I'm confused by this. – kemicofa ghost Nov 24 '18 at 18:28
  • Read up on [Understanding Event Delegation](https://learn.jquery.com/events/event-delegation/) – charlietfl Nov 24 '18 at 18:36
  • Hopefully this info will help: I'm using JQuery to add classes to existing elements then remove the classes I don't want. It seems to be an easy way to apply MDL elements and then style them as opposed to trying to style Bootstrap which is what they used. When parts of the DOM are refreshed, like the button, my classes are gone and the original ones are back. – Kevin Handy Nov 24 '18 at 18:36
  • OK...so that is being done by loading new content using AJAX. You can actually intercept the ajax and do things after each request based on the url request is made to. That's not really trivial but can be made simpler if you know the main page code is using jQuery to make ajax requests – charlietfl Nov 24 '18 at 18:40
  • Edit question to reflect what you are doing. Will remove duplicate link because it only pertains to events, not modifying other things in the html – charlietfl Nov 24 '18 at 18:43
  • Hopefully those edits and the link help. If not, what would you suggest I add to make the question better? Side note: Thank you for the help. I really appreciate it! – Kevin Handy Nov 24 '18 at 19:06

0 Answers0