Link to home
Start Free TrialLog in
Avatar of Temody Mas
Temody Mas

asked on

How to avoid Conflict With two library

Hi, I in my project I put Jquery Wizard steps library and Dropify Library and When I put two jquery link it makes Conflict and one of them work Correctly now I want to prevent this conflict
When I remove jquery wizard step dropify worked correctly 
<script src="~/assets/js/jQuery-3.5.1.js"></script>
<script src="~/assets/plugins/jquery-steps/jquery.steps.min.js"></script>
<script src="~/assets/plugins/dropify/js/dropify.min.js"></script>
<script src="~/assets/js/jquery.form-upload.init.js"></script>

Open in new window


Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Try this
(From here https://api.jquery.com/jquery.noconflict/);
<script src="~/assets/plugins/jquery-steps/jquery.steps.min.js"></script>
<script src="~/assets/plugins/dropify/js/dropify.min.js"></script>
<script src="~/assets/js/jquery.form-upload.init.js"></script>
<script src="~/assets/js/jQuery-3.5.1.js"></script>
<script>
jQuery.noConflict();
jQuery((function( $ ) {
 // jQuery code here using $ as per normal
});

// Code that uses other library's $ can follow here.
</script>

Open in new window

If you need to use the library functions inside a jQuery block then do this
<script src="~/assets/plugins/jquery-steps/jquery.steps.min.js"></script>
<script src="~/assets/plugins/dropify/js/dropify.min.js"></script>
<script src="~/assets/js/jquery.form-upload.init.js"></script>
<script src="~/assets/js/jQuery-3.5.1.js"></script>
<script>
jQuery.noConflict();
jQuery((function( jq$ ) {
 // use jq$ for jQuery functions
 // If other libraries are using $ then there will no longer be a conflict
 // providing you use jq$ for jQuery
 // Note: you can change jq$ to anything convenient (providing it does not
 // clash with anything else in scope)
 jq$('.class').click( ... );

 // Use other library code here as required
});
</script>

Open in new window


Avatar of Temody Mas
Temody Mas

ASKER

Julian Hansen but this prevent conflict with jquery codes not library 
What are the error messages you get?
but this prevent conflict with jquery codes not library     
                           
You will need to show us the code - it is not clear what you are asking.

How is the conflict showing - are you getting an error or is it that code does not work?
Can you provide links to the home pages for the libraries we are using - so we can at least try to replicate the problem?

The more information you provide the more we can help you.
Hi,
You need to check if all plugins are compatible with jQuery-3.5.1.js
If not you can try to update with the latest version of each plugin.

If there are not compatible and no update
You can tried https://jquery.com/upgrade-guide/3.0/#jquery-migrate-plugin
https://github.com/jquery/jquery-migrate

Or you can downgrade and use jQuery v2 instead of v3
Check in browser console for errors: Chrome right-click / inspect
Michel Plungjan No error message
when i remove jquery steps script from html code and upload image Image uploaded successfully like images below
User generated imageUser generated image
and when I put Jquery steps link library and uploaded image it still for this preview and Image Doesn't Preview here
User generated image

We need to see errors. Repeat the process but open your console (F12), select the console tab. Now do your test and let us know what errors you are seeing.

Julian Hansen  this is my console No Errors User generated image
ASKER CERTIFIED SOLUTION
Avatar of Temody Mas
Temody Mas

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial