How to avoid Conflicts in Sitefinity MVC WidgetsCancelThe title field is required!

I'm having some conflicts when applying styles and Jquery/javascript to Different Widgets. I want each widget to have its own Style and its Own Jquery and Javascrip functions.
What's happening is that I'm applying in one widget preventDefault to all its textboxes, and the other MVC widgets' textboxes get affected too. I'm also applying different css to the widgets and there are conflicts too.

Maybe the good practice is to use the same css to all widgets. but still when I want to apply something like preventDefault to all its textboxes, all my widgets get affected.
How can I avoid this?

It is generally recommended to structure your code and reuse it where possible. This also applies to scripts and styles. You can reference the main scripts or styles in the page template or layout used for the widgets. If you want to have different behavior in each of them, you can wrap the whole widget template/view in a container element, for example a div element and style this element and its children. You can base the styles on different selectors that you will be able to reuse. The same applies to the javscript - if you want particular script to apply only to a specific widgets, modify your selectors and logic to match only elements in the widget container.
For instance, this way you can select all textboxes in that particular widget (widget container element) and set on logic only to them.

Regards,
Nikola Zagorchev
Telerik

Do you want to have your say in the Sitefinity development roadmap? Do
you want to know when a feature you requested is added or when a bug
fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items

Webinars

Tools

Progress, Telerik, Sitefinity and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.