CKEditor setData() changes content but throws error - javascript

I have the following text area defined in my JSP page:
<textarea id="edit_subtaskstep_notes" name="edit_subtaskstep_notes" rows="15" cols="50"></textarea>
In my js file I am setting the content data as such:
CKEDITOR.instances.edit_subtaskstep_notes.setData("Hello World");
This successfully sets the ckeditor text box to contain "Hello World" when run but after this line is executed the following error is thrown in my output window:
Uncaught TypeError: undefined is not a function (14:21:03:488 | error, javascript)
at (anonymous function) (:197:29)
If I remove that line the error goes away but the data is no longer set. As it "seems" to work since the data is getting set is this some kind of bug with CKEditor v4? The download readme just says "CKEditor 4" but the linked version (which does not throw the error) says 4.4.7.
I've simplified the code to the following single file that still reproduces the error. The online version of the include gets rid of the error message. The downloaded version throws the error. I have not modified the download package in any way. As I stated before it still "works" I just don't like error messages:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="js/vendor/jquery-1.11.0.js"></script>
<script src="/ckeditor/ckeditor.js"></script>
<!--<script src="//cdn.ckeditor.com/4.4.7/basic/ckeditor.js"></script>-->
<script>
$(document).ready(function () {
var editInstance = CKEDITOR.replace('editor1');
});
function onClickChangeText() {
CKEDITOR.instances.editor1.setData("Hello World");
}
</script>
</head>
<body>
<textarea name="editor1" rows="10" cols="45"></textarea><br/>
<button onclick="onClickChangeText()">Change Text</button>
</body>

Looking at the Quickstart guide in the CKeditor download area it said to put the unzipped package in the root of the website. I had tried putting it in a sub-directory and linking to it from there. I'm guessing the main js file tries to link to the other resources it needs internally based off of root which would explain the partial functionality I was experiencing. After moving it to the root the error went away.

<!DOCTYPE html>
<html lang="en">
<head>
<title>CKEditor Sample</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>
<script>
var editInstance;
$(document).ready(function () {
editInstance = CKEDITOR.replace('editor1');
});
function onClickChangeText() {
editInstance.setData("Hello World");
}
</script>
</head>
<body>
<textarea name="editor1" rows="10" cols="45"></textarea><br/>
<button onclick="onClickChangeText()">Change Text</button>
</body>
</html>
Tried it out with above sample code works fine for me in all browsers. No errors found in the console.

Related

I get "function is not defined" when I move a Javascript function from in-line code, to a separate js file

I am trying to make a very simple thing work:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="text/js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
With js/test.js being found by the browser and containing:
function test() {
alert("test");
}
When opening the page and clicking the button, nothing happens and I can see in the console:
Uncaught ReferenceError: test is not defined
at HTMLButtonElement.onclick (test:7)
I have tried to move the script import above or under the button, or in the header.
I have tried to use "window.setlocale = function" in my js file.
I have tried to put nothing in the test method.
I checked for errors with JSLint (there is no error).
When I check the source, I can see the js file and the browser opens it when I click on it.
The only way I can get the Javascript to work is to write it inline...
Maybe the issue is with my environment?
In order to run this, I use an Apache server, and it is configured to serve this on localhost:8077. I works fine so far.
I use Laravel 7.10, PHP 7.4... working fine. To run this I created a simple route, that shows the view (a simple index.blade.php) with the HTML content copy/pasted above. It displays fine on "http://localhost:8077/test", no problem.
I also tried to use the laravel notation
<script src="{{ asset('js/test.js') }}" type="text/js"></script>
but it gives the same result.
I also have the PHP debugbar (a Laravel plugin) active, and it does not show any error. The view is properly loaded and displayed.
Also, I use PHPStorm, and it does not detect any issue.
It's been 2 days and I cannot makes this seemingly extremely basic thing to work, please help me m(_ _)m
Your script type is wrong. Use application/javascript in your script element to make your javascript work - or better yet, remove the type attribute and let browsers auto-detect the type:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="application/javascript"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
Without type attribute:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
you can try to add script tag to header tag. like this
<head>
<script type="text/javascript" src="path/to/script.js"></script>
<!--other script and also external css included over here-->
</head>
Try removing the function name in js/test.js
function() {
alert("test");
}
Please add the js file as a reference in the header section of your core file. External referencing.

Uncaught TypeError: google.translate.TranslateService is not a constructor

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<p>Привет Мир!</p>
<script type="text/javascript">var gtElInit = function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('ru', 'en', function () {});}</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=gtElInit&client=wt"></script>
</body>
</html>
Example 2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<p>Привет Мир!</p>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=gtElInit&client=wt"></script>
<script type="text/javascript">var gtElInit = function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('ru', 'en', function () {});}</script>
</body>
</html>
When run this page localy from desktop in Chrome - it works (russian words after page page load translate to english). So it works well in snippet here!
But when put page to website and run like normal site from web - it DONT WORK (russian words dont translate). Webpage here: http://www.shram.kiev.ua/bak/1.shtml
Error: Uncaught TypeError: google.translate.TranslateService is not a constructor
I really dont know js but i trully need fix. Help pls. And pls give fix to my topic, because i read all topics about "is not a constructor" but dont understand :(
You need to load the translate library before you try to use it. On an HTML page, <script> tags are loaded in the order they appear, so you need to move the script tag loading Google translate above the script tag where you are trying to use it.

IE 11 Permission Denied Javascript

I have created a trivial HTML/JS/Angular page (below) which when first rendered in IE 11, throws a Permission Denied exception. See images of the debugger console below. My IE version is 11.0.9 on Windows 7.
[EDIT] See source below. Meta tag included, but this does not resolve the issue. txs
<!DOCTYPE html>
<html ng-app="ie11bug">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE 11 Bug</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
</head>
<body>
<div ng-controller="AppController">
Hello {{pageTitle}}
</div>
<script>
var app = angular.module('ie11bug', []).controller('AppController', function($scope) {
$scope.pageTitle = "This will not appear when page is 1first loaded";
});
</script>
</body>
</html>
I have tried various versions of Angular from 1.4 to 1.6, same result. After clearing the cache and loading the page the error occurs. If I then reload, the page successfully renders.
The error always seems to be thrown when the factory method (called from the $exceptionHandler) assigns the $log service into the cache.
I also get Permission denied when simply trying to log to the console
<script>
console.log("hello");
</script>
Any help/ideas would be appreciated.

window.open() doesn't work correctly inside a JS function

I tried to create an updates list for my web, so that when I click on the relevant update- a new additional small html window will open and I will see the full update content.
This is the code I wrote:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p ng-controller="updatesCtrl">
<span ng-repeat="x in updates">
● {{x.title}}
<br><br>
</span>
</p>
<script>updates();</script>
</body>
</html>
script.js:
function updates(){
angular.module('myApp', []).controller('updatesCtrl', function($scope) {
$scope.updates = [
{title:"update1",update:"update1 content"},
{title:"update2",update:"update2 content"}
];
});
}
function showUpdate(title, update){
var win=window.open('updateWindow.html','newwindow','width=600, height=350');
win.document.getElementById("title").innerHTML=title;
win.document.getElementById("update").innerHTML=update;
return false;
}
updateWindow.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1 id="title"></h1>
<p id="update"></p>
</body>
</html>
I have few problems here:
1.When I clicked on the update link, the update window replaced the main page (index.html) window, and also was a full size page.
2. No change was made in the <h1> and the <p> of the updateWindow- although I wrote a script that was suppose to enter an html content to those places.
I don't understand why I didn't get what I expected with this code. Especially, I don't understand the first problem: if I only try to replace the onclick content inside index.html with this: "window.open('updateWindow.html','newwindow','width=600, height=350'); return false;" - I get a new additional window with a smaller size as expected (I won't get the update content inside this window, but at least that solves my first problem).
What is the problem with my code?
Try to use window.open('updateWindow.html','_blank','width=600, height=350'); instead
it looks to me that the window is not loading before you try to update html:
you can see that the html page has not even loaded yet and the dev tools says there is a Uncaught TypeError: Cannot set property 'innerHTML' of null try getting the new page to update it onloadin the update page.

simple jquery didnt work, and returning error

I have simple code to hide and show paragraph, and using jquery as the trigger
suddenly my jquery return errors,this is the error
SyntaxError: expected expression, got '<'
http://localhost/portofolio1/navigation_test.php/jquery-2.1.3.js
Line 1
ReferenceError: $ is not defined
http://localhost/portofolio1/navigation_test.php/
Line 9
if i use cdn it work perfectly as usual
this is my simple code to test my jquery
<!DOCTYPE html>
<html>
<head>
<title>Simple list</title>
<!-- <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>-->
<script src="jquery-2.1.3.js"></script>
<script>
$(function () {
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
<button onclick="">SHOW ALERT</button>
</body>
</html>
SOLVED
after i create new .php file and move ALL the code to the new file, it
work normal, i dont know the problem, this sure really weird
Mind the quotes:
<script src="./jquery-2.1.3.js"></script>
type is optional by the way.
Also check if http://localhost/portofolio1/navigation_test.php/jquery-2.1.3.js is pointing to jQuery. From the looks of your error, the script is pointing to something not jQuery, possibly an error page, hence SyntaxError: expected expression, got '<'. This error means that the browser expected a script, but returned HTML (signified by the script meeting an unexpected <).

Categories

Resources