I am experiencing an odd occurrence.
If I navigate to:
http://localhost:59730/Controller
I get served the correct page and it is displays everything correctly.
But if I navigate to:
http://localhost:59730/Controller/Index It loads the page but it doesn't seem to load any css or scripts?
Why would this be? It is essentially navigating to the same page? It must have something to do with asp.net mvc routing I think??
I have just dumped my references in the main layout file: (my plan to go and organise them at a later stage)
<script type="text/javascript" src="Content/Template/js/plugins/jquery-1.7.min.js"></script>
<script type="text/javascript" src="Content/Template/js/plugins/jquery.flot.min.js"></script>
<script type="text/javascript" src="Content/Template/js/plugins/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="Content/Template/js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="Content/Template/js/custom/general.js"></script>
<script type="text/javascript" src="Content/Template/js/custom/dashboard.js"></script>
<script type="text/javascript" src="Content/Template/js/custom/tables.js"></script>
<script type="text/javascript" src="Content/Template/js/plugins/jquery.dataTables.min.js"></script>
Reference your contents (like js, css, images...) with Url.Content like this:
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/custom/general.js")"></script>;
Related
Im trying to add angular 5 to my mvc project for almost two days now and its not working. When I load the page I get these errors
my scripts view is an .ascx file and the scripts look like this
<!-- Polyfill(s) for older browsers -->
<base href="/">
<script src="<%: Url.ContentWithTimestamp("~/node_modules/core-js/client/shim.min.js") %>"></script>
<script src="<%: Url.ContentWithTimestamp("~/node_modules/zone.js/dist/zone.js") %>"></script>
<script src="<%: Url.ContentWithTimestamp("~/node_modules/systemjs/dist/system.src.js") %>"></script>
<script src="<%: Url.ContentWithTimestamp("~/systemjs.config.js") %>"></script>
<script>
SystemJS.import('<%: Url.ContentWithTimestamp("~/app/main.js") %>').catch(function(err){ console.error(err); });
</script>
Edit: This is the project I put angular in.
Here is one of the packages (dont want to upload img of everyone.They are there.)
The problem was in my main.js. This line:
var app_module_1 = require("./app/app.module");
should be like this:
var app_module_1 = require("./app.module");
I can't figure out why Download CSV and Download XLS are repeated in my Highstock chart. Here are my links:
<script src="/Scripts/HighStock/highstock.js" type="text/javascript"></script>
<script src="/Scripts/HighStock/highcharts-more.js" type="text/javascript"></script>
<script src="/Scripts/HighStock/modules/no-data-to-display.js" type="text/javascript"></script>
<script src="/Scripts/HighStock/modules/boost.js" type="text/javascript"></script>
<script src="/Scripts/HighStock/modules/exporting.js" type="text/javascript"></script>
<script src="/Scripts/HighStock/modules/export-csv.js" type="text/javascript"></script>
Any help is appreciated.
I found my problem. I had a duplicate link to csport-csv.js in my html. It was hiding somewhere I didn't think to look. Once it was removed the chart displayed the expected choices.
What is the proper order for these scripts to be loaded?
This order has been the only one that I have found that properly populates the DB, however it throws the errors:
Uncaught Error: jQuery should be loaded before persistence.jquery.js
Uncaught Error: persistence.jquery.js should be loaded before persistence.jquery.mobile.js
I can re-order the scripts so that these errors do not appear, but I haven't found one that does not throw the errors && populates the DB correctly
Otherwise the DB is created correctly but when populating it, the entries are the default values instead of my custom iterated values
<head>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="lib/persistence.js"></script>
<script type="text/javascript" src="lib/persistence.store.sql.js"></script>
<script type="text/javascript" src="lib/persistence.store.websql.js"></script>
<script type="text/javascript" src="lib/persistence.store.config.js"></script>
<script>//population and clearance of DB scripst </script>
</head>
<body>
<div class="app">...</div>
<script type="text/javascript" src="lib/persistence.jquery.js"></script>
<script type="text/javascript" src="lib/persistence.jquery.mobile.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
Use the demo/index.html file in the persistencejs src to answer this question. It has the jquery scripts first and persistencejs second. Here in the order in the demo file:
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<script src="http://code.google.com/apis/gears/gears_init.js"></script>
<script src="../../lib/persistence.js"></script>
<script src="../../lib/persistence.store.sql.js"></script>
<script src="../../lib/persistence.store.websql.js"></script>
<script src="../../lib/persistence.store.memory.js"></script>
<script src="../../lib/persistence.jquery.js"></script>
<script src="../../lib/persistence.jquery.mobile.js"></script>
Modify the order to use your own version and last I would loaded your database population script.
Is there a particular order that jQPlot has to be included in a header? Currently I'm using jQMobile, but for some reason my jqPlot BarRenderer.js isn't being recognized...
<head>
<!-- CSS -->
<link rel="stylesheet" href="./signup.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" />
<!-- Modernizer -->
<script type="text/javascript" src="./modernizr.custom.56582.js"></script>
<!-- jquery -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<!-- simpleDiaglo2 -->
<script src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>
<!-- Bar Chart -->
<script class="include" language="javascript" type="text/javascript"
src="./jquery-jqPlot/jquery.jqplot.js"></script>
<script class="include" language="javascript" type="text/javascript" src="./jquery-jqPlot/plugins/jqplot.barRenderer.min.js"></script>
</head>
An example loading order might be jQuery, jqplot, main renderer(s), axis renderer, then point labels. Order is dependent on project dependencies.
You are including JS from CDNs which is good. But in your example, you have JavaScript included in the <head> of the page. You should include your JS just above the </body> tag, to speed page load times. CSS should be included in the <head> area.
The newly updated official jqplot example page "Bar Charts" shows this loading order as documentation:
Documented order:
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" type="text/css" hrf="../jquery.jqplot.min.css" />
Note that both the actual source and the documentation of the official page appears to have an error - jqplot is being loaded twice. However, they load the CSS in the header properly in the actual source - the example shows it loading in the footer with the JS which is improper. Here's the actual JS loading order in the example page:
Actual order on example page:
<!-- Don't touch this! -->
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<!-- Additional plugins go here -->
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.pieRenderer.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
<!-- End additional plugins -->
References: http://www.jqplot.com/deploy/dist/examples/barTest.html, http://developer.yahoo.com/performance/rules.html, personal experience
Same one as my previous question, but this time another problem - the search box doesnt appear when the search icon is clicked... it worked yesterday, but not any more!
http://sysport.co.uk/admin/grid/TEST.php
Should work the same as:
trirand.com/blog/jqgrid/jqgrid.html
Left hand side click new in 3.7 -> Multiple Search...
Really baffled me! It uses jquery-ui
It seems to me that you should change the list of the JavaScript files loaded from
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.8.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="src/grid.loader.js" type="text/javascript"></script>
to
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.8.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
or
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.8.custom.min.js" type="text/javascript"></script>
<script src="src/grid.loader.js" type="text/javascript"></script>
The file i18n/grid.locale-en.js must be loaded before jquery.jqGrid.min.js. The file src/grid.loader.js on the other side contain the same files which are already included in the jquery.jqGrid.min.js plus i18n/grid.locale-en.js (see developer version of jqGrid). Including two versions of jqGrid can follow to unpredictable results.