I have an Asp.NET MVC 4.0 site that uses jQuery 1.11.1. I had an issue where some of the javascript on an end users browser (IE) was not working. For some reason, they had version 1.7.x of jQuery. I've been coding for a long time, but I'm relatively new in the web development area.
Why would the browser not download my copy of jQuery from the server? Is there a way to force the browser to get my version?
Thanks!
If the client is loading your site normally (calling an endpoint on your server) then there is no way they could load any version of jquery other than the one you have included in the script tag on your web page.
If you are doing something fancy like providing a widget that your user embeds in a page then indeed, depending on the order in which the scripts get loaded, the browser might wind up with a different version of jquery.
If you're doing the latter there are methods you can use to get a particular version of jquery for your code. See here for a start:
Include a specific version of JQuery and a plugin without conflicting with the page's JavaScript library?
Based on the comments below, you might also have other libraries in your application that also load jquery. The $ variable will get the last version of jquery to load. I would have thought that every browser would load them in the same order, but perhaps on older copies IE things happen differently (or perhaps there are paths through your app that load things in a different order).
If any of that's true then you'll have to use one of the techniques above. I'd also look into whether you can force kendo not to take over $.
Related
It's pretty straightforward to use something like cURL or (in PHP) stream contexts/file_get_contents to get the starting HTML markup of a page, but nowadays, with so many pages being heavily controlled by JS, even if you get the starting markup for a page, you still cannot readily determine what the actual makeup of the page is (because so much of the page is made up by JS running client-side).
As such, is it possible to get the entire DOM structure of a page after all on-load JS for the page executes by using something like cURL, etc.?
(As a extra bit of info, I know that you can get the DOM structure with Chrome dev tools, etc., but I'm wondering if there's any way to automate the process.)
Thank you very much.
You'll have to run it in a browser, then get the contents of document.documentElement.outerHTML.
I don't think this is possible in PHP alone. You'll have to use:
phanthomJS
PhantomJS is a headless WebKit scriptable with a JavaScript API.
Access and manipulate webpages with the standard DOM API, or with usual libraries like jQuery.
or SlimerJS.
SlimerJS is similar to PhantomJs, except that it runs Gecko, the browser engine of Mozilla Firefox, instead of Webkit.
In my grails app, we use jquery. I include jquery on the necessary pages with
<g:javascript library="jquery"/>
If we decide to change javascript libraries, I need to update every page. I know I can include this in the layout, but the library is not needed on every page, so that seems wasteful.
Is there a typical way in grails to specify in one place what the default javascript library should be and then to just include that default one without specifying that it is jquery (or whatever it is) on every page?
Since most browsers heavily cache things like JavaScript libraries, putting the library include into the layout is probably better than putting it in each individual page. The heavy caching that browsers do means that users will only load the library from the server once for your whole site (or at least their browsing session), and by having it be handled in the layout you are drastically reducing your maintenance load (which you alluded to)
In general, your JavaScript libraries should be highly cached, and in many cases it's preferable to pull them from a highly used CDN, like Google's. Your "local" (ie. from your server) library should only get requested if the CDN provider goes down and the browser can't get to their library. (Take a look at the HTML5Boilerplate project for how this is done)
Because of that, I wouldn't worry about the very minimal performance hit that putting the library into the layout page would incur. Even if you don't use a well-used CDN for your library, any browser that people actually use today will only load your JavaScript library once (the first page it gets that includes it) and will simply use it's cached copy for the rest of the pages on your site.
So, in a nutshell, put it in the layout page and don't worry about it. It will only be requested on the first page load, and will come from the cache for all subsequent loads, and your codebase will be DRYer.
You could also create an external JS file that selectively loads the file(s) you specify. Something like this:
//FILENAME: jselector.js
if ( [conditions] ) {
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename); //reference your Jquery file here
document.getElementsByTagName("head")[0].appendChild(fileref);
}
Then put a reference to this file (jselector.js) in each of the pages that need it.
<script type="text/javascript" src="jselector.js"></script>
If your jQuery file ever changes, you update this single external JS (jselector.js), and all of the pages will automatically point to the new jQuery.
I'm going to write a simple chrome extension using jQuery and jQuery UI. Before I start, however, I want to know: what might happen if a web page that my extension is going to interact with also uses this libraries? Can there be any conflicts (e.g. CSS for my jQuery-UI theme messing up the page's jQuery-UI theme)?
Javascript is sandboxed so there will be no conflicts, but CSS isn't, so any styles on parent site will affect your styling and vice versa (aka a nightmare).
Yes there can be conflicts, however you can prevent them. When you are setting up a theme, you need to download it with a namespace(you can find that setting in the right column of the jquery ui custom download page), and then use that namespace in your extension. The only possible issue at that point is if the site that is being viewed uses the same namespace that you choose, so make sure you choose something that won't have that problem.
It depends what type of extension you are making. If you are making a replacement for an existing Chrome page, well, it will be a full replacement (http://code.google.com/chrome/extensions/override.html). If it is a popup through either page (http://code.google.com/chrome/extensions/pageAction.html) or browser (http://code.google.com/chrome/extensions/browserAction.html) action, then again, you will have no conflicts because all of your code is sandboxed to itself.
The only time I can think of that you will run into an issue is if you are using content scripts (http://code.google.com/chrome/extensions/content_scripts.html), or actually injecting your code into the page by other means. Then, yes there could be conflicts, as the browser now runs your code along side the web sites code. Depending on what you need to do, you could try injecting your code as an iframe, but that will also prevent it from interacting with said web page.
<iframe src="yourPageUrl" height="iframeHeight" width="iframeWidth" style="border:none;"></iframe>
So without knowing what your extension's purpose was, it would be hard to know exactly how to help.
I've developed a Google-home like portal for my school, and these widgets all work as separate iFrames. In creating this, I noticed that you must re-import JS libraries in each iFrame.
My question is this: would it be terribly inefficient if multiple iFrames imported the same library? Would the client have to download the same library multiple times? If so, is there a way to use the same library you already imported in the parent?
Thanks!
It gets cached by the browser so the browser uses it from the cache itself.
No, once it's loaded, it's cached by the browser. This is why using JQuery from the Google CDN is beneficial because if anybody has visited any other website which has pulled JQuery from that same URL, it'll be pre-cached on their browser when they visit your site, and you get a bonus :)
i have a service i'm building, which will be included as JS on client web pages. optimally, i want to build the service using jquery.
the case may arise, where the page already has JQ included.
how do i avoid including JQ twice in the page? how do i make sure i still have the desired JQ functionality, even if the page has already included an older version of JQ?
is the only solution simply abandoning JQ and going with hand-coded script?
Check for the existence of jQuery and match the version you need against jQuery.fn.jquery.
from the linkedin jquery group:
Ever want to use the latest jQuery, but old code or components leaves you with an older version? Well this standalone version can be included anywhere on the page and will take a custom name space of jQuery14, and will not affect jQuery or $ in any way. Also, easy way to integrate among other frameworks.
http://www.matthewdunham.com/jquery-1.4.2.min.standalone.js