I am using Angular UI Bootstrap with my Laravel Framework 5. I am using Rating directive. I see following error :
TypeError: Cannot read property '0' of null
at Object.ib.functionCall (angular.js:12405)
at n.$get.n.$digest (angular.js:14300)
at n.$get.n.$apply (angular.js:14571)
at eg.$$debounceViewValueCommit (angular.js:23391)
at eg.$setViewValue (angular.js:23363)
at HTMLInputElement.l (angular.js:19784)
at HTMLInputElement.m.event.dispatch (jquery.js:4670)
at HTMLInputElement.m.event.add.r.handle (jquery.js:4338)(anonymous function) # angular.js:11655$get # angular.js:8596$get.n.$digest # angular.js:14326$get.n.$apply # angular.js:14571eg.$$debounceViewValueCommit # angular.js:23391eg.$setViewValue # angular.js:23363l # angular.js:19784m.event.dispatch # jquery.js:4670m.event.add.r.handle # jquery.js:4338
angular.js:11655 Error: [$compile:tplrt] http://errors.angularjs.org/1.3.15/$compile/tplrt?p0=datepickerPopupWrap&p1=template%2Fdatepicker%2Fpopup.html
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:6:417
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:65:275
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:112:113
at n.$get.n.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:15)
at n.$get.n.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:123:106)
at n.$get.n.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:293)
at l (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:81:240)
at M (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:85:342)
at XMLHttpRequest.F.onload (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:86:367)
I think this error is coming because templates are not loading properly.
I have put "template folder" in root. I have also tried to put in "public" folder. But still same problem
Actual error from angular site is
Template for directive 'datepickerPopupWrap' must have exactly one root element. template/datepicker/popup.html
Please answer i am stuck. Thanks in advance
If you are using "ui-bootstrap-tpls.min.js", you don't have to include templates folder. Templates are wrtten inline in JS file.
add Angular UI bootstrap's css files in public/css folder and javascript files in public/js. then in your codebase when you need to load Angular's files type this:
<link href="{{asset('css/your-angular-ui.css')}}" rel="stylesheet">
and
<script type="text/javascript" src="{{asset('js/your-angular-ui.js')}}"></script>
if it's not working then it's not Laravel 5's problem. 100% sure.
Related
I am trying to use #yaireo/tagify in my Laravel 9 project. (https://www.npmjs.com/package/#yaireo/tagify)
I imported it with npm i #yaireo/tagify --save
Then put import Tagify from '#yaireo/tagify' in my app.js file, then ran npm run build on my project.
I can verify the code gets added to the project as it appears in my previously empty app.abc123.js file by looking at the sources within Chrome. The file looks compressed / optimized which I expect to happen.
However, I get this error in the console jquery-3.6.1.min.js:2 Uncaught ReferenceError: Tagify is not defined
I've also tried copying the jQuery.tagify.min.js file to /resources/js/jQuery.tagify.min.js and then using #vite(['resources/js/jQuery.tagify.min.js']) within the blade template, then npm run build to build the files. Again this works, and the file is included in the sources, but the exact same error.
The only way I were able to get it to work without the error was by copying jQuery.tagify.min.js directly to /public/build/assets/jQuery.tagify.min.js and using <script type="text/javascript" src="/build/assets/jQuery.tagify.min.js"></script> in the blade template.
This says to me that vite seems to be doing something when it's trying to compress/optimise the file that breaks the functionality.
I recall running into the same issues with bootstrap and JQuery and ultimately decided to reference the CDN for those files.
This is the raw jQuery.tagify.min.js file: https://pastebin.com/PzK7ps25
This is the file after being processed by vite / npm run build: https://pastebin.com/1FCDXyty
What am I doing wrong?
Edit:
Not that it should have any bearing on the issue, the code I am using within the blade template is:
<input name='basic' value='tag1, tag2, group 3, etc...'>
<script>
$( document ).ready(function() {
// The DOM element you wish to replace with Tagify
var input = document.querySelector('input[name=basic]');
// initialize Tagify on the above input node reference
new Tagify(input)
});
</script>
Problem:
I have a Hugo site with pretty standard setup. It uses asset pipeline to process SASS. It imports bootstrap, font-awesome, and also uses resources.ExecuteAsTemplate (please do check out main.css file). CSS resources are being generated properly (I checked resources/_gen/assets/scss/sass) but the .css file in public directory is an empty file. I am not able to find any problems in the code. See the code here, site here. I tried creating a new project with same head.html file and .scss files, and it generated CSS resources, and had them in the public directory properly.
Additional info:
Related files:
head.html
main.scss
Currently, I am not using PostCSS; just have the config file created. Would be replacing minify with postCSS on line 13 in head.html once empty .css file problem is solved.
Output of hugo version:
Hugo Static Site Generator v0.57.2-A849CB2D/extended linux/amd64 BuildDate: 2019-08-17T17:57:54Z
I would gladly provide any additional information if required. Please help!
In the head.html file, link tag is:
<link rel="stylesheet" integrity="{{ $css.Data.Integrity }}" href="{{ $css.Permalink }}">
Changing the link tag with following:
<link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}">
fixes the issue.
It seems that Hugo requires user to first call .Permalink of the asset and then only other related functions or variables.
See related discussion on Hugo Discourse here.
I am trying to figure out laravel for a small project I am working on.
I want to load a js file on a particular view(not the entire app) so I have created a client.js file in resources/assets/js
In the view --
<script src="{{ mix('js/client.js') }}"></script>
in webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js', 'resources/assets/js/client.js')
And run npm run dev which doesn't return any errors.
However when I try to load the view in question I get the error --
Undefined index: /js/client.js (View: /var/www/resources/views/devices/search.blade.php)
What am I doing wrong/ missing?
mix.js(from, to) expects 2 arguments. The file to transform and location where to transform it to. So the resources/assets/js/client.js isn't transforming anywhere.
You probably want to do this:
mix.js('resources/assets/js/app.js', 'public/js/app.js')
.js('resources/assets/js/client.js', 'public/js/client.js)
I am developing a Web Application. I am using Laravel 5.3. I also want to use SASS. This is my first time of using SASS. I learned from this tutorial- http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-sass. Now I am trying to integrate SASS with Laravel. I just started building project. So I decided to use this one - https://github.com/panique/laravel-sass.
I included this in composer.json
"require-dev": {
"panique/laravel-sass": "1.0"
}
I added this line in public/index.php
SassCompiler::run("scss/", "css/");
So my index.php in public folder look like this
Then I run "update composer" command in terminal. Installation worked well in terminal.
So now I need to try on SASS and make sure it is working or not.
So I created two file in public folder.
public/css/style.css
and
public/scss/style.scss
Then I created a view, hello.blade.php. This is the html.
<!DOCTYPE html>
<html>
<head>
<title>SASS</title>
<link rel="stylesheet" type="text/css" href="{{ url('css/style.css') }}">
</head>
<body>
<h1 class="heading">Let's sass. Just change color.</h1>
</body>
</html>
Then I added this lines in public/scss/style.scss
$red: #FF4848
.heading
color:$red
Then I configure Laravel route like this.
Route::get('hello', function () {
return View('hello');
});
When I access the URL from browser, it is giving me this error.
Fatal error: Uncaught Exception: parse error: failed at $color : red
line: 1 in
C:\xampp\htdocs\whatsuppathein\vendor\leafo\scssphp\scss.inc.php:4108
Stack trace: #0
C:\xampp\htdocs\whatsuppathein\vendor\leafo\scssphp\scss.inc.php(2761):
scss_parser->throwParseError() #1
C:\xampp\htdocs\whatsuppathein\vendor\leafo\scssphp\scss.inc.php(121):
scss_parser->parse('$color : red\r\n\r...') #2
C:\xampp\htdocs\whatsuppathein\vendor\panique\laravel-sass\sass-compiler.php(53):
scssc->compile('$color : red\r\n\r...') #3
C:\xampp\htdocs\whatsuppathein\public\index.php(50):
SassCompiler::run('scss/', 'css/') #4 {main} thrown in
C:\xampp\htdocs\whatsuppathein\vendor\leafo\scssphp\scss.inc.php on
line 4108
What is wrong with my code?
When I replace this line
SassCompiler::run("scss/", "css/");
with this
SassCompiler::run("public/scss/", "public/css/");
in public/index.php, it is not throwing error. But not changing any CSS. Not changing the font color.
Laravel uses gulp to transpile dependencies and it comes built it when you do npm install from your project direcftory.
Open up your resources/scss/app.scss file and you can perform #import statments to your own files.
The gulp.js file in your project's root directory contains the sass transpiling.
I'm getting mad with this issue.
Basically there are some css and js files which are opened correctly from laravel. But some other js and css files are recognized as routes!
For example: http://localhost:8000/assets/ammap/themes/light.js
I'm using the following code to access assets from templates:
<script type="text/javascript" src="{!! asset("assets/ammap/themes/light.js") !!}"></script>
Obviously the path is correct and the file exists.
I've solved the problem.
I'm using OS X and it was a permission issue.
chmod -R 0777 public
Then set everyone to "Read & Write" into file permissions.