Let's start with jQuery. I first ran:
npm install jquery-ui --save-dev
Then in my own file custom.js I added the following lines:
import $ from 'jquery';
$('#logo').on('click', function(){
alert("Hello")
})
In the main html file I imported the custom js file
<script src="{{ asset('js/custom.js') }}" type="module"></script>
Does not work and I get the error:
Uncaught TypeError: Error resolving module specifier “jquery”. Relative module specifiers must start with “./”, “../” or “/”.
If I remove the type=module from the main html file I get a different error:
Uncaught SyntaxError: import declarations may only appear at top level of a module.
What am I doing wrong and what step miss to install jQuery so it can work pls?
Next I tried Alpine JS
I cleared my custom.js file and tried to install alpine js doing the following:
npm install alpinejs
then in my empty custom.js file:
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
Then I ran
npm run dev
In the main html file I added the script tag
<script src="{{ asset('js/app.js') }}" defer></script>
and in the body to test if it works I added:
<div x-data="{ show: false }">
<button #click="show = !show">Show</button>
<h1 x-show="show">Alpine Js is working !</h1>
</div>
<hr>
<div x-data>
<button #click="alert('Alpine Js is working !')">Click</button>
</div>
If I click the button I get the following error in the console:
[Vue warn]: Property or method "alert" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>) 2 app.js:28785:15
[Vue warn]: Error in v-on handler: "TypeError: alert is not a function"
(found in <Root>) app.js:28785:15
TypeError: alert is not a function
click http://127.0.0.1:8000/js/app.js line 39872 > Function:3
invokeWithErrorHandling http://127.0.0.1:8000/js/app.js:30027
invoker http://127.0.0.1:8000/js/app.js:30352
_wrapper http://127.0.0.1:8000/js/app.js:35755
add$1 http://127.0.0.1:8000/js/app.js:35759
updateListeners http://127.0.0.1:8000/js/app.js:30384
updateDOMListeners http://127.0.0.1:8000/js/app.js:35789
invokeCreateHooks http://127.0.0.1:8000/js/app.js:34270
createElm http://127.0.0.1:8000/js/app.js:34157
createChildren http://127.0.0.1:8000/js/app.js:34254
createElm http://127.0.0.1:8000/js/app.js:34155
createChildren http://127.0.0.1:8000/js/app.js:34254
createElm http://127.0.0.1:8000/js/app.js:34155
patch http://127.0.0.1:8000/js/app.js:34717
_update http://127.0.0.1:8000/js/app.js:32119
updateComponent http://127.0.0.1:8000/js/app.js:32240
get http://127.0.0.1:8000/js/app.js:32654
I know I can just add a script line with a CDN with either of the scripts I need, but I would really like to know why this is not working as I followed the instructions carefully on more than one website.
regarding the Jquery import, is it as simple as defining it to window ?
like this
import jQuery from 'jquery';
window.$ = window.jQuery = jQuery;
I had problems with the Jquery syntax $("#alertbox").alert("close");
and as ".alert" is a bootstrap thing, i´m doing "import 'bootstrap';" in the file to be compiled.
But somehow i think the .js compiler removes it bc it cant se any use of it, Bc as you said i get it to work if i use the CDN link directly to the bootstrap in the header of the page.
But i think we both have some kind of missing command of "import it on this page because i use it"
Related
I want to use the package Sortablejs within my blade file.
Thus, I installed it with npm and created a sortable.js file inside my assets with this content
import Sortable from "sortablejs";
which is compiled into the public folder using webpack.mix.js
I expected that I could use it like this within my blade:
<script src="{{ asset('js/sortable.js') }}"></script>
<script type="text/javascript">
var documentlists = $('#documentlist');
Sortable.create(documentlists);
</script>
However, this results in the error:
Uncaught ReferenceError: Sortable is not defined
http://localhost:8004/admin/settings/businessagreement:715
Why can't I include it like this and how would I need to do it?
Your import statement needs to be in the same file as your Sortable code. Then you can run npm run watch to create your script with laravel mix.
Blade file loads Javascript files
<script src="{{ asset('js/sortable.js') }}"></script>
<script src="{{ asset('is/myscript.js') }}"></script>
myscript.js is generated by npm run watch
import Sortable from "sortablejs";
var documentlists = $('#documentlist');
var sortable = Sortable.create(documentlists);
Maybe it even works when leaving out the first script tag.
Ok First In app.js put
import Sortable from "sortablejs";
and make sure that it is imported => if you use vs code press ctrl + click on sortablejs if not just try
npm run watch then in your main blade import app.js
<script src="/js/app.js"></script>
then do whatever you want
I am new to laravel. I have setup a project with Vue and tried to add jquery code in one of the blade page but I am seeing following error in console. Jquery is working fine but the error in console tells that I am not doing it the right way.
Vue warn]: Error compiling template:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.
331|
332|
333|
| ^^^^^^^^
334| function refresh(value)
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
335| {
| ^^^^^^^^^
336| location.replace('jiras?status='+value);
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
337| }
Can anyone help me that where should I add jquery/javascript code so that it doesn't show any error in the console.
#extends('layout.app')
#section('content')
<your-vue-component></your-vue-component>
#endsection
and inside layout/app.blade.php you can put jquery. Probably above the app.js file
Thank you for your answer Daud.
I created a jquery.js file and added my code inside it. I put this file under public/js/ directory and add the path of it inside app.blade.php file as follows:
<script src="{{ asset('js/jquery.js') }}" defer></script>
The jquery worked fine console error is also gone. Thank you for your help.
I am trying ES6 module in google chrome. I would like to launch an alert() (in an imported function) when i click on the button.
js/notification.js is well loaded but when I click on the button I get an error:
Uncaught ReferenceError: createNotification is not defined
at HTMLButtonElement.onclick ((index):24) <- line of the button in index.html
index.html
<head>
<script type="module" src="js/main.js"></script>
</head>
<body>
<section id="container">
<button type="error" onclick="createNotification()">Create</button>
</section>
</body>
js/main.js
import {createNotification} from './notification.js';
js/notification.js
export function createNotification(type){
alert();
}
Functions used in onxyz-attribute-style handlers must be globals (it's one of the many reasons not to use them). Your function isn't a global, it's local to the module in which you're importing it. (Remember: Your main script is a module too; if it weren't, you couldn't use import in it.)
You could make it a global by assigning to a window property:
window.createNotification = createNotification;
but it would be much better to use modern event handling:
document.querySelector("#container button").addEventListener("click", createNotification);
Live example on plnkr, obviously will only work on cutting-edge browsers with module support.
Side note: As Andreas points out, type="error" isn't valid for button elements. Valid types are button, submit, or reset, with submit being the default. (I've changed it to button in the plnkr.)
I am rendering in the browser an HTML page which references a react class.
Unfortunately, I am getting this error:
Uncaught SyntaxError: Unexpected token <
On the third line of the following function (the <div> statement).
render: function() {
return (
<div>
<h1>Res</h1>
<resE data={this.state.data} />
</div>
);
It appears that the JSX is not transformed properly.
However, I am referencing JSXTransformer in the HTML file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
Furthermore, I tried adding the following line at the top of the file containing the react class:
/** #jsx React.DOM */
However, the error persisted.
Can you show the script that your code sits in?
I believe your issue is that you need to make sure that script has the attribute
type="text/jsx"
so to solve your issue do this;
<script type="text/jsx" src="app/restrictions/Main.js"></script>
Your JSX compiler script looks for any scripts that have that text/jsx attribute to know that it needs to turn that JSX code to raw JavaScript.
My javascript is loaded before on a blogger template here: http://fashioncherry.blogspot.no/ I've also tried to make sure it is only loaded once by adding the code:
function loadAdlinkAd(){
if( !adlinkAdLoaded ){
adlinkAdLoaded=true;
Before the post footer () I've added the code:
<a class='adlink-stylemag-btn' href='http://stylemag.no'> <img alt='stylemag' height='150' src='http://adlinkmedia.no/wp-content/uploads/2013/09/STYLEmag_knapp_150x150.png' width='150'/> </a>
<script type='text/javascript'>loadAdlinkAd();</script>
I tried the same thing on http://www.camillaabry.com/ and it worked great there. So I cannot understand why I get the uncaught referenceerror $ is not defined. I'm also a newbie when it comes to this, so I'm not sure how to fix it...:-(
$ is the variable jQuery is normally stored under. Include the jQuery library before you initialize the code that throws the error and it will probably work fine.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>