CKEditor option startupMode causes js error - javascript

I was trying to find out what is wrong with this code for a few hours. After double-clicking on divs CKEditor correctly opens and after pressing down the button it correctly hides. But after clicking again on div it doesn't want to open again and then firebug returns an error "p is null" in line 86 in ckeditor.js.
Finally it turned out that the problem disappears when I turn off the option "startupMode: 'source'". Has anyone an idea what this behaviour is caused by? Is it a bug in CKEditor or I do something wrong.
Version of CKEditor I use is 3.6.4.
Thanks in advance for any help!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/admin/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<h2>Vars</h2>
<table>
<tbody>
<tr>
<td>Cell no 1.1</td>
<td><div class="editable" id="cell1">Cell no 1.2</div></td>
</tr>
<tr>
<td>Cell no 2.1</td>
<td><div class="editable" id="cell2">Cell no 2.2</div></td>
</tr>
</tbody>
</table>
<input type="submit" id="submit" value="Close"/>
<script type="text/javascript">
editor = false;
function destroy_cke() {
if (editor) {
editor.updateElement();
editor.destroy();
}
}
function replace_div(div) {
destroy_cke();
editor = CKEDITOR.replace(div,{
startupMode: 'source',
});
}
$(document).ready (function() {
$('.editable').dblclick(function(e) {
e.stopPropagation();
var element = e.target || e.srcElement;
while (element.nodeName.toLowerCase() != 'html' && (element.nodeName.toLowerCase() != 'div' || element.className.indexOf('editable') == -1 )) element = element.parentNode;
replace_div(element);
});
$('#submit').click(function(){
destroy_cke();
});
});
</script>
</body>
</html>

Answered at http://cksource.com/forums/viewtopic.php?f=11&t=26734&p=67792#p67792
The destroy_cke function isn't clearing the editor variable.

Related

How to display INPUT TYPE on Selection?

I know its a simple but i tried many solutions but i failed. I have a form on which I use <select> tag in <option> i use two values coo and uh i want that when user select uh then it display an extra input type field.
Here is my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌​
<script>
$('#s_designation').on('change',function(){
if ($(this).val() === "uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
</script>
<title>Untitled Document</title>
</head>
<body>
<label for="db">Choose type</label>
<select name="s_designation" id="s_designation">
<option value="coo">Chief Operating Officer</option>
<option value="uh">Unit Head</option>
</select>
<div id="uh" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Designation"/>
</div>
</body>
</html>
I just tested your code and it works fine:
Link:https://jsfiddle.net/g95pyqw6/
Edit: But that could be because of JSfiddle.
Try to uncomment the first line of Javascript, that should help! :-)
I hope I could help you out. If you need more help, feel free to write a comment :-)
You jQuery code is executing before the document loads, which means the select element is not visible to jQuery, and jQuery won't throws error if it didn't find any given element.
use the $(document).ready like the following, it will load your code after document loads:
<head>
-------
-------
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function() {
$('#s_designation').on('change',function(){
if( $(this).val()==="uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
});
</script>
-------
</head>
if you want to execute jQuery code after page loading
you simply place your jQuery code before </body> tag like the following:
<body>
-------
-------
<script>
$('#s_designation').on('change',function(){
if( $(this).val()==="uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
</script>
</body>
here your Working code (checked on my local machine) answer is here for your problem Jquery not working from Google CND
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌​
<script>
$(function() {
$('#s_designation').on('change',function(){
if( $(this).val()=="uh"){
$("#uh").show()
}
else{
$("#uh").hide()
}
});});
</script>
<title>Untitled Document</title>
</head>
<body>
<label for="db">Choose type</label>
<select name="s_designation" id="s_designation">
<option value="coo">Chief Operating Officer</option>
<option value="uh">Unit Head</option>
</select>
<div id="uh" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Designation"/>
</div>
</body>
</html>
In your code you have commented the $(function() line :
You are also missing the required jquery library files
Please add this to your html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Fiddle: http://jsfiddle.net/0mqze5ny/
$(function () {
$('#s_designation').on('change', function () {
if ($(this).val() === "uh") {
$("#uh").show()
} else {
$("#uh").hide()
}
});
})

Editing Javascript from textarea

I managed to create a HTML/CSS editor, at http://hexagonest.tk/code/, but I can't manage it to work Javascript. I'm not sure why, all the code is valid. For example, go on this jfiddle, and type in this code:
<script>
function dothis(){
document.getElementById("thewow").innerHTML = "poop!";
}
</script>
<button type="button" onclick="dothis()">Hi</button>
<p id="thewow">Hi</p>
In theory, it should work, yes? Even when I right click>inspect element, it shows that there is a valid tag. What's wrong with this?
If you didn't catch it, my problem is that Javascript is now working with my live HTML editor.
try this
<button type="button" onclick="document.getElementById('thewow').innerHTML = 'poop!'">try me</button>
Hi
---addtional---
use this script to play with your code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
textarea, iframe {width:200px;height:200px;}
td {vertical-align:top;text-align:center;}
</style>
<script type="text/javascript">
function tryit()
{
var html = document.getElementById("code").value;
ifrm = document.getElementById("output");
var doc = ifrm.contentDocument || ifrm.contentWindow.document;
doc.open();
doc.write(html);
doc.close();
}
</script>
</head>
<body>
<table cellspacing="4" cellpadding="0" border="0">
<tr>
<td>
<textarea id="code"><html><body>Hello World!</body></html></textarea>
<br />
<button onclick="tryit();">Do it!</button>
</td>
<td>
<iframe id="output"></iframe>
</td>
</tr>
</table>
</body>
</html>
source http://w3schools.invisionzone.com/index.php?showtopic=23599
You should use the eval() function from JavaScript.
more documentation here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
Then you should have one form for the JavaScript and another for the html.
Beware about security issues that you can have with eval() (XSS vulnerabilities, etc...).

JQuery dynamic search results not working

I am new to JQuery and I am trying to make a search box. When I type in the search box it doesn't do anything and I don't know why. Any help would be appreciated. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search Test</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $cells = $("td");
$("#search").keyup(function() {
var val = $.trim(this.value).toUpperCase();
if (val === "")
$cells.parent().show();
else {
$cells.parent().hide();
$cells.filter(function() {
return -1 != $(this).text().toUpperCase().indexOf(val); }).parent().show();
}
});
});​
</script>
<form action="" method="post">
<label for="search">Search</label>
<input type="text" name="search" id="search" class="inputfield" />
</form>
<table border="0" align="left">
<tr><td>Gripper 25x8-12 GR25812</td></tr>
<tr><td>Gripper 25x10-12 GR251012</td></tr>
<tr><td>Gripper 26x9-12 GR26912</td></tr>
<tr><td>Gripper 26x12-12 GR261212</td></tr>
</table>
</body>
</html>
This is working code I have tried it in Fiddle and it works
Try to search 25x in input box you will find the output.
Updated
May be there are some zero-width spaces between your code,
I check and I got Error in your code like,
Uncaught SyntaxError: Unexpected token ILLEGAL
Reference Chrome Uncaught Syntax Error: Unexpected Token ILLEGAL
And if you rewrite above code like,
$(function(){
var $cells = $("td");
$("#search").keyup(function() {
var val = $.trim($(this).val()).toUpperCase();
if (val === "")
$cells.parent().show();
else {
$cells.parent().hide();
$cells.filter(function() {return -1 != $(this).text().toUpperCase().indexOf(val);}).parent().show();
}
});
})
Then I found it works

Javascript alert displaying as soon as the page loads

I'm a newbee in Javascript.
The error in the following code is that the alert message is displayed as soon as the page loads. Please help me overcome this error. And when I hit the submit button, the alert isn't displayed but rather the next link is opened.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Delete Book</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/default.css" />
</head>
<body id="index_page">
<div id="wrapper">
<div id="header">
<h1 align="left">Library</h1>
</div>
<ul id="navigation">
<li id="index">FAQ</li>
</ul>
<div id="content">
<div id="main_content">
<h2>Delete book</h2>
<h4>Enter details of the book</h4>
<FORM action="del_book_action.php" method="post" >
<TABLE WIDTH="70%" >
<TR>
<TH width="60%">Enter book ID:</TH>
<TD width="50%"><INPUT TYPE="text" name="id" id="book_id"></TD>
</tr>
<TR>
<TH></TH>
<TD width="50%"><INPUT TYPE="submit" Value="Submit" onclick="validate_f()"></TD>
</tr>
</TABLE>
</FORM>
</div>
<p id="footer">#AntonyAjay,2012</p>
</div>
<script language="javascript">
window.onload=function validate_f()
{
var y=document.getElementById("book_id").value;
if(y==""||isNaN(x))
{
alert("Book Id should be numeric");
}
}
</script>
</body>
</html>
You're running the function on page load. Change this:
window.onload=function validate_f()
to:
function validate_f()
See if changing isNaN(x) to isNaN(y) fixes things.
Remove the windows on load the intention of the code is to validate upon submit. What is happening is that the function is being called upon page load
You pass a reference to a function to the window.onload and not the actual call.
<script>
window.onload = function(){
alert('test');
}
</script>
It is because you are calling the function onclick. Make two changes.Don't use the function on load. Use below html change and script
<INPUT TYPE="submit" Value="Submit" onclick="return validate_f()">
function validate_f()
{
var y=document.getElementById("book_id").value;
if(y==""||isNaN(x))
{
alert("Book Id should be numeric");
return false;
}
}

How to modify this javascript code to only expand the hidden text

I want to expand hidden text on a webpage and after some (re)search on google i came across the following code:
<!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">
<head>
<title>Test</title>
<script type="text/javascript">
function Expand(node)
{
// Change the image (if there is an image)
if (node.childNodes.length > 0)
{
if (node.firstChild.tagName == "IMG")
{
node.firstChild.src = "minus.gif";
}
}
node.nextSibling.style.display = '';
}
function Collapse(node)
{
// Change the image (if there is an image)
if (node.childNodes.length > 0)
{
if (node.firstChild.tagName == "IMG")
{
node.firstChild.src = "plus.gif";
}
}
node.nextSibling.style.display = 'none';
}
function Toggle(node)
{
// Unfold the branch if it isn't visible
if (node.nextSibling.style.display == 'none')
{
Expand(node);
}
// Collapse the branch if it IS visible
else
{
Collapse(node);
}
node.childNodes[1].nodeValue = (node.nextSibling.style.display == 'none')? 'More...' : 'Less...';
}
</script>
</head>
<body>
<a onclick="Toggle(this)" style="cursor:pointer;"><img src="plus.gif" alt="Expand/Collapse" /> More...</a><p style="display:none;">This is a sample of the expanded text that will show up when "+ More..." is clicked</p>
</body>
</html>
Now the script displays a .gif image of a plus sign(expand) with 'More...' beside it and when the .gif file or the 'More...' is clicked the hidden text appears and the plus.gif is replaced with a minus.gif and 'More...' changes to 'Less...'
but i want to implement it in another way, i want that once the expand (plus.gif) is clicked, no other .gif should appear again, i dont know how to modify the code to do it, so friends please help me out
i am a newbie in javascript so such a dumb doubt had to come
Thanx :)
Just change your code to this
<!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">
<head>
<title>Test</title>
<script type="text/javascript">
function ExpandDelete(node)
{
if (node.nextSibling.style.display == 'none')
{
node.nextSibling.style.display = '';
node.parentNode.removeChild(node);
}
}
</script>
</head>
<body>
<a onclick="ExpandDelete(this);" style="cursor:pointer;"><img src="plus.gif" alt="Expand" /> More...</a><p style="display:none;">This is a sample of the expanded text that will show up when "+ More..." is clicked</p>
</body>
</html>

Categories