Using jQuery ready before jQuery is included - javascript

We are migrating a site from an old version of a CMS to new one. The core code is outside of our control, but we can add custom files/scripts/logic to the system.
We have a page which includes jQuery in the HEAD and then loads several bits of functionality using jQuery.ready()
In the new version of the CMS they have included their own jQuery, but in the footer. The problems are:
we can't now include our own jQuery in the HEAD because it conflicts with their version
removing our jQuery causes all the jQuery code after that to error out, because their jQuery loads in the footer so those functions are unrecognised
we can't edit their code to introduce any scripts after jQuery in the footer
The question is: how can overcome this without being able to edit the core code i.e. the footer?

you can do one thing, Put all your code in init() method. And let it be loaded in head.
At the footer, after loading the Jquery library, Call your init() method using document.ready();
function init(){
alert("hi");
}
//Jquery file loaded hear.
$(document).ready(function() {
init(); //call the init method once Jquery loaded.
});

Related

Best way to delay js loading?

I'm using a bootstrap theme that requires a few javascript files. On some of my pages I load quite a bit of content from the server which means not all the html will be on the page at the time the javascript files are evaluated.
This prevents the event handlers from binding to the html that's loaded after the javascript is evaluated. So far I've fixed the problem by loading the scripts after the ajax call is finished, but this seems pretty hokey to me. Here's my function:
$.get("/path/to/rest/call", function(data) {
$('#htmlElement').html(data);
}).done(function() {
$.getScript("/path/to/js/file.js");
});
I feel like there's a better way to do this. Is there?
There may be a cleaner way of solving this than dynamically loading the metroui library. It looks like it depends upon jQuery's .ready() to know when the page is loaded and when it can initialize it's things. But, that doesn't work for you because you are dynamically loading content via Ajax.
What you can do is you can hold off the jQuery ready() notification until after your ajax content is loaded. This will then hold off the firing of metro's initialization until after your dynamic content is loaded. This would allow you to load metro in a stock <script> tag in the <head> section like their doc suggests. The way this works is you add this to the <head> section, after jQuery is loaded:
<script>
jQuery.holdReady(true);
</script>
Then, after your ajax code has succesfully completed, you do this (from the success handler, after you've put your new content into the page):
jQuery.holdReady(false);
which then releases jQuery to call it's .ready() handlers and metro will do it's thing after your content is loaded.
See jQuery doc for jQuery.holdReady(...).

Colorbox not a method of object

I am fixing a bug on leefest.org.uk and I cannot get Colorbox working. Multiple people have worked on this project, so I apologise for the mess.
Their are multiple plugins with multiple document ready functions.
As far as I can work out:
jQuery is being loaded before colorbox
Colorbox is being loaded before the colorbox call
The colorbox call is within a document ready function
Anyone?
This could happen if jQuery was being loaded twice. The first version of jQuery would be extended with the colorbox plugin. Including jQuery again would replace the original instance, and would not include colorbox.
Most of the time I see this happening is when people load ajax content that includes a script element that sources the jQuery library, or they include a script in their main document that they do not realize has had jQuery included with it.

Separating jQuery code from HTML

I'm trying to clean up my code so I'm putting all the stuff in my
<style></style>
In a CSS file. And I'm trying to do the same for my jQuery. So I created a Custom.js file. But do things like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
Stay in html file or can I move them the Custom.js file? Also, I'm using a jQuery plugin called uscrollbar so I have this piece of code in my html file:
<script>
$(document).ready(function(e) {
$('#scroll_form').uscrollbar();
});
</script>​​​​​​​​​​​​​​​​​
Can I also move that to Custom.js?
A much better question.
It's best to keep links to external scripts in your HTML, it's perfectly fine to have a few <script> tags. Especially ones using a CDN!
You can move your document.ready() function to external JS, where all of your other JS is kept. But sometimes it's easier to include small snippets like that directly in pages where it concerns only that page.
When moving things to separate files, it's important to include them in the right order.
Usually something like Modernizr at the top (<head>), with jQuery near the bottom (just before </body>), followed by your plugins, followed by your custom scripts.
Check out RequireJS, it gives you a super simple way to include javascript files as you need them, rather than stuffing your header / footer full of tons of <script> tags.
Keep your references to Javascript files (local or remote) in your HTML code. Place them at the bottom of the page before the closing body tag if they do not need to be ready until the DOM is ready. For instance, your jQuery reference should almost always be in your 'head' section because any references to jQuery while the HTML loads need to be defined even though functions that aren't called until after document is ready do not need to be defined. Many other supporting files like 'jquery.easing' for instance, can go at the bottom which improves page load times.
You can move the uscrollbar() call to a .js file, but I would recommend putting all of your "ready" commands in one function, and then in your HTML simply call that function on ready. IE:
<script type="text/javascript">
jQuery(document).ready(function() {
fn_LoadFunctionName_Thats_InYour_Custom_js_files();
});
</script>
Don't forget to include type="text/javascript" in your script tags.
If you're using custom js that's more than just one little function call, I'd separate into a new js file and just call that in your <script> tag. Same with css. If you're changing styles with your jquery, then usually I use addClass, removeClass, and toggleClass to modify my styles. That way you don't lose track of your styling from css to js files.
You can certainly move them to Custom.js file. Just make sure you have included the file in your html file as you've included the jQuery library.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="Custom.js"></script>
Just make sure the path for Custom.js is correct. Also, you don't put script tag in the js file. So the Custom.js would be:
$(document).ready(function(e) {
$('#scroll_form').uscrollbar();
});

Bootstrap javascript at very end and jQuery $(document).ready

Much of jQuery depends on $(document).ready ... why does bootstrap 2.0 include the javascript library calls at the very end?
Is there a way to get $(document).ready to work keeping the js lib calls at the very end?
Update: A common example (and the source of my frustration!) is $("#id").click(), which does not seem to work if you do not place it inside the .ready function...
jQuery only "depends" on $(document).ready() to support scripts that are evaluated while the document is still being loaded (e.g. scripts residing in the document's <head> or halfway through its <body>).
Placing scripts at the end ensures the rest of the document is loaded by the time the scripts are evaluated, so $(document).ready() is not necessary in that case.
I expect it loads it at the end of the file to improve the performance - see Yahoo best practices.
Can you put your own JS script tag after the jQuery load? If you put it after the jQuery load it should work and it should also allow your page to display whilst your code is loaded.

jQuery tabs is loaded but not working in WordPress

I am trying to work with jQuery UI tabs in WordPress but I keep getting the "jQuery("#").tabs is not a function" error.
I thought the tabs file might not be loading but looking in firebug it shows it is loading. I am also using modernizr so I thought there might be a conflict with that but using jQuery.noConflict(); did not solve the problem either. At first I used to load jQuery but for some reason it wouldn't work. Now I just linking directly to the files and they are loading.
If it helps, I am trying to get tabs working for this tutorial. The website I working on is lbk.newcoastmedia.com/wordpress
Thanks for any help!
I see the following scripts being loaded on your page:
modernizr-1.6.min.js
l10n.js
jquery.js
galleria.js
and
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
});
</script>
$.tabs is an extension of jQuery UI, and I don't see jQuery UI or the tabs extension loaded on your page. Look at the very bottom of the source at your link and you'll see the following two scripts, which I believe are what you're missing.
ui.core.js
ui.tabs.js
Your debugger is alerting you that $.tabs is not a method because it really hasn't been defined yet.
Just had this problem on Drupal and resolved it by downloading a custom build of the jQuery UI library WITH Tabs selected. Apparently the default jQuery UI library that shipped with Drupal didn't have this module, so perhaps this is also the case with WP.

Categories

Resources