I'm taking some MVC.net training, and noticed something weird about the tilde.
I have a list of links to scripts that look something like this:
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/easing.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
But when I run the application on my machine, the jquery wasn't working. Checking the source code, I notice that the first tilde wasn't being converted as it should:
(source code:)
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/Scripts/easing.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.js"></script>
It can be pretty easily fixed by just adding a link to nothing at the top of the list:
<script type="text/javascript" src="~/Scripts/nothing.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/easing.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
But I was wondering if any of you have seen anything like this, or had an explanation as to what is going on?
Related
what seems to be wrong here i dont get any error but at the same time no progress in routing. .
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Angular App</title>
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/style.css">
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
</head>
<body ng-app="myApp">
<h1> this is index.html </h1>
<div ng-view></div>
</body>
</html>
mainpage.js // where my controller is
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ngResource', 'ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'index.html'
})
.when('/home', {
templateUrl : 'homepage.html'
})
.otherwise({
templateUrl : 'index.html'
});
});
when i load '/' in my browser nothins is happening same with /home i dont know where did i get wrong since there is no error in my console
The template for a route should be a partial view. Here index.html is the root of the single page app , this page should never reload (unless you want to destroy and rebootstrap the app). Try changing the templateUrl for / to a file that just has <h2> HELLO WORLD!</h2> and monitor the console (dev tools) for any 404 errors related to fetching the template
I think problem is with your javascript file name. In index you mentioned mainpage.js and in description its homepage.js.
Edit : Okay. Then try arranging files list like
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
As mentioned in the answer by user Priyanka, the filename can be the issue. But that should produce an error on the console and according to you there was no error on the console.
The other possible reason can be the sequence in which you've imported your files. I generally sequence my files this way -
<head>
<!-- 1. External CSS Libraries likes bootstrap, jquery -->
<!-- 2. My Application specific CSS files -->
<!-- 3. External JS libraries like Angular, bootstrap, JQuery -->
<!-- 4. My Application specific JS files like my controllers, services, directives etc.
</head>
Again the sequence in which you import the external JS libraries may also cause problems.
I have a single HTML file in which I load a bunch of script files, like so:
index.html
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
<script src="bower_components/angular-wizard/dist/angular-wizard.min.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-moment/angular-moment.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/raphael/raphael.min.js"></script>
<script src="bower_components/morris.js/morris.min.js"></script>
<script src="bower_components/angular-morris-chart/src/angular-morris-chart.min.js"></script>
<script src="jquery.js"></script>
I was wondering maybe there is a way to "require" all these in one script file like so:
bower_components.js
require('bower_components/angular-ui-router/release/angular-ui-router.min.js');
require('bower_components/angular-local-storage/dist/angular-local-storage.min.js');
etc ...
and later in production, compile bower_components.js to contain the actual scripts so that I could simply just use this:
<script src="bower_components.js"></script>
Please note that I don't wish to run any sort of task in development environment. I don't want to compile my scripts when I work locally.
thanks in advance.
I'm using django-autocomplete-light
Django==1.8
django-autocomplete-light==3.1.6
django-easy-select2==1.2.5
django-suit==0.2.13
django-tables2==1.0.4
It works fine when I run it in the django development server but it does not load when I set DEBUG=False and run the app in apache.
I've run collectstatic and select2 javascript and css exist and can be downloaded.
The page shows a javascript error that select2 is not a function.
settings.py
INSTALLED_APPS = (
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'django.contrib.messages',
'django.contrib.staticfiles',
'suit',
'myapp',
'dal',
'dal_select2',
'django.contrib.admin',
'django_extensions',
'simple_history',
'django_tables2',
'django.contrib.admindocs',
'rest_framework',
'rest_framework.authtoken',
)
admin page order of content:
<link href="/static/autocomplete_light/vendor/select2/dist/css/select2.css" type="text/css" media="all" rel="stylesheet" />
<link href="/static/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.min.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/jquery.init.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/vendor/select2/dist/js/select2.full.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/select2.js"></script>
<script type="text/javascript" src="/static/admin/js/related-widget-wrapper.js"></script>
<script type="text/javascript" src="/static/admin/js/calendar.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/DateTimeShortcuts.js"></script>
This was wierd. After spending a lot of effort playing with this, I wiped out the static folder content and ran collectstatic django command from scratch and it's working now. When I diff it, I see that there are changes in admin and select2.js so maybe they've updated the packages to fix the issue.
I asked a question about getting box-shadow to work on IE here.
It turns out, though, that IE is not really the problem -- IE can produce a shadow, as seen here:
The screamshot above is from a Meteor app running on localhost; However, when I try to accomplish the shadow effect in a Sharepoint site (on a Content Editor Web Part on a page), I get no box shadow:
The CSS for the working (Meteor) is:
#imgPostTravelTop:hover,
#imgPostTravelTopRight:hover,
#imgPostTravelCenter:hover,
#imgPostTravelBottom:hover {
z-index: 4;
-moz-box-shadow: 0 0 7px #000;
-webkit-box-shadow: 0 0 7px #000;
box-shadow: 0 0 7px #000;
border: 1px solid gold;
}
So, again, the shadowing can work fine in IE without any IE-specific directive!
The CSS for the non-working (Sharepoint Content Editor Web Part) is:
.finaff-form-help-post-travel-centerimage:hover,
.finaff-form-help-post-travel-bottomimage:hover {
z-index: 4;
-moz-box-shadow: inset 0 0 7px #000;
-webkit-box-shadow: inset 0 0 7px #000;
box-shadow: inset 0 0 7px #000;
border: 1px solid red;
}
Note: I swear on a stack of msdn magazines that I checked the IE version not long ago, and it was IE8, but I went to verify that and it is actually IE11! But still, even in this relatively new version of IE11, the box-shadowing is failing!
An earlier suggestion I got was to try this:
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5,
Color=#ff0000);
...but that doesn't do anything.
I've also tried:
-ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000)";
And finally, an answer at my earlier question (linked to above) suggested:
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=90,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2);
But none of this works; why does the shadow work on IE for the locally running Meteor app, but not for the Sharepoint Server-provisioned Content Editor Web Part? They are both running on the same instance of an "InPrivate" IE session.
One possibility I found in James Johnson's answer here indicates that perhaps this line in my markup:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
...is the problem. But I do not add that line explicitly, and don't know where it comes from or, if I did know where it comes from in the codebase, and I were to delete it, what havoc it might wreak elsewhere on the Sharepoint site.
For the record, the "View Source" from the working Meteor app is a profundly different, and contains no "meta" tag. It is a "different animal" altogether; here it is in its entirety, for the curious:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/merged-stylesheets.css?abd8fa0f9109090b6dfb04ae018ba1e7a90a608e">
<script type="text/javascript">__meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%401.2.0.2%22%2C%22PUBLIC_SETTINGS%22%3A%7B%7D%2C%22ROOT_URL%22%3A%22http%3A%2F%2Flocalhost%3A3000%2F%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22appId%22%3A%22wc8xy4j0rurw1r0c6ol%22%2C%22autoupdateVersion%22%3A%22fbf092224f885decf98544f617c037c838bed042%22%2C%22autoupdateVersionRefreshable%22%3A%22d906b78beb8cf4410c06763a9c8286ea8465b975%22%2C%22autoupdateVersionCordova%22%3A%22none%22%7D"));</script>
<script type="text/javascript" src="/packages/underscore.js?fa590de5090ceb4a42555b48562fd8f8e7035758"></script>
<script type="text/javascript" src="/packages/meteor.js?9730f4ff059088b3f7f14c0672d155218a1802d4"></script>
<script type="text/javascript" src="/packages/autopublish.js?c5edcae57ad2cf69f735706476fb86d91c1f1b0e"></script>
<script type="text/javascript" src="/packages/insecure.js?e7411f6cee07c76688e26c3b20767e857b42ad9f"></script>
<script type="text/javascript" src="/packages/jquery.js?bd30605bc9f8429d01bae2d29081902d10a6c400"></script>
<script type="text/javascript" src="/packages/linto_jquery-ui.js?6871fa19c8686253b1f7e0f12dab875122097a7d"></script>
<script type="text/javascript" src="/packages/standard-minifiers.js?b02a7937678c6058031ee7b2f45b5a617518335d"></script>
<script type="text/javascript" src="/packages/meteor-base.js?f0836ed3757e6217fff6e2710a1293407a6d9b09"></script>
<script type="text/javascript" src="/packages/mobile-experience.js?674f55574f9947b91bb5f92f9ea9be098479b649"></script>
<script type="text/javascript" src="/packages/random.js?d48c6af563fc182146464d0e3935bf1385aafe1e"></script>
<script type="text/javascript" src="/packages/base64.js?52d94e9ee54ea51e35e9d410040454b9d9f9136a"></script>
<script type="text/javascript" src="/packages/ejson.js?6b2a6aad82b5a8eb6d5f26975783b243b6df124a"></script>
<script type="text/javascript" src="/packages/id-map.js?7ca7d36e6fea2952e28bf48090ce1c5c110df912"></script>
<script type="text/javascript" src="/packages/ordered-dict.js?2628d5d93b3386b11f2d072e1d70ea9644a0652a"></script>
<script type="text/javascript" src="/packages/tracker.js?7776276660c988c38fed448d8262b925dffb5bc3"></script>
<script type="text/javascript" src="/packages/mongo-id.js?86be8beb10a566185e04cb56b189a091ab8773c6"></script>
<script type="text/javascript" src="/packages/diff-sequence.js?693d4e99cb4a8884bd58c0da70e580fcf7fec2f0"></script>
<script type="text/javascript" src="/packages/geojson-utils.js?83d13d8f6fd1847ed97e71e73e2f55dc9165dadf"></script>
<script type="text/javascript" src="/packages/minimongo.js?cdf1a26cf7719fa9471a8017c3defd5aea812727"></script>
<script type="text/javascript" src="/packages/check.js?fc9c23a3200accbea4c234c45664bd38c4ae2713"></script>
<script type="text/javascript" src="/packages/retry.js?cf00021132d94e73a330886b24df2373a3b209ab"></script>
<script type="text/javascript" src="/packages/ddp-common.js?23a845a08ff48730e7fbbbe941df509caa6b9b66"></script>
<script type="text/javascript" src="/packages/reload.js?4afcce286a1d3526c99dff17696bd42e70150db1"></script>
<script type="text/javascript" src="/packages/ddp-client.js?82da06d8e1ea6342d823b2c5c3be071e96108c70"></script>
<script type="text/javascript" src="/packages/ddp.js?1c935134013739ed5ece46880dea800b6319bd67"></script>
<script type="text/javascript" src="/packages/ddp-server.js?1057b33d71942bc01fd0167e2b2a5f49f5545d11"></script>
<script type="text/javascript" src="/packages/mongo.js?5dcfbae63393ea63b330ea0c46d7b41eb1b4c3ae"></script>
<script type="text/javascript" src="/packages/blaze-html-templates.js?31453f3129c01ec6fabaa5b791f6572e8c4464a2"></script>
<script type="text/javascript" src="/packages/reactive-dict.js?e43655c138a9184c40228ef4dd2da3f65f1bd8bb"></script>
<script type="text/javascript" src="/packages/session.js?0ae88e5e9f7b50b0047ade23a47a1a8dfa5874b9"></script>
<script type="text/javascript" src="/packages/logging.js?79dea15e9da438bd107b9ff92162c1b189d70e4b"></script>
<script type="text/javascript" src="/packages/deps.js?a0f1fc18309813a3aac8954f76d0c73e4c5d46f4"></script>
<script type="text/javascript" src="/packages/htmljs.js?02fcaaa6a72c008a5f618f8ec940eac2d240fc2c"></script>
<script type="text/javascript" src="/packages/observe-sequence.js?e0b5ec6321580efa20bf31f5a1ae4c52f05f38b5"></script>
<script type="text/javascript" src="/packages/reactive-var.js?b77e26d789bc6e0859202f67ea0934d68346450a"></script>
<script type="text/javascript" src="/packages/blaze.js?695c7798b7f4eebed3f8ce0cbb17c21748ff8ba8"></script>
<script type="text/javascript" src="/packages/spacebars.js?3eafdd2d5d5d8f08431aa842df4b5e8142600b17"></script>
<script type="text/javascript" src="/packages/webapp.js?ba2db8eb3207813c575b828e42663552e89d359e"></script>
<script type="text/javascript" src="/packages/livedata.js?93f27626c1702ea8af804d6170ffbf8968626718"></script>
<script type="text/javascript" src="/packages/hot-code-push.js?3916ae26c3ca4928e61dc2da7e7b3f93e4164c0c"></script>
<script type="text/javascript" src="/packages/templating.js?142b64439619ddabba8ad16a798ed8349de73bae"></script>
<script type="text/javascript" src="/packages/launch-screen.js?b50bb1bd905d2cc3d6182ee28c096df0cc24a725"></script>
<script type="text/javascript" src="/packages/ui.js?6aa94fb4743be2472f799f928674607edae2afdf"></script>
<script type="text/javascript" src="/packages/autoupdate.js?aba61f60d98ac77989b7b8984bb8495824c0dad7"></script>
<script type="text/javascript" src="/packages/global-imports.js?a379a2c4e2479aebed57fef92a7f3df1f6843cf5"></script>
<script type="text/javascript" src="/app/template.formhelp.js?b781feeb046b65b092be70ca04fb6d6fe3c9c114"></script>
<script type="text/javascript" src="/app/formhelp.js?82951332599f48810cba5422fff5616aaf8a201f"></script>
<title>Travel Form Help</title>
</head>
<body>
</body>
</html>
UPDATE
I wonder if, because this seems to be a Sharepoint HTML problem, I will have to revert to trying to work around it via jQuery, such as in a "hover" event handler toggler (mouseenter, mouseleave). I was originally going down that path, but switched to the more elegant CSS-only approach. Things like IE - the bane of web developers' workhours existence) make elegance more difficult to attain.
SharePoint 2010 tells Internet Explorer to run in compatibility mode in order to retain functionality associated with its various ActiveX controls and Office extensions. Compatibility mode is essentially equivalent to IE8 in terms of HTML, CSS, and ECMAscript compliance.
If you wanted to, you could sneak <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> between the <head></head> tags in the masterpage that SharePoint uses (with no preceding elements that aren't also <meta> tags) to tell IE11 to actually behave like IE11, but that could come at a loss of SharePoint functionality.
If you have the Publishing Infrastructure site collection feature and the Publishing site feature activated on your site, it makes it easier to manipulate masterpages and page layouts. You can have multiple masterpages in your SharePoint site's masterpage gallery, giving you the ability to have some pages that render in IE8 mode for legacy functionality and some pages that render in Edge mode for modern HTML/CSS. (I would download a copy of the existing masterpage, add or update the meta header tag, and re-upload it as a new masterpage.)
While the masterpage for the site as a whole is determined by a setting in Site Settings (found at /_layouts/changesitemasterpage.aspx), you can also hardcode a masterpage reference into a page layout. Then you can create a new page using that page layout and it should render as IE11 instead of IE8.
Edit: Or yes, you could instead use jQuery to work around the problem with the CSS not being recognized. Just be aware that if you go this route, you're essentially supporting IE8, so the newest versions of jQuery probably won't work (but the venerable version 1.1 should be fine).
I have recently got stuck in the following situation.
I have a script which works perfectly in FF and GC,but not in IE10.
The IE is not loading the jQuery src files,so therefore it triggers the error '$' is undefined.The loading part looks like this:
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/jquery.js"></script>
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<link rel="stylesheet" type="text/css" hrf="/RequestCenter/modules/resources/dist/jquery.jqplot.css" />
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/plugins/jqplot.highlighter.min.js"></script>
my function is simple:
$(document).ready(function() { .... });
so,the IE10 doesn't load the jQuery and triggers the error on this line.
Any ideas how to find a work around would be really appreciated.
Thanks
It might be a browser mode or document mode compatibility issue, press F12 in IE and change your document mode to highest standard