I have a registration form working on jquery-3.3.1.min.js, so i want to include virtual keyboard on this form, virtual keyboard works on jquery-1.11.0.min.js, but both files conflict with each other, when i include
<script type="text/javascript" src="templates/assets/scripts/jquery.min.js"></script>
virtual keyboard doesn't works
and if i include
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
registration form doesn't work, how can i solve this problem?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var jQuery1 = jQuery
</script>
<script type="text/javascript" src="templates/assets/scripts/jquery.min.js">
give jquery-1.11.0 another variable name，now you can use jQuery1 for virtual keyboard，and jQuery or $ for others
Related
I need to use two different versions of jQuery on my website. Because i need to use one plugin that is using different version of jQuery than my site. I tried to use noConflict and i even made that plugin to work, but my site didnt work properly. Any idea?
<script src="comment/frontend/view/default/javascript/jquery.min.js">
</script>
<script src="comment/frontend/view/default/javascript/jquery-ui/jquery-
ui.min.js"></script>
<script src="comment/3rdparty/read_more/read_more.js"></script>
<script src="comment/3rdparty/filer/filer.js"></script>
<script src="comment/3rdparty/timeago/timeago.js"></script>
<script src="comment/frontend/view/default/javascript/common.js"></script>
<script src="comment/3rdparty/colorbox/jquery.colorbox-min.js"></script>
<script src="comment/3rdparty/highlight/highlight.pack.js"></script>
These last two are using $
<script src="js/core.min.js"></script>
<script src="js/script.js"></script>
I have loaded two jQuery versions on my page;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>var jq = jQuery.noConflict();</script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
I am trying to use the Autocomplete plugin from https://github.com/devbridge/jQuery-Autocomplete/ (it doesn't work with 1.4.2) so I have to add 1.9.1 jQuery version.
I cannot remove 1.4.2 at all, as removing so breaks my existing code.
I have tried changing the order of the libraries but no luck.
FYI jq("#elem").hide(); etc. works and other jQuery native stuff. but when I use it to bind autocomplete plugin, it fails driving me crazy;
binding as jq('#searchbox').autocomplete(); the error I see in console is
TypeError: jq(...).autocomplete is not a function
PS: I have also tried <script>var jq = jQuery.noConflict(true);</script> without success.
Thank you for any help!
Does this work you. I got no error on this.
jq('#autocomplete').autocomplete({});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.27/jquery.autocomplete.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jq = $.noConflict(true);
</script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<input type="text" name="country" id="autocomplete"/> no error
When I visit the page via mobile device (phone) it shows the menu to choose from instead I want the page to load the index right away.
(If you will check it via phone you will get what I mean)
Link: www.eufrazia.sk/sitex/
I would like the page to be loaded here "www.eufrazia.sk/sitex/home" when visited via phone
I'm not sure if below code may help to understand, but I think this code has something to do with it.
(function($){
window.FJSCore =
{
local:location.protocol == "file:",
basepath:location.pathname.slice(0, location.pathname.lastIndexOf('/') + 1),
defState:'',
defStateMobileText:'Úvod',
emptyNavigationText:'-- Sekcie --',
ajaxFolder:"/ajax/",
indexFile:'index.html',
modules:{},
mobileFolowLinks:false,
}
It doesn't look like media queries because the menu only appears when navigating with a Phone's user-agent and not when changing the browser window size.
I suggest trying to remove the device.js file from your <head> element in the index file and then see whether any errors are thrown. This should resolve the issue.
<script type="text/javascript" src="js/jquery.js"></script>
<!-- REMOVE THIS -->
<script type="text/javascript" src="js/device.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/core.js"></script><script src="js/history.js?redirect=true&basepath=/sitex/" type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script><script type="text/javascript" src="js/jquery.easing.js"></script><script type="text/javascript" src="js/TMForm.js"></script><script type="text/javascript" src="js/randomLettersGenerator.js"></script><script type="text/javascript" src="js/spin.min.js"></script><style type="text/css"></style><script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script><script type="text/javascript" src="js/tmMultimediaGallery.js"></script>
Hope this helps
I am using some jquery files for auto complete and datetime picker control but 3 files among them are conflicting:
Two files for autocomplete are
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
One file for Calender datetime picker is:
<script src="../assets/js/jquery-1.8.3.min.js"></script>
These 3 files are confilicting when i comment date time picker file autocomplete works and if I uncomment it autocomplete stops.
If you want to include both the js files you can..
<!-- load jQuery 1_8_3 -->
<script src="../assets/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var jQuery_1_8_3 = $.noConflict(true);
</script>
<!-- load jQuery 1.4.2 -->
<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
<script type="text/javascript">
var jQuery_1_4_2= $.noConflict(true);
</script>
Its better to avoid multiple versions in the page..and its better to use appropriate jquery-UI Version with the jquery version
If you try only these, i think you are good to go:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js">
</script>
No need to add other versions of jquery.
That's probably because you are including jQuery 2 times. An old version and a newer version.
I would recommend you try and use the most recent versions of both jQuery and jQuery UI and check if everything still works.
To get lightbox functionality in my page,i have added js files in master page.
after some time,i needed to use jquery in child page.so i have added jquery reference in child page.
When i added jquery reference in child page,lightbox stops working.
How to resolve this problem?
when i remove jquery reference from child page,lightbox works fine.
Is this Jquery conflict problem??
FYI i have shown my js files here
Master Page Javascript files :
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
Child page Javascript files :
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"> </script>
<script language="javascript" type="text/javascript">
var $j = jQuery.noConflict(true);
function showClose(obj) {
obj.style.display = 'none';
$j("#spnFullInfo").slideDown(1500);
return false;
}
</script>
try first only lightbox functionality. Keep only jquery.js and lightbox.js remove other .js files. you might have conflict with prototype or scriptaculuos.
Just put your jquery reference in master page instead of child.
Hope this helps..