I've setup an Admin area within MVC 3 application and while everything is working when I reference files from the root Scripts, Styles and Images folder, it doesn't work when I created those folders under /Areas/admin/ and referenced them like this:
#Script.Include("~/admin/Scripts/superfish-1.4.8/js/superfish.js")
Please note that this Script.Include helper is something that I have that essentially spits out this:
<script type="text/javascript" src="/admin/Scripts/superfish-1.4.8/js/superfish.js"></script>
So the helper is working and everything is fine when I reference like this
#Script.Include("~/Scripts/superfish-1.4.8/js/superfish.js")
but not when I introduce the area name in there. It results in a 404 Error.
That's because the actual path to your script is the following:
#Script.Include("~/areas/admin/Scripts/superfish-1.4.8/js/superfish.js")
which should render:
<script type="text/javascript" src="/areas/admin/Scripts/superfish-1.4.8/js/superfish.js"></script>
Notice the Areas prefix that I added.
Related
I don't know, how much time I lost looking for solution for this issue. I wanted to use Chart.js in my Laravel project, so I followed instructions described here.
composer require fx3costa/laravelchartjs (runned)
Fx3costa\LaravelChartJs\Providers\ChartjsServiceProvider::class (added in the right place)
npm i chart.js (used to install chart.js)
In my controller and blade I used code from example 1 (Line Chart / Radar Chart)
After that the error appeared: Uncaught ReferenceError: Chart is not defined. Before and after that I was trying different solutions, but always something was wrong and I think this one should work for me. I probably missed something obvious, but very important.
Have you any ideas?
Should I add something to webpack.mix.js or bootstrap.js files after installing with npm?
EDIT:
If I put <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script> in my head section of blade, everything is working fine, but I'm using laravel-mix to use a locale file instead of link.
Chart.js must be loaded before content in order to use it in any Controller. I was loading my laravel-mix variables after HTML content (because it includes some big libralies like jQuery etc.), so that's why it couldn't work.
SOLUTION:
At the end of my document I still have my previous script
<script src="{{ asset('js/app.js') }}" ></script>
But now I made a new loadBefore.js file in resources/js directory with one line of code:
require('chart.js/dist/chart.js');
If there will be any reason to put there any other javascript code, it will be easy to put it there.
I also added this file to webpack.mix.js like this:
mix.js('resources/js/loadBefore.js', 'public/js').sourceMaps();
And of course at the end I added this script to the head section in my blade:
<script src="{{ asset('js/loadBefore.js') }}"></script>
Now everything is working and I'm using already existing in my Laravel files chart.js file. I don't know, someone knows an easier solution, so for now I'm accepting my answer, but I'm still open for suggestions.
why you just dont copy the content of
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
in a file at your local, for example: /public/js/chart.js
and load it in head
<script src="{{asset('js/chart.js')}}"></script>
I've a problem with my website, the layout load properly (and CSS) but no JS and page in yield.
I've copy paste the layout of my other website, inclued tje JS and CSS file, I do not understand why it does not work while on other sites it's good..
Code for include the JS and CSS file: <script src="{{url('js/jquery.min.js')}}"></script>
As you can see, the page is empty, and this is not normal.
Image of error:
Ahh... ok.
I've forget to DL From:: into my project. Sorry
I had the same problem when I was creating a recent Laravel project however mine was narrowed down too 2 problems. 1 being the JS had an error and 2nd was the way I called it.
I fixed it by doing the following:
<script type="text/javascript" src="{!! asset('js/jquery.min.js') !!}"></script>
I would like to evaluate the features of pivot grid using simple test html without cmd.
I've read the information from those links but I still couldn't install a working environment
https://docs.sencha.com/extjs/6.0/co...ivot_grid.html
https://www.sencha.com/forum/showthr...out-Sencha-Cmd
http://se.sencha.com/setup-guide/
I've downloaded the core framework ('ext-6.0.1-trial.zip')
and pivot addon ('ext-addons-6.0.1-trial.zip') from sencha site
and unpacked them on my test web server:
www.mydummy.server.org/lib/extjs/ext-6.0.0/ <- framework
www.mydummy.server.org/lib/extjs/package/ <- addon
and tested it calling the pivots in kitchensink example with:
www.mydummy.server.org/lib/extjs/ext-6.0.0/examples/kitchensink/index.html
in such setup they start without errors.
The target location of the addon is a bit strange for me,
I was sure I should unpack addon to the package directory of the framework
www.mydummy.server.org/lib/extjs/ext-6.0.0/package/
but then the kitchensink example doesn't work
(kitchensink calls pivot with ../../../package/pivot )
Now I wonder how should I include framework and addon in own html example,
I've tried something like:
<link href="www.mydummy.server.org/lib/extjs/ext-6.0.0/build/classic/theme-neptune/resources/theme-neptune-all.css">
<script src="www.mydummy.server.org/lib/extjs/ext-6.0.0/build/ext-all.js"></script>
<link href="www.mydummy.server.org/lib/extjs/packages/pivot/build/neptune/resources/pivot-all.css">
<script src="www.mydummy.server.org/lib/extjs/packages/pivot/build/pivot.js"'></script>
<script src="www.mydummy.server.org/lib/extjs/packages/exporter/build/exporter.js"'></script>
The links are ok (no http error) but the simple pivot is not rendered
and framework couldn't load further classes:
[Ext.Loader] Some requested files failed to load.
What is the correct setup of extjs and pivot without cmd?
Thank you,
Annie
Couple things here.
For the KitchenSink, if you open up www.mydummy.server.org/lib/extjs/ext-6.0.0/ in your browser you will be shown an index.html. There will be a green button to show the examples which will point to www.mydummy.server.org/lib/extjs/ext-6.0.0/build/examples/index.html (notice the build dir in there). Then if you click on the KitchenSink it will load from www.mydummy.server.org/lib/extjs/ext-6.0.0/build/examples/kitchensink/ (once again, notice the build dir). This is due to the KitchenSink being a Cmd app which will build to that build dir. The examples dir outside the build dir is the development version of the app which is why we still provide it for the source.
Next, about how to use the pivot grid's Cmd package outside of the Cmd package. we build the Cmd package so if you look in the package's build dir you should see a built JavaScript and CSS file that you can load via <script> and <link> in your HTML.
<html>
<head>
<title>Pivot Grid Test</title>
<link href="http://releases/ext/6.0.1.250/build/classic/theme-neptune/resources/theme-neptune-all.css">
<script src="http://releases/ext/6.0.1.250/build/ext-all.js"></script>
<link href="http://localhost/ext-addons-6.0.1/packages/pivot/build/neptune/resources/pivot-all.css">
<script src="http://localhost/ext-addons-6.0.1/packages/exporter/build/exporter.js"></script>
<script src="http://localhost/ext-addons-6.0.1/packages/pivot/build/pivot.js"></script>
</head>
<body></body>
</html>
Notice I have the exporter.js loading before pivot.js and this mostly works except that I do see something that I'd call a bug for us. In pivot.js, we define Ext.ux.ajax.PivotSimlet which extends Ext.ux.ajax.JsonSimlet (which is in the framework's ux package). This is fine to extend like this but PivotSimlet would only be needed if you want to have simulated data in your application (which most wouldn't unless in dev). Two ways you can fix this, remove that class from pivot.js or include the ux's JavaScript/CSS (however that package contains a lot of code that you may not need).
Thanks a lot for your explanation.
I've added these classes to get an working example:
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/Simlet.js"</script>
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/DataSimlet.js"</script>
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/JsonSimlet.js"</script>
is there any reason for something to work in page inspector and not in real debug mode?
In particular I'm using fullcalendar.min.js (JQuery plugin) in some tab content and I see it very well in page inspector but when debug the calander is not shown..
in header:
<link rel="stylesheet" href="./../../Content/fullcalendar.css" type="text/css" media="all" />
<script src="./../../Scripts/js/fullcalendar.min.js"></script>
in body:
<section class="tab events-tab">
<section class="events-tab-inner">
<div id="calendar"></div>
</section>
</section>
in console of the web page loading I have the below errors (I'm not sure they are directly related to my calendar thing):
GET http://localhost:3516/SITE/css/images/star-off.png 404 (Not Found) jquery.min.js:2
Invalid App Id: Must be a number or numeric string representing the application id. all.js:56
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.min.js:3
FB.getLoginStatus() called before calling FB.init(). all.js:56
GET http://localhost:3516/SITE/css/images/star-off.png 404 (Not Found) jquery.min.js:2
Based on your console output that you've included above, it seems that there are a few errors. Not sure why they would work in page inspector and not debug though. It seems like it should be breaking everywhere. Let's approach each error one by one:
1. Invalid Image Paths
It appears that you may be using jQuery UI for some features within your code. The jQuery UI suite contains images located in the /images directory when you download the .zip file that the CSS references as background-images. These images are expected to be nested on directory in from the location of the CSS file. For example,
[CSS Directory]
-> jquery-ui.min.css
[images]
-> star-off.png
-> ...
-> etc.
The only way to change this structure is to modify the relative urls within the minified jQuery UI CSS file.
2. Facebook JavaScript SDK error
I have never personally used the Facebook JavaScript SDK. However, that is what it appears you are using. From the error it sounds like you never initialize the Facebook object via FB.init() before you call FB.getLoginStatus(). Try this:
<script type="text/javascript">
/* Locate your FB.getLoginStatus() call and place FB.init() before it */
FB.init();
FB.getLoginStatus();
</script>
Other than that, you may need to refer to their documentation for how to properly initialize the FB object for use.
Hope this helps. Good luck and happy coding! :)
I am using asp.net mvc3. I have two script files on my web site like these:
<script type="text/jscript" src="/SiteName/lib/jquery/menus.js"></script>
<script type="text/jscript" src="/SiteName/lib/jquery/dialogs.js"></script>
These are real paths for these two .js files where the SiteName directory is on the root of my website.
Now when the site rendered, i want to be these pathes like:
<script type="text/jscript" src="/lib/jquery/menus.js"></script>
<script type="text/jscript" src="/lib/jquery/dialogs.js"></script>
As a result, the "SiteName" portion is deleted from the path! but really it is available!
Yet the browser must be able to load these scripts.
I think this must be done by routes.MapRoute or like these!
You can use BundleConfig to achieve this. You can create styles and script bundles that have a virtual path with the added benefit of minification. If you add multiple scripts into one bundle, it'll join and minify both into one virtual script. e.g.:
bundles.Add(new ScriptBundle("~/lib/jquery").Include(
"~/SiteName/lib/jquery/menus.js",
"~/SiteName/lib/jquery/dialogs.js"));
On page render, it'll show up as:
<script type="text/javascript" src="~/lib/jquery"></script>
From memory this wasn't there by default in MVC3, but it looks pretty easy to implement if you refer to this answer: https://stackoverflow.com/a/12754108/769083