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
}
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 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
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.
I am new to Codeigniter. I am developing an application; for that I need to integrate FCKEditor with codeigniter. I tried it but it is not working. I am getting the an error like this - please help me. I tried as said in http://bagoesseptian.blogspot.in/2009/07/make-fckeditor-plugin-in-codeigniter.html
A PHP Error was encountered
Severity: Notice
Message: Undefined property: CI_Loader::$Fckeditor
Filename: admin/events.php
Line Number: 5
Fatal error: Call to a member function Create() on a non-object
This doesn't seems to be a good way. Try this way:
Steps:
1.Download CKEditor from http://ckeditor.com/download
2.unzip it in index directory of codeigniter
3.Use this syntax in header:
<script type="text/javascript" src="<?php echo $this->config->item('base_url'); ?>/ckeditor/ckeditor.js"></script>
4.Use this in body where you want to place editor:
<textarea name="n_notification" id="n_notification"></textarea>
5.Use this to initiate:
<script>
$(document).ready(function() {
CKEDITOR.replace( 'n_notification');
}
</script>
You can refer http://dwij.co.in/ckeditor-ckfinder-integration-using-php/ to integrate CKEditor with CKFinder(File Browser) if you want image uploader.