I am in big trouble at the moment. We have a huge JS library that I need to maintain. It uses internally jQuery 1.6.2.
The client where we installed the library uses jQuery 1.3.4 and the fancybox overlay plugin.
After loading these two, he simply throws in a
jQuery.noConflict();
but without saving his jQuery to a variable (namespacing).
Now I need to access his fancybox, but if I use
$.fancybox({...})
or
jQuery.fancybox({...})
I get in both cases an "is not a method error".
I can duplicate the error on my local machine and it would not appear without the jQuery.noConflict(); statement.
We are also doing a noConflict with our jQuery but we save it to another varieable, i.e.
jq162 = jQuery.noConflict();
The problem is the customer is of course unwilling to change anything of his code.
Is there any way how I can access his jQuery / Fancy after this statement and after loading our 1.6.2?
thanks in advance...
UPDATE
the scripts are loaded in the following order:
// client
jquery 1.4.2
jquery fancybox
<script type="text/javascript"> jQuery.noConflict(); </script>
jQuery 1.2.6 which seems to be necessary for Liferay
// now comes my library
jQuery 1.6.2
my scripts
i know, if we could change step 3 to
<script type="text/javascript"> $jq = jQuery.noConflict(); </script> it would work, but right now that is out of my influence.
in 6. myscripts I need to access the fancybox from 2.
any ideas?
It shouldn't be a problem. You must be loading your scripts after the client's scripts (if you're loading yours first, there shouldn't be any problem, your jquery is namespaced, and the clients version will be in jQuery along with the plugin).
So simply namespace his jQuery object before you load your script:
<script>
jq132 = jQuery;
</script>
<script src="yourScripts"></script>
<script>
jq162 = jQuery.noConflict();
console.log(jq132.fancybox);
</script>
UPDATE
As per your update, what you're trying to do is impossible. There is no longer a reachable reference to that jQuery/plugin instance (unless fancybox accidentally leaked a global reference, which I highly doubt). I don't know fancybox, although it's possible that the functionality isn't instance-specific. So it may be possible to just reattach fancybox to your version of jquery, and it will be able to perform all the necessary things. What I said about the reference however, remains true.
Obviously adding a few characters like you suggested (or other similar ways) would solve the problem. But if that is impossible, then your client will have to realise that. It should be proof enough if you simply ask them to access there own plugin under the same conditions - i.e. without changing code.
They should probably have a long and hard think about their entire project. Having to load three different versions of the same product is a sign that something is very very wrong.
Related
I am attempting to use the 'DataTables' table plug-in for jQuery on a simple Domino XPage.
I have loaded the two required libraries from CDN's...
JQuery: ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
DataTables: cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css
I have also tried loading them from local resources (doesn't help).
I then prepare a basic table on my XPage, and include the necessary Javascript to initialise the table...
$(document).ready(function() {
$('#tableID').DataTable();
} );
When I test the XPage, I continually observe
test.xsp:15 Uncaught TypeError: $(...).DataTable is not a function
I've searched through several forums, and the general consensus is that...
a) I have loaded the libraries in the wrong order (nope!)
b) I have loaded jQuery more than once (how?)
I have many other solutions using Bootstrap and jQuery, and have never run into this issue before. So, I though I might strip the XPage back to bare bones. I got rid of all Dojo elements on the page by adding the following line to the 'xp.properties' file...
xsp.client.script.libraries=none
That actually seemed to work! I no longer observed the error. However, my page no longer looked like it should (for obvious reasons!). I've had to restore the 'xp.properties' file back to its original state, but cannot find out how to avoid the error.
Has anyone successfully used the 'DataTables' jQuery plug-in on an XPage? Any feedback or suggestions would be most appreciated!
Yes I have been doing a load of work on DataTables in XPages so it definitely works! I know your pain though....
The order of your jquery scripts in relation to each other may be okay, however there is a clash with dojo and it's AMD loader, so you have 3 options.
Option 1. Load your jquery scripts before any of the xpages scripts
Option 2. remove the 'amd loader' just before your jquery scripts and then restore it just after
Option 3. modify the javascript of the datatables so it ignores the amd problem
Option 1 : Loading your jQuery scripts first
If you are using resource aggregation, you can use this tip from Sven Hasselbach's blog, in which you use the generic 'headTag' resource tag and it will load first.
http://hasselba.ch/blog/?p=1181
If you want a solution that will work regardless of resource aggregation setting, I have an example on my blog in which you can create a viewRootRenderer which will then allow you to specify that you want a script loaded BEFORE everything else
http://camerongregor.com/2016/09/19/controlling-the-order-of-script-resources-e-g-jquery-with-a-custom-viewrootrenderer/
Option 2. Removing the AMD loader before loading scripts
There is an xsnippet which explains how to remove and then restore the amd loader so that a jquery plugin will load
https://openntf.org/xsnippets.nsf/snippet.xsp?id=hack-to-use-jquery-amd-widgets-and-dojo-together
Sven had already made a similar solution to mine above (viewRootRenderer) in which you can specify which scripts will need the amd loader disabled and it will do this for you, it is available here
http://hasselba.ch/blog/?p=2070
Option 3 : modify javascript of the jquery plugin (datatables)
Mark Roden demonstrated this on his blog. I don't really like doing it but hey it works!
https://xomino.com/category/jquery-in-xpages/
Let me know if any of this works! I hope I'm right, with javascript I never know...
I am using jQuery on my website and Honeybadger to get notified about javascript exceptions. The tool shows me many errors that occurr because the global jQuery and $ variables are overwritten by another jQuery-Version (e.g. from https://ajax.googleapis.com/...)
So I am thinking about using jQuery.noConflict to use another variable for jQuery (e.g. $j). Since I use a few addons for jQuery, this must happen right after all of them are loaded, right?
But does it work all the time or might another jQuery be injected before all my addons are loaded?
As long as all your plugins know to use $j it won't matter when the other jquery is loaded.
Question: Is there a "built-in" or "easy" way to set the jQuery namespace before the jquery.js script include?
Reason I ask is because I'm working on a script that utilizes the jQuery library, and the script is to go on a page that has a library that uses the $ namespace already. Normally I can just use jQuery.noConflict() except the problem is, there is code on the page (which I cannot control) that hooks into mouse movement events and other stuff that basically triggers calls to the 3rd party code over and over the entire time, so often in fact, that more often than not, js errors are happening between the time the jQuery script is loaded and the .noConflict() call is made. I cannot control or change that 3rd party script.
So basically I need the jQuery object to be instantiated without ever taking $ namespace in the first place. Now.. I'm certain that I could reverse engineer jquery.js and make it not do that, but before I go down that road, I figured surely others have come across this situation.. but I could find no official documentation on jQuery for setting this before the script include; only after. But I figured surely others have come across a problem like this anyways, but I can't seem to find any existing questions detailing this (it could be that I just suck at googling).
Can anybody point me in the right direction?
Edit:
To be clear, this is basically the order in which I need things to happen:
<script src='thirdpartyscript.js'></script>
<script type='text/javascript'>
jQuery.noConflict();
</script>
<script src='jquery.js'></script>
I obviously can't call jQuery.noConflict() before the jquery.js script include, since the jQuery object/method doesn't exist yet.
But I can't call it after the script include, because between time it takes for jquery.js to fully execute and the noConflict call to be made, thirdpartyscript is already throwing errors because jquery took control of $, even for just that one single microsecond or w/e.
So.. I know I can edit jquery.js to never use $ namespace, but I was wondering if there was a built-in way or otherwise easy hack to do it before the jquery.js script include, because a) I don't want to hack jquery.js itself, because I'd like to keep pointing to code.jquery.com instead of maintaining my own instance, b) doing so involves actually figuring out what to change (which in fairness I did a quick eyeballing and it doesn't look like much. mostly my caveat is with point "a")
wont work. The object "jQuery" is not available if you include the lib later. You can create an smart "Watcher" for that.
<script src='thirdpartyscript.js'></script>
<script type='text/javascript'>
// Start an interval
var watch = setInterval(function() {
// Check if jQuery available
if(typeof(jQuery) != 'undefined') {
// Stop the interval
clearInterval(watch);
jQuery.noConflict();
}
}, 500);
</script>
<script src='jquery.js'></script>
I'm building a service that allows people to put a javascript code I gave them to their site.
The javascript code is based on jQuery.
My question is how to do this to be safe and optimized, cause I don't want to break certain users website.
The thing I'm looking for so far( you can update if you think I need to face other problems):
what happens when the user already has jquery loaded on their page? should I load my jquery library using different namespace or should I use his jquery library.
in case I can use his jquery library, I think I'll need to check to see if the versions corespond, but again is this safe?
in case I want to use his jquery library, how do I check if he has jquery loaded and if he has the right version
this is related to 3. what happen if he changes his jquery library that doesn't correspond with the library I think it will be, leading to a bad result.
Looking for your answers.
Thanks
Don't depend on the page's jQuery or try to use it. This will just turn into a support nightmare. You can't even be sure that a version is accurate, as the target page can alter its version of jQuery.
The best approach is for your code to create and load an iFrame. This gives you complete control over the iFrame's jQuery, CSS, etc. With vastly reduced chances of conflict.
If the iFrame approach is not possible for some reason, Use noConflict to minimize the chance of conflicting jQuery versions.
Something like this:
<script type="text/javascript">
if ($ || jQuery) {
var PagesLibrary = $;
var PagesjQuery = jQuery;
</script>
<!-- load your jQuery -->
<script type="text/javascript" src="http://example.com/jquery-1.6.2.js"></script>
<script type="text/javascript">
var my_jQuery = $.noConflict (true);
if (PagesjQuery) {
$ = PagesLibrary;
jQuery = PagesjQuery;
}
</script>
Then instead of $('#selector').function();,
Use: my_jQuery('#selector').function();.
Without the context of actually what your injected code does, it's hard to say. If you're writing a general bit of functionality, you probably want to just implement it as a jQuery plugin, specify what version you target, and then leave it to your users to decide how to include it, etc.
However, it sounds more like you're writing a service of some kind. In that case, I recommend the following course:
Place all the code you depend on (jQuery, other libraries, your code, etc) in an anonymous function wrapper, and have the snippet you have people just inject a script tag pointing to your js file. This is most likely to give you reliable results. If you require special information, like an ID, have the snippet just before the injection code set those values in a global variable, or have extra code that runs just after the injection to call a function of yours with the data. Look at how Google Analytics accomplishes this for reference. Either way, you'll need to affect the global scope.
I know that may not be what you wanted to hear. You could always create an elaborate jQuery detection and injection scheme, but you'd run into exactly the problems you mention (like version collisions etc). The safe way to go is to combine all the code you require along with your own and provide it all as one file which only makes internal references.
Hope this helps!
I am using jQuery UI and a few other JS libs which in total make for quite a chunk of JS (even minified and combined). My idea is to not include a script tag in the page but to stub out all functions that I defined as well as the $ sign for jQuery so that my inline JS on the page can still call them but will hit the stub. The stub will then load the .js file and actually call the function. The question now is:
How can I redirect all function calls on the window object/global object to a custom function of mine?
I am not used to dynamic languages so a little advice on how to do this in JS will be appreciated.
As stated previously ... this is likely an exercise in futility. Unless you are a researcher and are being paid to do this (and only this), I'd spend my time just working on my actual product and/or refactoring so that the page requires fewer disparate JS libs (for example. use jquery only, rather than jquery + yui)
edit, though, I suppose in the interest of actually answering the question. You can easily replace any function by simply setting it in javascript. For example ...
$ = function(searchString) {
// if this method is called
// and jquery hasn't been loaded yet
// load jquery (which will overwrite all of your local jquery functions with its own
};
The method to lazy load .js files is well documented throughout the web, for example here:
http://ajaxpatterns.org/On-Demand_Javascript
Well the root of your problem is the usage of library dependent in-line JS. We had an old legacy site that had a bunch of in-line JS in the Smarty templates. I ended up modding Smarty so that I could capture the JS calls and then output them all in the footer. Looked something like this
<!-- mySubContent.inc.html -->
<div id="theTabs">
<ul><li><!--
...
--></li></ul>
<div id="tab1"><!--
...
--></div>
</div>
{capture_js}
$("#theTabs").tabs();
{/capture_js}
<!-- footer.inc.html -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
{render_captured_js}
</script>
</body>
</html>
Anyway, maybe that'll give you some idea about how to tackle your in-line JS problem if you can't refactor the codebase right now. Oh, and read this - http://developer.yahoo.net/blog/archives/2007/07/high_performanc_5.html .