I'm trying to throw together a single js file that includes the functionality of jquery's .load(), as well as the methods, in an effort to link only to a single js file, rather than both jquery and the load methods.
Instead of
<script src="jquery.min.js" type="text/javascript"></script>
<script src="load.js" type="text/javascript"></script>
this
<script src="load_including-necessary-js-for-load-methods.js" type="text/javascript"></script>
So basically I'm trying to extract only the necessary code from within jquery that makes .load() work and include it in the file with the load methods.
Suggest, instead, that you use something along the lines of html5boilerplate's jQuery call:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
Accessing it via the CDN ensures high-speed delivery of the jQuery code that is used by thousands of other pages/users on a constant basis,
... which also means that that code is most likely cached in your users' browsers ...
... which equates to highly-tested code that you're really not "paying for" in terms of overall load time. The second line, of course, allows you to offer a copy of it from your own site, in case the CDN has a hiccup, or you need to be testing offline (in which case, AJAX is borked for you any way you look at it, anyhow...).
OTHERWISE, check out the instructions on jQuery's Github: https://github.com/jquery/jquery#how-to-build-your-own-jquery and read up on building your own... they have instructions, there for excluding modules that you don't want from the library.
After that, you'll probably want to use some kind of bundling script to bundle all your JS (your custom jQuery build + your scripts) together, if you want to reduce everything to one call.
i don't know your reason why you cannot use all jquery library, but you still can write own js script and use onload or document.load, window.load its you reduce your code. If you need jQuery load() ... read and try to first comment of your question or use all small(own) jQuery library than waste of your time with this.
Related
I am working on a widget that is embedded on a customers website, it loads a jquery file. however we need to detect if jquery is already loaded on a customers page to avoid conflicts and then not load our own jquery.
As a sidenote the widget works on all versions of jquery. The code being used is...
if (typeof jQuery == 'undefined') {
console.log("NOT LOADED");
scripts.push("https://d33f10u0pfpplc.cloudfront.net/perun/v1/js/widget/betaV2/jquery-1.8.2-min.js");
}
This works when tested locally, however when it was rolled out on some sites we got a ...
type error $tabs(...) is not a function
it seems that the jquery on the host sites must not have been fully loaded is my initial theory (could be wrong)
is there a way to improve the jquery detection used above? or if you know why it is not working i am happy to learn. thanks
First of all, $tabs is not a standard jQuery function. If it's part of a plugin, you need to make sure that's included as well.
Also make sure that jQuery isn't being run in noConflicts mode. In that case, jQuery may be defined, but not $.
Do you check the loading state of the browser? Javascript is typically executed at the time, when the browser is parsing it. Jquery is a bigger file and sometimes it will execute upcoming code first.
To solve it, verify that your own code is executed after dom is loaded:
$(function() {
// your code here
});
Alternative 2 is to check what
scripts.push()
exactly does. It needs to be asynchronous, just only add the file request does not ensure the file is loaded and parsed. Maybe this is your problem.
Using jQuery in widgets isn't optimal. Is it possible to write it in native js?
It's probably not help, but in example at http://www.initializr.com/
jQuery checked like
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
Please check your jquery version and your version not have a $tabs jquery function.
Then only you got this type error
$tabs(...) is not a function.
Otherwise try new version of jquery_ui file.
I have created an external JS file, this JS file contains some methodes that uses JQuery, i can't seem to find a way to refernece the JQuery file on JS file and user it there. Any help would be appreciated
Two things are important to reach your goal:
Include the javascript files. Include both files in your HTML via a script-tag, starting with jQuery to make sure it is loaded when used by your javascript.
Ensure jQuery. This is something way to less people tell you. If you write JS and jQuery for a long time, sooner or later you'll encounter a case where something is overwriting the $-variable. The $-variable is used by jQuery and everyone coding with it because of the obvious fact that it's just one char. However, jQuery doesn't have any "rights" or something for the $-variable, so basically anything or anyone could overwrite it. So I recommend your own javascript file looks like this:
(function($)
{
// your coding starts here.
})(jQuery);
You probably already encountered this when dissecting jQuery plugins from people who know what they're doing. It creates an anonymous function that takes one parameter which will be know by $ inside the function. The function is then immediately called and hands over the jQuery function. This way you can be sure that, whatever happens outside this function, inside of it $ stands for jQuery.
In your HTML file, include the jQuery file first and then your file:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="myfile.js"></script>
As long as you include the jQuery core in your HTML, the global jQuery object is available in any of your scripts. Is there a specific problem you're having?
You must write a piece of script (plain JS) that checks for the presence of jQuery, if not, it must append a script reference to the page pointing to a jQuery file (or Google CDN) to include jQuery. After that, you can use jQuery in the rest of your script.
I think it will involve some interval that checks wheter the jQuery object is present or not and waits with executing the rest of your code till that it the case.
Google for this, I'm sure there is something out there.
I am working on a project where I need to include somewhat around 10-15 .js files in the HTML head section directly like
<script type="text/javascript" src="http://localhost:9020/website1/wa/min/soundmanager2.js,vars.js,utils/md5.js,utils/utils.js></script>
what is the way I can give refrences correctly
the files I need to refre are in the same hierarchy like
1.....2,3
2.........4,5
3........6,7
I need to refer 1,4,7 please help.
somewhere I read this method what's it?
<script type="text/javascript" src="http://localhost:9020/wordplus/root/child/?b=scripts&f=soundmanager2.js,vars.js,utils/md5.js,utils/utils.js></script>
The example you posted looks exactly like the query string interface for the minify PHP library: http://github.com/mrclay/minify
Using it you use it in the fashion <script src="min/?b=path&f=script1.js,script2.js,ui/script3.js"></script>.
Where path is the path from your web root that you want it to look for scripts under.
I've used it before and I've found it quite effective. It concatenates, minifies, caches, and serves JS and CSS.
I'm sure there are other libraries to achieve the same effect, alternatively you can create a build script to concatenate and minify all your scripts and then deploy a single JS file to your site, in a single script tag.
It is not possible to load multiple javascript files in a single <script> element.
You have to have to have an individual <script> element for each script you are referencing..
<script type="text/javascript"
src="http://localhost:9020/wordplus/root/child/?b=scripts&f=soundmanager2.js"></script>
<script type="text/javascript"
src="http://localhost:9020/wordplus/root/child/?b=scripts&f=vars.js"></script>
I think you'll get what you need from dynamically loading external javascript files:
http://ntt.cc/2008/02/10/4-ways-to-dynamically-load-external-javascriptwith-source.html
http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
The second line you posted requests scripts from the server dynamically. the b parameter of the request tells it you want scripts and the f parameter tells the server which files you want. Then it concatenates these into one file and sends that back to the user agent. You need server-side scripting to handle this; it is not something built into the URL specification.
http://localhost:9020/wordplus/root/child/
b=scripts
f=soundmanager2.js,vars.js,utils/md5.js,utils/utils.js
The simplest solution is just have one script tag per file as it will let you take advantage of caching:
<script src="http://localhost:9020/wordplus/root/child/soundmanager2.js"></script>
<script src="http://localhost:9020/wordplus/root/child/vars.js"></script>
<script src="http://localhost:9020/wordplus/root/child/utils/md5.js"></script>
<script src="http://localhost:9020/wordplus/root/child/utils/utils.js"></script>
Another solution is to use some JavaScript builder to join all your files, generating just one. The pros of this approach is that your result file will be "compressed" (minified). Some builders:
Google Closure Compiler (I like and use this since 2009).
YUI Compressor
Im new to Jquery but it turns out I used it quite a bit in my last application. My problem now is that its reloaded every single time one of my pages is loaded/reloaded. Is there an efficient way to reference it like we do a css or javascript file? for example:
<script type="text/javascript" language="javascript" src="js/behavior.js"></script>
I would really like to be able to do this with the jquery...because its quite a mess when you look at the source code. To avoid confusion: I already have jquery loaded. For example...this is already in my html:
<script src="js/jquery.min.js" type="text/javascript"></script>
What Im trying to cache is all of the code I've built off Jquery. For example:
$('#needDelete').slideDown('slow');
I have a bunch of these that need to be put into a file if that's even possible! Thanks!
jQuery is a JavaScript library. It consists of a single JavaScript file. All the documentation for it says to use <script src="..." to load it.
Update in response to edit:
The JavaScript you write that calls jQuery functions is still JavaScript and can be referenced from an external file just like any other JavaScript.
Yes, of course you can save your JavaScript code in a separate file (whether based on jQuery or not). Just keep your code separated and put it eg. in main.js file, then put a tag after jQuery script tag:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
Just for consistency and improved maintainability, it is easier if all the code is in one place than when it is often referenced within HTML like that:
show popup
Instead of the above you could do this in a separate JS file:
$('#a1').click(function(event){
event.preventDefault();
$('#popup').show();
}):
(of course the above code should be enclosed within onload or ondomready handler, so the code searches for elements after they become accessible - in case of jQuery and ondomready you can simply use: jQuery(function(){/* your code executed when DOM is ready */});)
I would refer jQuery from a CDN. This will allow the browser to do parallel download along with other resources from my domain, thus save some load time.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
The cdn version will be usually cached in your browser.
I don't get this question. What do you want?
I tried opening a file called custom.js. I dumped all of the jQuery
code into it and then referenced it. Nothing worked. Does there need
to be something additional in the reference page itself?
Why would you do that? You save some loading by decrease the number of different files, but the difference between one and two files is minimal.
Instead, do as Frederik Creemers suggested. Juse the jQuery-library at googleapis.com. The file is cached, meaning it will not load every single time a user visits your page. Only when the cache expires (not 100% sure how long this is). In addition, this library is used by many other sites, so you might be lucky and the user downloads it somewhere else and has it ready for use when going to your page.
Again, what you are asking (if I understood correctly) is pointless.
download jquery, and reference it like this:
<script src='jquery.js'></script>
Or, for an even better option, you can use google's cdn. This means that if a user comes to your site, and has already visited a site which uses the cdn, it will already have jquery cached.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
and for the best option, to protect against the possibility of downtime of the cdn, combine the local copy and the cdn like this:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
if(!window.jQuery){
script = document.createElement('script');
script.src='js/jquery.js';
document.head.appendChild(script)
}
</script>
I use the following code to load my JavaScript files. which works fine for me
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script>
<script src="../js/jq/jquery.ui.core.js" ></script>
<script src="../js/jq/jquery.ui.widget.js" ></script>
<script src="../js/jq/jquery.ui.mouse.js" ></script>
<script src="../js/jq/jquery.ui.mouse1.js" ></script>
<script src="../js/jq/jquery.ui.mouse2.js" ></script>
<script src="../js/MyLoader.js" ></script>
but when I change it into the following code And add async="async" to script.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" async="async"></script>
<script src="../js/jq/jquery.ui.core.js" async="async"></script>
<script src="../js/jq/jquery.ui.widget.js" async="async"></script>
<script src="../js/jq/jquery.ui.mouse.js" async="async"></script>
<script src="../js/jq/jquery.ui.mouse1.js" async="async"></script>
<script src="../js/jq/jquery.ui.mouse2.js" async="async"></script>
<script src="../js/MyLoader.js" async="async"></script>
It has strange behavior sometimes all javascript files loading sometime some javascript files are missing .
I check this in Chrome.
According to Documentation It has to be load but Asynchronously not or badly loading ??
The most important thing for me is to force MyLoader.js load as the last javascript then it can use the resources in the other libarary. So Question is how to delay one JS file to load as last javascript file ??
example of erorr in broswer
query.ui.mouse.js:20Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'widget'
jquery.ui.widget.js:67Uncaught TypeError: undefined is not a function
jquery.ui.widget.js:67Uncaught TypeError: undefined is not a function
loader.js:6Uncaught TypeError: Object [object Object] has no method 'draggable'
2event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.
If the main problem you are trying to solve is to make sure that MyLoader.js is loaded last and that everything else is loaded before it, then simply remove the async attribute from all your script tags. The browser will then load and execute them in the order encountered in the file.
For more info on using async, you cannot make multiple JS files that depend upon each other and must be loaded in a specific order all be async. They may then load in the wrong order and cause errors.
For example, all the jQuery.ui files depend upon jquery.min.js so it MUST be loaded first. When you load things async, their order is no longer guaranteed so you are rolling the dice on whether they will be loaded in the correct order or not.
The best candidates for async loading are scripts that don't depend upon any other async scripts, scripts that aren't required for the initial rendering of the page and scripts that somewhat stand on their own. They do their own work when they load and the timing of when that work is done is not critical or coupled with anything else in the page. A perfect example of such a script is a script that records web statistics on a remote server. It isn't involved in the initial rendering of the page, it doesn't matter if it happens right when the page is loaded or a second or two later and it isn't couple with anything else in the page.
See this article for some good discussion of the topic.
If you really wanted to load a bunch of dependent scripts async and load them in a specific order, then you would have to use a bunch of additional code to coordinate that. That level of order and coordination will not happen automatically with the async attribute.
Your question right now sounds like: How can I load scripts in order asynchronously? :) The real answer is that you don't need async in there. Newer browsers download scripts in parallel an execute them in order
This should be quite simple to fix, just concatenate all the jquery js files into a main file and then load that (this also saves on URL requests and makes the page load faster)
OR
Check if the functions in jquery are defined before executing them
typeof func!=="undefined"
You should use defer for scripts that have dependency. defer is the same as async except it maintain the executing order. More info here: http://www.webkit.org/blog/1395/running-scripts-in-webkit/
Async tag means that will load asynchronous.
So if jquery.min.js still loading when his dependences start to be loades, the script will not work.
If you want to load async, try work with AMD pattern, I personaly recomend RequireJS