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
}
i have installed browsershot in my laravel project
I have installed puppeteer, installed chromium , my npm version is updated, but still i am unable to get the PDF of my simple html input , i have tried to take screenshot by URL method and save as image(It works), but my requirement is to generate PDF of my html.
This is my code in controller
$output=Browsershot::html($html)
->setNodeModulePath("/var/www/html/ProjectName/node_modules/")
->setChromePath("/usr/bin/chromium-browser")
->setNodeBinary('/usr/local/bin/node')
->setNpmBinary('/usr/local/bin/npm')
->showBackground()
->noSandbox()->timeout(60)
->save(public_path("DevTest.pdf");
Error Message:
"message": "The process "PATH=$PATH:/usr/local/bin NODE_PATH='/var/www/html/ProjectName/node_modules/' /usr/local/bin/node '/var/www/html/benesprint/vendor/spatie/browsershot/src/../bin/browser.js' '{"url":"file:\/\/\/tmp\/1933874416-0068512001600765779\/index.html","action":"pdf","options":{"path":"\/var\/www\/html\/ProjectName\/public\/DevTest.pdf","args":["--no-sandbox"],"viewport":{"width":800,"height":600},"displayHeaderFooter":false,"executablePath":"\/usr\/bin\/chromium-browser","timeout":60000,"printBackground":true}}'" exceeded the timeout of 60 seconds.",
**i would be grateful if you can help me out.**
i have similiar problem when browsershot inside container. and my step to resolve is like this:
Manual generate PDF from html using laravel tinker. if there is an error, try reinstall chromium and puppeteer library.
If success, then try remove all css and javascript links from html, and check for the result.
If success, then add --proxy-server="direct://" and --proxy-bypass-list=* into browsershot args
If step 3 is not working, then you can put css and javascript directly into view template or using php code to inclue those files like
<?php include public_path('css/styles.css') ?>
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 have been developing a Firefox extension using the Addon SDK and need to load some data that is stored in the same package, as a separate file: "data.json". It needs to be loaded from a page script, i.e. "loader.js" which is included in the "panel.html" using the script src tags.
The structure is like this:
+data
panel.html
panel.js
loader.js
data.json
...
+lib
main.js
...
panel.html has:
<script type="text/javascript" src="loader.js"></script>
Initially we stored the data simply into a js file as "data.js" and included from the "panel.html" using script src tags and it worked without any problems. However when we submitted the add-on to the Mozilla Addon site, this was addressed as one of the issues to fix, saying that we need to use a non-executable format, such as a JSON file to make it more safe.
Now the problem seems like "loader.js" is not allowed to make a AJAX request to "data.json". (Using the JQuery $.ajax() call returns with no success, giving the error code 0) So the solution I have been thinking of is to load "data.json" from "main.js" using the SDK's request() function and somehow pass it to the "loader.js", the page script. But that seems to be complicated since, as far as I understand, the data needs to be first sent to a content script, and then from there to the page script. And this needs to be happen when the page script is loading! I am confused about this since I am not sure if I am missing a much more practical solution, or is it really something complicated what I am trying to do, simply loading local JSON data in the package into a local page script?
Here's an example on the Add-on Builder that explores and approach to this.
First off, you can load the json file from data and parse it using self.data.load:
let data = require('self').data;
let taps_data = JSON.parse(data.load('taps.json'));
This loads synchronously, so it isn't something you want to do often, in the example it would only happen when the add-on firsst becomes active in a browsing session.
Next, you would use content scripts and message passing to pass the data in to the panel.
In the main.js script:
panel.on('show', function() {
if (!loaded)
panel.port.emit('taps-data', taps_data);
});
In the content script:
self.port.on('taps-data', function(data) {
$('#list').html('');
data.forEach(function(item) {
$('#list').append('<div>'+ item.name +'</div>');
});
self.port.emit('taps-loaded');
});
I do a bit of extra work to make sure I'm only emitting the data once. The data, FYI, is saved from the live beer keg data api from my local pub.
I've a couple of problems debugging code returned in an Ajax call - specifically, a function returned in json (errors don't get trapped in Firefox) - up to the point where I started debugging these problems in Internet Explorer (I think it's a firefox related problem, as Venkman doesn't detects those errors either) Do you know of any way to debug code returned in json from an Ajax call?
EDITED 03/04/2009 15:05
Thanks to all for your responses, but I think I didn't explain myself well enough. I know enough of Firebug to do basic debugging, but my problem happens when I fetch some code in an Ajax call that has a problem with it. Let's say we have the following HTML file (you'll need prototype in the same folder to make it work correctly):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<script>
function ajaxErrorTest()
{
new Ajax.Request('data.json', {
'method': 'get',
'onSuccess': function(data){
if(data.responseJSON.func)
data.responseJSON.func();}});
}
</script>
<input type="button" value="test" onclick="ajaxErrorTest();" />
</body>
</html>
and then, the contents of the data.json file is this:
{'func':function(){console.log('loaded...');alert('hey');}}
If you load the page in a browser and click the 'Test' button (and everything goes well) you'll get something in the console, and an alert box that says 'hey'. Now change the data.json file to this:
{'func':function(){console.log('loaded...');alerts('hey');}}
...and click the 'Test' button again (no need to reload the page ;-)
You get the console line, but no alert box... and no errors!!! this is the kind of errors I'm trying to debug.
Try clicking on the "Console" panel (it's a tab) and enabling it. You will find that any HTTP requests will be caught along with any information that they contain. I use this in order to view any JSON stored in the request as well as any errors (500/404/etc).
Also be aware that you have to enable the console panel on a per-domain basis. There are usually three subtabs: headers, post, and response. I usually use the post/response tabs quite a bit when I'm debugging my AJAX.
You probably want to use the Net tab and filter the requests for XMLHttpRequests (XHR) only.
Additional tips:
don't hesitate to console.dir(yourObject) in your code or directly in the console panel. This will give you the complete state and properties of your object.
check your request/response HTTP headers; sometimes it's just a matter of encoding.
if you don't know what event/user action triggered this XHR call, you can add console.trace() right before your AJAX call. This way you'll get the complete call stack.
Edit:
Code executed in another context
The only way I came up with is surrounding your code with an (ugly) try/catch.
I guess it's because the code is executed in another javascript context
<script>
function ajaxErrorTest()
{
new Ajax.Request('data.json', {
'method': 'get',
'onSuccess': function(data){
try{
if(data.responseJSON.func)
data.responseJSON.func();}});
} catch (err) {
console.dir(err);
}
}
</script>
This code gives a detailed error message:
ReferenceError: alerts is not defined
I really doubt changing the execution context will solve the problem.
I don't know how to this with prototype, but with jquery, it can be done easily:
$.ajax({
url: "test.html",
context: document.body,
success: function(){
$(this).addClass("done");
}
});
I'm not sure this issue involves the actual JSON that is retrieved. Can you try throwing an error directly in your onSuccess handler and see if it appears in the Firebug console? Something like this:
onSuccess: function() { alerts('hey'); }
If this is the case, then this issue should be fixed in Firebug 1.7.
I would use a combination of the net/console tabs in firefox.
Copy the json results from the Net Tab in Firefox.
Then paste the results into a variable in the console and try executing the offending function.
In this case, I pasted this:
var x = {'func':function(){console.log('loaded...');alerts('hey');}}
x.func();
When I run this, firebug gives me this error.
ReferenceError: alerts is not defined
As others have mentioned, view the JSON/Javascript returned by expanding the AJAX URL in the Console tab.
Then if you copy that to the run/eval panel of the Console tab (there's an up/down arrow in the bottom right, clicking the up will change it into a textarea on the right hand side, clicking down gives a single line running along the bottom).
If your Ajax call returns: function(){alert("hello")}
Then you can use something like the following:
x = eval('function(){alert("hello")}')
x();
This will allow you to execute the returned ajax.
To debug with breakpoints use the HTML view to create a tag (using Firebug's HTML view) and then simply paste the code into a function within this tag. You can then set breakpoints and fire it by calling the previous function from the run'/eval panel.
If this works fine then clearly there's a bug outside of your control, but you could simply workaround that by sending the json back as text/plain, assigning it to a variable and then evaluating it.
This one is simple, i allways use FIDDLER
to debug my ajax calls.
Fiddler is a Web Debugging Proxy which
logs all HTTP(S) traffic between your
computer and the Internet. Fiddler
allows you to inspect all HTTP(S)
traffic, set breakpoints, and "fiddle"
with incoming or outgoing data.
Fiddler includes a powerful
event-based scripting subsystem, and
can be extended using any .NET
language.
I use an HTTP Proxy Debugger called fiddler which has always worked fine for debugging my AJAX problems. It captures all HTTP requests and responses for you to view. Its freely available from http://www.fiddlertool.com/
the error you are trying to debug is pretty visible on native firefox console. it is: "tools" - "error console"
of course, you see it after it ocurrs but with an wrong line number (infinite resemblance)
I know the specific issue mentioned in the post is for firefox. I landed on this page when googling for generally how to debug java script that comes from an AJAX call and I'm sure a lot of others will.
I my case I was returning some HTML that had a script tag in it, if there was for example, a sytax error in the javascript that came down from the AJAX request in firebug you will get no exception, or errors. The AJAX content will just not render.
In the google chrome built debugger you'll get the error that has been raised, but you'll not be able to step through the code. If you wan't to step though then you'll need to make a dummy page for that.
Thats the best I've been able to get it so far.
When you use a library or javascript code that you have loaded it dynamically, you can use the phrase //# sourceURL=foo.js at the beginning of your javascript code that foo.js is the name that assign it. debugger will show it with that name.
This is true in chrome that I think in firebug.
In this case you can place a breakpoint in the dynamically loaded javascript ( or json ) code.
Use "debbuger;" as line of code where you wanna stop execution. In this way the loaded source code will be available in the source section of your debbuger. I know for sure it works on chrome.