Competing JQuery Versions - Unknown Loadorder and JQuery.noConflict() - javascript

I have a question for you about jQuery.noConflict.
First of all - I did some research on what
jQuery.noConflict(true)
is, my question is related to this closely. So far I have found no answer that I was able to apply to my case, so if the answer is obvious and slipped my mind I apologize in advance.
The problem:
I am currently trying to solve a problem for a very large JS application. The JS application runs on a SAMSUNG browser (based on Orsay), which in turn runs on specific SAMSUNG displays.
To use display functions it is required to include:
<!-- TODO : Common API -->
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
<script type='text/javascript' src='$MANAGER_WIDGET/Common/af/2.0.0/loader.js'></script>
<script type='text/javascript' src='$MANAGER_WIDGET/Common/API/Plugin.js'></script>
Also to use Deferred objects within the code jQuery 1.9.1 is included:
<script type='text/javascript' src='app/javascript/jquery-1.9.1.js' ></script>
My problem arises from the fact, that the SAMSUNG APIs apparently load whatever it is they are loading in the display's backend, however one of the things they load is their own jQuery version, which is 1.4.2.
The situation is such that I cannot say which version will be loaded at what point. I can start up the display five times having done no changes to the code and will get two times 1.4.2 and three times 1.9.1 or once 1.4.2 and four times 1.9.1 or any other possible order. I suspect this being due to the display's API able to run multithreading, so that the JS application and the API run independently from one another.
So I took a look at the noConflict method, however am unsure how to go about this problem using it.
As said, the application is large. It uses jQuery in various places. So doing something like
jQuery1_9_1 = $.noConflict(true);
after loading our jQuery version is rather unfeasible, since this will cost a large amount of time to fix.
However so far I have found no way to reliably unbind version 1.4.2 from $, because I do not load it, but the display's API does and it is not clear as to when it is loaded.
I hope this question is not redundant and someone has an idea how to go about it.

Related

Can I degrade Google Place Library to a particular version?

My project is using both Google Map JavaScript API and Place Library based on React. But since google upgraded it to v3.39, I met an issue in IE 10. (Some clients are still using IE 10!) The latest version 3.39 doesn't support IE 10, so I tried to degrade it to 3.38 in different ways but none of them working:
Pass 'v=3.38' when load Place in header: <script src="https://maps.googleapis.com/maps/api/js?v=3.38&key=mykey&libraries=places"></script> -->. It still loaded v3.39.
Manually Load v3.38 Map in header:
<!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.38
&key=mykey&callback=initMap"
async defer></script>
<script src="https://maps.googleapis.com/maps/api/js?key=mykey&libraries=places"></script> -->. The map can be rendered, but address autocomplete will not even show up.
Manually load a 3.38 version when render a map: This method partly works. But browser will display an error said: You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.
Please give any suggestion on my scenario. Thanks so much!

Some Problems About Jquery Libraries

Im up with a question..
I have my main file, the index.php, and inside of index im importing jquery 2.0.3.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
The main problem is because i have other file in the server, it is called website.php, and inside i have imported jquery 1.8.3.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
So, if i take off the second librarie, the all site works correctly, but one plugin doesn't work, but if i take out the second librarie, the whole site works on but the other plugin dont!
Sorry for bad english, but the problem is because of the jquery conflict..
I already made some research, and use the jQuery.noConflict(), but still doesn't work!
Thanks in advance!
First the difference between jQuery 1 and 2 is the compatibility with older versions of Internet Explorer. So the best guess is, to use a CURRENT jQuery v1 version (1.11 at the moment).
However jQuery has changed a lot in version 1.9 which is probably the reason your old plugin fails if you remove 1.8. The only viable solution would be to update that plugin or change to another one if yours is not available anymore.
It is NEVER a good idea to use two versions of the same library in one project.
Use Jquery migrate plugin and migrate to 2.0.3 and then you can remove jquery 1.8.3.
Heres the link for migration
its very simple and easy

Which JQuery version is suitable for all jquery functions?

I have an issue on using JQuery versions:
Which JQuery version is suitable for all functions of jquery.
In my website designing:
I use the following js version for Contact Form validation:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">
</script>
I use the following js version for page smooth scroll:
<script type="text/javascript" src="script/jquery-2.1.1.min.js"></script>
If I use both: The contact form is works, scrolling not works. What shall I do for this?
You just need one of your script statements as they both doing the same thing.
The difference is just if you want to load the script from your server or the google server.
Both versions are doing what you want. I would suggest to use the latest Version. If you want to support older browser (like IE8) you have to use 1.x, otherwise use 2.x
I thank to Stack Overflow Team and all of you first,
I found a solution to solve the issue.
Jquery's .noConflict();
<script type="text/javascript" src="script/jquery-2.1.1.min.js"></script>
<script>
var jq211 = jQuery.noConflict();
</script>
<script type="text/javascript" src="script/jquery-2.0.min.js"></script>
<script>
var jq20 = jQuery.noConflict();
</script>
I followed the function. Now no issues in using the versions of Jquery.
jQuery's APIs change over time, and jQuery is not 100% back compatible. I recommend trying a recent version of jQuery (2.1.x, or 1.11.x if you need to support old browsers) along with jQuery Migrate, which brings some old jQuery features back for migration purposes. If that still doesn't work, update your jQuery plugins and ensure that your third and first party code are both using compatible versions of jQuery.
If you can't fix it otherwise, you should look into using the .noConflict() method. If you do that, you can use several different versions of jQuery in one page.
Please refer to http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page for more info :)

Having trouble with Phonegap (Android) and capturing click with jQuery

I'm trying to port an existing mobile web app to Phonegap, but I had difficulty handling a click event with jQuery (it worked in my browser, but not in the emulator). I've tried everything, but here is the general gist of what I'm trying to do.
HTML:
...
<span id="footerclick">Test</span>
...
<script type='text/javascript' src='alert.js'></script>
<script type='text/javascript' src='phonegap.js'></script>
<script type='text/javascript' src='js/index.js'></script>
<script type='text/javascript'>
app.initialize();
</script>
alert.js:
$("#footerclick").click(function(){
alert("I can't get this to show up");
});
That's pretty much it and I cannot get the alert to show up, I've tried wrapping it in $(document).ready(){} and a device listener. If I put something like onclick="alert('Hello')" as an attribute of #footerclick, that works also.
I think I just don't understand how Phonegap works with Javascript, but I've read the documentation several times and I don't get it. Please help, thank you.
I've found the source of the problem thanks to #tomysshadow. It turns out that the emulator was blocking the loading of scripts from external domains (in particular, jQuery) and so the .click listener obviously didn't work. My temporary fix is to download and use a local version of jQuery, but I may update this answer when I figure out how to change the config file to allow these inclusions.

How do I prioritize which part of a page should load 1st?

Okay guys I have a website that has a lights off for videos source code: http://www.megaptery.com/allofthelights/
An organic tabs for videos using Jquery
and a 2buttons which onclick it changes the CSS of the whole page you know it's kinda like a theme for the page
Here is an example of one of my page:
http://myanimesekai.com/Watch/Noucome-Episode-9
okay all of them works perfectly fine on my laptop all of them IE, Mozilla and the OLD Google Chrome.
But Then I tried it on my Brothers Laptop BUT his Google Chrome is the latest Google Chrome the Google Chrome where the scrollbar changed. The problem is that the Lights off feature is malfunctioning it doesn't turn off the video only. But the Organic Tabs and The 2buttons works perfectly fine. So I tried it on an internet Cafe and this is where I was really frustrated their Google Chrome is also updated and then both 3 of them were malfunctioning then after a while I tried them on Mozilla and all of them worked perfectly fine and so I have an Idea maybe it's becaused it took time for the Jquery and my Javascript to load which is why all 3 of them were malfunctioning.
so my question is is there a way for me to make my page load the jquery and javascript 1st? or am I missing something that the new Google Chrome requires? this is really frustrating me
oh BTW the 2buttons that changes the CSS are the B and M squares Below the facebook page
There are so many errors on this page (http://myanimesekai.com/Watch/Noucome-Episode-9) that any one error can cause the page not to work.
You need to clean up your code quite a bit:
<script src="http://myanimesekai.com/javascript.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://myanimesekai.com/organictabs.jquery.js"></script>
You are calling jQuery in your javascript.js file. The jQuery library has not been declared before your scripts. You need to restructure your code to (you only need one version of jQuery):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://myanimesekai.com/javascript.js"></script>
<script src="http://myanimesekai.com/organictabs.jquery.js"></script>
This will fix some errors. I suggest that you look at the console for further errors and fix them.

Categories

Resources