i want to insert Jquery library in my HTML, but i can't place it on the header of file. I need to include it after some scripts im running.
Do you know any way to do this without getting an error?
You may be trying to call jQuery in a script before your jQuery library file is loaded.
You only have to load jQuery before your scripts that use it. Other scripts that don't use jQuery can go before it if you want.
For example, if you want to include jQuery in a script tag at the end of the body and then include some scripts that use jQuery after that, you can do it that way.
If you are constructing your own site/page then you may be able to control this enough by making sure jQuery is included before the other files. However, if you are using something like WordPress or other dynamic CMS platforms you may not be able to stop something from referencing jQuery before it exists.
Check out this github project for jqShim that might help. You can include the very basic dom ready functionality in the head while moving the bigger/larger/slower/complete jQuery download to the bottom of the BODY (but before any plugins). As long as the code that calls jQuery is doing something like:
jQuery(function($) { ... doing something when ready ... });
Those calls can still be made in the body, after using the jqShim, and will behave as expected. Let me know if it proves to be helpful!
Related
I'm needing to load JS code on many different websites with different developer's code, and I want to load in jQuery into their site to manipulate the DOM. The only problem is they may or may not have jQuery already loaded on the page, and I don't want to conflict with that.
A lot of answers deal with checking if jQuery is already loaded on the page, or adding callbacks to when the entire dom is loaded. I don't want to go that approach, instead I want to know if I can directly load jQuery in as it's own variable which is completely isolated, so that I can use it directly without conflicting with whatever is outside.
This includes the fact that they may be using old, specific versions of jQuery that I can't go overwriting with my newer version. I really just want a complete isolated instance.
(function() {
// load jQuery in isolation and call it "xxx"
var divs = xxx('body').find('div');
})();
I also need to do this FROM JS itself, not by editing html (so I can't add jquery script tag in their HTML, i want to load it asyncronously with a callback)
You might try this approach:
(function(xxx) { // add xxx as a paramters
var divs = xxx('body').find('div');
})(jQuery); // Add jQuery as a value here.
As mentioned in other answers. You can check if jQuery is loaded using window.jQuery. And to check the version number you can use jQuery.fn.jquery.
I still however not sure what you mean by isolation. jQuery loads into window object which is global.
You might want to use another library like Zepto which has similar syntax to jQuery, or you can use vanilla JavaScript. See this link http://youmightnotneedjquery.com/
You could do this ...
if(!window.jQuery)
{
// load jquery here
}
Before you load your script. Declare no conflict.
Then you can load your script.
After that is loaded, do ...
var myJq = jQuery.noConflict();
You can access your library using myJq.
I use simple php parser to load a page, but within the blog post there is a injected fb javascript, the DOM look like this
I tried using jQuery to remove like $('#fb-root') but when I think back of course it doesn't work, because jQuery run later than the like button plugin.
I do want to return header plain/text because I want to keep the style of some part.
Well, of course you could just use some CSS:
#fb-root { display : none; }
Other than that, you could use an interval to check if "fb-root" has already been written do the document and then remove it... But I wouldn't suggest that since CSS does the job way easier.
I'm working on a Codeigniter application and I use a template system to build my views.
During development, I have just been including my jQuery into the actual view itself. The problem with this is that it ends up in the body of the page. I'd prefer to have it at the footer.
Most of the jQuery is only used once in a specific view, so I don't see the sense of putting it all into the footer partial.
What are my options?
The template library by Williams Concepts has a method for you to add JavaScript on an adhoc basis.
You can then add the JavaScript in the method being called, something like;
$this->template->add_js($script, $type = 'import', $defer = FALSE)
During development, I have just been including my jQuery into the actual view itself. The problem with this is that it ends up in the body of the page. I'd prefer to have it at the footer.
So move the jQuery inclusion to the footer? Means that you'll have to load the other scripts after this, which doesn't work so well with templates :-\ If you only need to load jQuery in some places, see below.
Most of the jQuery is only used once in a specific view, so I don't see the sense of putting it all into the footer partial.
So put it just into the view. <script> is a tag just like anything else. Include it just when you need it. If you might be loading this partial repeatedly, test it like so: <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script> and it should insert into the page for you if it hasn't yet been loaded, and if it has, it skips the insertion. That way you have a sort of just-in-time jQuery loading pattern.
Ok guys, three questions here. They are all pretty noobish, but I just want to get your guys' thoughts on them.
1) When writing a jquery script, should I include type?
IE:
<script type="text/javascript" charset="utf-8">
//Jquery here
</script>
or is just an opening and closing script tag acceptable?
2) I know it's a best practice to include all JQuery just before the closing body tag, but does this also mean I include the actual jquery.js file just before body as well?
3) What if my page is reliant on jquery to look how it should (not just action events/ajax/etc). For example, I'm using a jquery plugin called datatables, which sorts through my specified database and automatically paginates/sorts/etc. I find that because I include all the scripts after the DOM loads, I see a raw format of the datatable until my datatables.js file and corresponding constructor loads. Would it be acceptable to include this before my body loads, so that this doesn't happen?
Including the type(type="text/javascript") is the best practice, though in HTML5 it's not needed as it's the default. In HTML 4 it's mandatory, but all modern browsers will read the script content as javascript if not specify, but it's still invalid according to the spec. You can read more here: Which is better: <script type="text/javascript">...</script> or <script>...</script>
Putting the jQuery script in the head is a good option, but it's not mandatory, it just have to be above all other scripts using the jQuery library.
Regarding to the plugin, it's hard to tell without seeing your code, and knowing how the plugin works. You can try move all the scripts to the <head> and see if it helps you. (It might still have the same effect if the plugin waits for the DOM ready. )
Frequently, I just want to drop a bit of jQuery on an individual page. Given my early understanding of Sitefinity, I think...
I can't easily put JS in the <head>.
I could put JS in a Generic Content control, but then my JS is sitting inline in the <body>. Maybe I need to relax, but I don't usually like to put much JS in the <body>.
It feels like this kind of scenario is an afterthought. Is JS a 2nd-class citizen in Sitefinity?
JavaScript does not live in the head. Yahoo even says it is better for performance
I agree with epascarello you really shouldn't be putting your javascript in the head anyway.
And just in case you didn't know about this the jQuery framework is part of Sitefinity. The article also shows you how you can include external libraries in sitefinity from anywhere withing your project whether it be master page or user control.
Why not have the jQuery code in a separate .js file and use unobtrusive JavaScript? With jQuery you can separate behavior and markup so nicely that you should never have to include JavaScript in your head or body ever again.
Just use the standard onLoad function in jQuery and put all of your initialization code in there.
Try it, I think that you will like it! If you like using CSS for separation of presentation and markup, then jQuery can do the same thing with behavior and markup.
This is an old question, but one way you can do it now is:
Add a Javascript block (under Scripts & Styles), and then paste the URL to the jquery code:
http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js
Then add another Javascript block with your jquery, like:
$(document).ready(function() {
alert("hello");
});
Or you can also paste the URL to your js file.