I struggle to make a very simple commonJS usage:
const Swal = require('sweetalert2');
Swal.fire('Hello world!');
What's wrong with it?
if I run the code, nothing happens, no error it thrown either.
You cannot use require() on browser/client-side JavaScript.
You need to grab SweetAlert2 from jsdelivr CDN by adding the following in your index.html
<script src="//cdn.jsdelivr.net/npm/sweetalert2#10"></script>
Then you can just run your JS
Swal.fire('Hello world!');
CodePen:
https://codepen.io/ahandsel/pen/QWGrOya
Reference:
Client on Node.js: Uncaught ReferenceError: require is not defined
Related
I have blade file named index-game.blade.php. And in one line of it, a line that reaches a js file under laravel public folder.
<script type="text/javascript" src="{{asset('game/')}}/js/CPreloader.js"></script>
So far so good.
Also inside CPreloader.js, I have lines like this.
s_oSpriteLibrary.addSprite("bg_menu","./sprites/bg_menu.jpg");
s_oSpriteLibrary.addSprite("progress_bar","./sprites/progress_bar.png");
At this stage, I get the following error in the console of my browser's devtools screen:
bg_menu.jpg:1 GET http://127.0.0.1:8000/games/sprites/bg_menu.jpg 404 (Not Found)
progress_bar.png:1 GET http://127.0.0.1:8000/games/sprites/progress_bar.png 404 (Not Found)
This is the link where I called "index-game.blade.php" => http://127.0.0.1:8000/games/slot1 (Let's pay attention to the games word here)
It works if i change my javascript file to
s_oSpriteLibrary.addSprite("bg_menu","../game/sprites/bg_menu.jpg");
s_oSpriteLibrary.addSprite("progress_bar","../game/sprites/progress_bar.png");
Because the correct link is this instead
http://127.0.0.1:8000/games/sprites/bg_menu.jpg // wrong
http://127.0.0.1:8000/game/sprites/bg_menu.jpg // true
I don't want to change the paths in all my javascript files. Because this is a game and there are as many pictures as possible. How do I correctly identify the laravel public folder in my external js files.
There is a package for that: https://github.com/tighten/ziggy
Some copy/paste from docs:
Install Ziggy into your Laravel app with
composer require tightenco/ziggy
Generate javascript route file:
php artisan ziggy:generate
Import in js file and use:
// app.js
import route from 'ziggy';
import { Ziggy } from './ziggy';
// ...
route('home', undefined, undefined, Ziggy);
I am working on a Laravel project using ckeditor. All was working fine with the editor and no errors in the console until I ran:
php artisan make:auth
The project login/register then worked but the editor was not displaying with the error in the console:
Uncaught TypeError: a.ui.space(...) is null
I tracked it down to the line added to the app.blade.php file during the auth build:
<script src="{{ asset('js/app.js') }}" defer></script>
If I remove defer the editor comes back but I now get the console error:
[Vue warn]: Cannot find element: #app
I have seen quite a number of posts regarding the editor error but they not helping me get the root of the issue. Any ideas how to fix the error correctly?
I think the problem is that the script is executed before the DOM element is loaded in the DOM. Or you've placed it before the target element and then when the script calls, it cant find the element.
So you could place the script in a load event handler, something like this:
window.onload = function () {
// your script here
}
window.addEventListener('load', function () {
// your script here
}
for a real time project i use laravel 8 and axios javascript library used to make HTTP requests.
the backend work great .
for example if go to this URL http://127.0.0.1:8000/api/usersthe following data will be show
[{"id":1,"name":"Hossein Khosromanesh","email":"test#gmail.com","email_verified_at":null,"created_at":"2022-01-22T19:52:12.000000Z","updated_at":"2022-01-22T19:52:12.000000Z"}]
the problem comes when i want to show the data to the frontend , we got error Uncaught TypeError: Cannot read properties of undefined (reading 'get') at users:84:18
actually get('/api/users') from window.axios.get('/api/users') is the main problem
the front end code :
<script>
window.axios.get('/api/users')
.then((response) => {
const usersElement = document.getElementById('users')
let users = response.data
users.ForEach((user,index) => {
let element = document.createElement('li')
element.setAttribute('id' , user.id)
element.innerText = user.name
usersElement.appendChild(element)
})
})
</script>
what's wrong was my code ? can somebody please help me and free me from darkness : )
If you are importing axios using a script tag in your html or blade file, you can use it with axios.get instead of window.axios.get.
As per My understanding from your code. You have to import axios in vue component or view where you consume API like below.
import axios from "axios";
Then You can use it like
axios.get('/api/users').then();
Note:- No need to register axios inside windows object in app.js for more information please refer below link
https://axios-http.com/docs/intro
If above method still not work for you then follow below step
Take backup of your code first then perform below step
Check your package.json file and verify axios is present over there or not.
If you don't find then install it using npm command
If you find then delete your package.lock.json file and run npm install command
Then follow import step mentioned above and try.
I am using highcharts.js lib in my project,I am getting the error as Uncaught Highcharts error #16: www.highcharts.com/errors/16.
I know that the error comes due to lib is loaded twice,but I need help that how I avoid this situation.
Basically I am using ajax request for getting the html response from .jsp file.
Scenario:
1.I have tree from d3.js where I am clicking on the tree node at that time I am sending the ajax request and getting whole page of html response,in that I have included the highchars.js lib
2.Right now I am on my product dashboard page,and right now I am clicking on back button which having ajax request,and after that again I am clicking on tree node which gives me my product dashboard page in this situation I am getting error as
Uncaught Highcharts error #16: www.highcharts.com/errors/16.
can anybody help me to overcome this situation.
Thanks,
Nandu.
This error happens the second time Highcharts or Highstock is loaded in the same page.
It means you should not include/load highchart.js file again.
I have simple solution over this, and this is working fine for me.
while sending ajax request pass some variable like 'call'
$.ajax({
url: "http://www.YourUrlHere.php?key=234&call=ajax",
success: function(result){
$('body').html(result);
}
});
And while you include/load highchart.js files check if this variable is set or not, if it is set then don't include/load this files again.
(belove example is for PHP)
<?php if(empty($_GET['call'])){ ?>
<script src="assets/Highcharts/code/highcharts.js" type="text/javascript"></script>
<script src="assets/Highcharts/code/modules/exporting.js" type="text/javascript"></script>
<?php } ?>
I am working on an application where I am trying to get the chat feature working by using the ConverseJS XMPP client on the front end and Openfire RTC on the back end.
I am working with Laravel 5 on the back end, and being the naive developer I am, I placed the files in the public folder and linked the JS and CSS file to the webpage.
<link rel="stylesheet" type="text/css" media="screen" href="/converse/css/converse.min.css">
<script src="/converse/builds/converse.min.js"></script>
It is working in Firefox and I can see the chat pluigin but in Chrome. The error I see in the console is:
Uncaught Error: See almond README: incorrect module build, no module
name
I am not sure what is causing this. Placing the files in the public folder and linking it to the pages, is this the right way? Or do I have to do something extra in Laravel 5 to get it running?
You receive this error because conversejs uses Almond as a AMD loader and it cannot handle modules without a name.
For example this will trow the error you mentioned:
$(function(){
...
});
So you should use something like this instead:
jQuery(function($){
...
});
More info here
Try to put the conversejs script last and wrap the code for jQuery plugins as mentioned before.