I'm using these three CDN files, as recommended on getting started in JQM documentation:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
I'm perplexed why I'm getting a 404 Not found status under the Network tab in Chrome. Seems to be looking jquery mobile min.map file. I don't see this in Firefox.
Any thoughts as to why it's looking for this file?
Probably your Google Chrome DevTools has enabled the option "Enable source maps". Check your Settings menu, then General and Sources.
A source map file it's a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files. When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location. Developer tools (currently WebKit nightly builds, Google Chrome, or Firefox 23+) can parse the source map automatically and make it appear as though you're running unminified and uncombined files.
More information here.
File not found : 404 will be shown only in browser developer tools. If developer tools are not opened the sourcemap file will not be accessed from browser
You can remove the 404 by removing the line
//# sourceMappingURL=jquery-1.x.xmin.map
from the top (or bottom as #ittradco mentioned in comment ) part of your jQuery file.
The top part of the jQuery file will look like this.
/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//# sourceMappingURL=jquery-1.x.x.min.map
*/
Just change that to
/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license */
Purpose of a source map
Basically it's a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files. When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location. Developer tools (currently WebKit nightly builds, Google Chrome, or Firefox 23+) can parse the source map automatically and make it appear as though you're running unminified and uncombined files.
(Read more on this here)
Related
I've started as a new dev in a team where all previous devs have left and as usual it's not easy to find information.
The project is asp.net MVC 4.
There is a reference to a dll : Kendo.Mvc.dll
The project has the following script files:
kendo.aspnetmvc.min
kendo.core.min
kendo.data.min
kendo.data.odata.min
kendo.data.xml.min
kendo.grid.min
kendo.web.min
And also includes jquery and jquery-ui (1.10).
Question:
How do I know if the product was purchased or the kind of licence this is ? (all dependencies have been put into source control, I can't find any obvious key file or something like that in the config).
How do I know which version of the product it is ? (this one I think I've got the answer, the DLL version says: 2013.2.xxx so that's probably it)
Where can I download the old versions of the scripts ?
I'm very confused about the state of those components. It seems like Telerik acquired Kendo a while ago and this project has old version.
Thanks
Yes, the DLL version is the Kendo UI version (or more precisely, the UI for ASP.NET MVC version). In more recent versions, the DLL description explicitly states if it is a trial version or not.
In addition, Kendo UI JavaScript files and CSS files have their version in a comment at the top of the file contents, e.g.
http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css
/**
* Kendo UI v2016.3.914 (http://www.telerik.com/kendo-ui)
* Copyright 2016 Telerik AD. All rights reserved.
Another possible way to check the scripts version in the web application or browser console is via kendo.version - the API docs also explains the meaning of the version number.
The DLL version should always match the version of the JavaScript and CSS files (except the last part of the DLL version, which is related to the ASP.NET MVC version).
It seems like Telerik acquired Kendo a while ago
Kendo UI has always been a product of Telerik.
It is possible to download previous versions' installers from telerik.com if you have the email for account that has held the commercial license.
you can print it in the console
<!-- Telerik KendoUI Default v2 CDN 2019 -->
<link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common-empty.min.css" rel="stylesheet-disabled" />
<link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.rtl.min.css" rel="stylesheet-disabled" />
<link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default-v2.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default-v2.mobile.min.css" rel="stylesheet-disabled" />
<!-- jQuery -->
<script src="/scripts/jquery/jquery-3.4.1.min.js"></script>
<script>
// Print jQuery, kendoUI version
$(document).ready(function(){
console.log('Detected jQuery version: %o', $().jquery);
console.log('Detected Telerik KendoUI version: %o', kendo.version);
});
</script>
The version is indeed in the DLL.
Missing scripts can be found and downloaded from cdn.kendostatic.com
Only mistery remaining is the licence... not sure it's worth investigating.
I copied the navbar default sample from from the samples but without any changes it appears to be doing what I think is mobile format. The only thing I see is the brand tag to the left and the button to the right. My monitor is pretty big so it can handle the menu and it does when I view it online which you can visually see here. I can only assume that since I cut and paste from the demo code I have a setting somewhere else that is wrong but I have no idea where to look. I did make sure to run nuget and get the latest version of the code so I should match what is on the demo. Any ideas?
Update
The issue appears to be with VS2012 and debug mode. Using Visual Studio Development Server seems to be the problem. If I publish locally it works as expected. I thought it might be IE8 but realized it was VS2012 after I published the site.
Is there a way to work around this while using the debugger in VS2012?
Update 2
And somehow it is not working in IE8 again even after being published. Chrome seems to work fine. Must be something picky about IE8 that I need to code around.
Try to copy all the page html, then if it works cut unnecessary code.
Use this instead of your local bootstrap:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Looks like this was an issue with IE8 all along. I didn't think it was a browser issue so I never looked for IE8 nav problems but here is a link that documents the issue.
I created Phonegap application that holds web pages in file system. When I open any of these web pages from filesystem, only chosen page is loaded, but related files (images, css etc.) not.
For example there is webpage in filesystem under path:
cdvfile://localhost/temporary/1/
In this directory there are files like: index.html, style.css, img/background.png etc.
When I open file index.html only this file is opened, but page has no styles and no images. These related files have relative path in index.html.
This situation is on iOS platform only. On Android platform and on google chrome all works. Why is that and can I fix it?
EDIT:
I just figured out that links and js loaded from file work. For example:
link
opens right page. But css like:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
are broken.
EDIT:
Unfortunately, this is an open bug in cordova project: https://issues.apache.org/jira/browse/CB-6532
See https://stackoverflow.com/a/22801512/276648
I ended up using a relative path (ie something like ../../Documents/MyApp/temporary/1/) instead of the full path (ie cdvfile://localhost/temporary/1/) to fix the CSS issues in iOS.
It looks like you are running into CB-6532. I just put in a pull request for a fix -- you can temporarily use my fork until it is accepted:
https://github.com/loufranco/cordova-plugin-file
To use it, do
cordova plugin remove org.apache.cordova.file
cordova plugin add https://github.com/loufranco/cordova-plugin-file.git
Remember to reverse it if the pull request is accepted.
Already found this page with some helpful hints.
Problem is I need to debug a web application on a CMS using an iPad and Safari.
So far I haven't been able to make firebug-lite work. I am working in a secured environment having no internet acces, but can copy files using a USB-key.
I have copied firebug-lite.js to the local server and included the file in a script tag in the head:
<script type="text/javascript" src="http://my_server/js/firebug-lite.js"></script>
Unfortunatly when I open the page in the CMS I cannot see the firebug-lite-button on the page. Verifying the source code firebug-lite should have been loaded on the page. There is no way to get a right click menu to inspect anything.
What can I do to make firebug-lite work on the iPad? What am I doing wrong?
Start Firebug Lite already opened, as per http://getfirebug.com/firebuglite#Options :
<script type="text/javascript" src="proto://path/to/firebug-lite.js#startOpened=true"></script>
I think you won't be able to inspect elements, but you can navigate to the elements in the DOM tree provided by Firebug Lite.
It looks like Firebug-lite has problems with the iPad browser since late 2010.
The problem (ticket on official tracker) has not been yet solved.
Have you tested the problematic page in Safari/Chrome/Chromium for desktop? Since they use Webkit, the same system used with mobile Safari/Chrome, you may be able to duplicate the error and find its solution. You can open Chrome's debugger with right click, Inspect element.
In order to dramatically reduce the number of HTTP requests on my ASP.NET MVC website, I am programmatically merging the files.
Essentially, I have an MVC URL http://localhost/Optimisation/JavaScript/ that calls my controller. The controller reads the javascript files in a certain order, merges them into a single output and renders it on a view.
This works fine.
I am implementing the same concept for the CSS now, using http://localhost/Optimisation/CSS/ - this merges a number of CSS files in a particular order and renders it onto the view.
This works in internet explorer, but in FireFox the styles are all absent. When I "inspect" the CSS file using FireBug it says that the file is empty. The same technique works perfectly in Internet Explorer, so the code behind is working - and if I browse to http://localhost/Optimisation/CSS/ using FireFox, it shows me the raw CSS that I've merged.
I'm referencing the optimised CSS like this:
<link href="http://localhost/Optimisation/CSS/" type="text/css" rel="Stylesheet" />
Make sure the server is sending it with a content-type of text/css.
I think Firefox will put a warning in the error console if it's not (or you can just look at the headers with your tool of choice).