I try to use CKEDITOR to edit my website content. But there are a lot of CKEDITOR used, I put all the javascript functions in a Class, but not sure how it works. Anybody could help to see which part i need to change?
There are 2 files associated with my problems:
1) test.php (main page for update the content of website using Ckeditor)
2) CmsAjaxClass.js (Class contains all operation of Ajax and Ckeditor)
test.php
<!DOCTYPE html>
<html>
<head>
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="ckeditor/ckeditor.js"></script>
</head>
<script src="assets/js/jquery.js" type="text/javascript"></script>
<body>
<div>
</div>
<form method="post" action="test2.php">
<h1>Editor1</h1>
<textarea name="editor1" id="editor1"><?php
include_once('php/get_cms.php');
echo get_cms(1);
?></textarea>
_____________________________________<br/>
<h1>Editor2</h1>
<textarea name="editor2" id="editor2"><?php
include_once('php/get_cms.php');
echo get_cms(2);
?></textarea>
<script src="assets/js/CmsAjaxClass.js"></script>
<script>
var editor1 = new CmsAjaxClass("editor1", document.getElementById("editor1").value) ;
var editor2 = new CmsAjaxClass("editor2", document.getElementById("editor2").value) ;
</script>
</form>
</body>
</html>
CmsAjaxClass.js
function CmsAjaxClass(editorName, seteditorData)
{
//For nested Class usage
var myClass = this;
//Declare editorName to keep the editor name
this.editorName = editorName;
//Declare dataString to keep the data retrieve from editor
this.seteditorData = seteditorData;
//Function to update the CKEDITOR before it is parsed
this.updateCkeditor = function() {
for ( instance in CKEDITOR.instances )
{
CKEDITOR.instances[instance].updateElement();
}
}
//Function to run the AJAX if the element is blured
this.onBlur = function() {
//Update the Ckeditor data first before retrieve edited data
myClass.updateCkeditor();
//Retrieve edited data from HTML DOM
myClass.seteditorData = seteditorData;
//Call AJAX function to pass the value
myClass.startAjax();
}
//Catch the focus and blur status of inline toolbar
this.editor = CKEDITOR.inline( editorName, {
on: {
//focus: onFocus,
blur: myClass.onBlur,
}
});
//Declare which cms section we currently editing, parse the integer from the id of the textarea
this.setcmsID = parseInt(editorName.replace("editor",""));
//Create an AJAX function
this.startAjax = function() {
alert(this.seteditorData);
$.ajax
({
type: "POST",
url: "test2.php",
data: {editorData: this.seteditorData, cmsID: this.setcmsID},
cache: false,
beforeSend: function()
{
//Loading
},
success: function(result)
{
alert("Successfully updated!");
}
});
}
}
I dont understand your issue clearly.
But still these lines looks like a typo
<script>
var editor1 = new CmsAjaxClass("editor1") ;
var editor1 = new CmsAjaxClass("editor2") ;
</script>
I guess you meant editor2 in second line instead of overwriting editor1
this.onFocus() = function() {
//The CKEDITOR element is focused
}
I guess you want this.onFocus= function(){
You can keep a reference to the editor in your class
this.editor = CKEDITOR.inline( editorName, {
on: {
blur: this.onBlur,
}
});
which can facilitate
this.editor.on('blur', function(){});
this.editor.updateElement();
Thanks #sabithpocker and #DaniëlKnippers
Finally it works, the Ckeditor update database when "blur" action is triggered.
test.php
<!DOCTYPE html>
<html>
<head>
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="ckeditor/ckeditor.js"></script>
</head>
<script src="assets/js/jquery.js" type="text/javascript"></script>
<body>
<div>
</div>
<form method="post" action="test2.php">
<h1>Editor1</h1>
<textarea name="editor1" id="editor1"><?php
include_once('php/get_cms.php');
echo get_cms(1);
?></textarea>
_____________________________________<br/>
<h1>Editor2</h1>
<textarea name="editor2" id="editor2"><?php
include_once('php/get_cms.php');
echo get_cms(2);
?></textarea>
<script src="assets/js/CmsAjaxClass.js"></script>
<script>
var editor1 = new CmsAjaxClass("editor1") ;
var editor2 = new CmsAjaxClass("editor2") ;
</script>
</form>
</body>
</html>
CmsAjaxClass.js
function CmsAjaxClass(editorName)
{
//For nested Class usage
var myClass = this;
//Declare editorName to keep the editor name
this.editorName = editorName;
//Declare dataString to keep the data retrieve from editor
this.seteditorData;
//Function to update the CKEDITOR before it is parsed
this.updateCkeditor = function() {
for ( instance in CKEDITOR.instances )
{
CKEDITOR.instances[instance].updateElement();
}
}
//Function to run the AJAX if the element is blured
this.onBlur = function() {
//Update the Ckeditor data first before retrieve edited data
myClass.updateCkeditor();
//Retrieve edited data from HTML DOM
myClass.seteditorData = document.getElementById(editorName).value;
//Call AJAX function to pass the value
myClass.startAjax();
}
//Catch the focus and blur status of inline toolbar
this.editor = CKEDITOR.inline( editorName, {
on: {
//focus: onFocus,
blur: myClass.onBlur,
}
});
//Declare which cms section we currently editing, parse the integer from the id of the textarea
this.setcmsID = parseInt(editorName.replace("editor",""));
//Create an AJAX function
this.startAjax = function() {
alert(this.seteditorData);
$.ajax
({
type: "POST",
url: "test2.php",
data: {editorData: this.seteditorData, cmsID: this.setcmsID},
cache: false,
beforeSend: function()
{
//Loading
},
success: function(result)
{
alert("Successfully updated!");
}
});
}
}
Related
I'm trying to build an article system, where the content divs can be edited inline with ckeditor. The number of content divs is variable, so an article has for example two divs:
<div id="content_11439" contenteditable="true">Click to edit.</div>
<div id="content_11440" contenteditable="true">Click to edit.</div>
Now I have already browsed the forums, and have tried incorporating some answers into my solution for saving the text to my database. The inline editing part works, ckeditor shows and I can edit, but it seems like my code isn't being send to the php-file that should save it once I click somewhere else on the page and ckeditor closes.
The following code comes from these forums:
<script type="template" data-sample="1">
CKEDITOR.disableAutoInline = true;
$("div[contenteditable='true']" ).each(function( index ) {
var content_id = $(this).attr('id');
CKEDITOR.inline( content_id, {
on: {
blur: function( event ) {
var data = event.editor.getData();
var request = jQuery.ajax({
url: "http://www.xxxxxx/saveTextDetails.php",
type: "POST",
data: {
content : data,
content_id : content_id
},
dataType: "html"
});
}
}
} );
});
Jquery is loaded, I don't get any errors in my console, but I don't get any post-requests either, while I did manage to do about the same thing on a different page, to save the text in an input form when clicking a save button.
Thank you for your help.
Your problem was with data-sample="1" inside the <script> tag, which caused the script inside that tag to not run (which means the divs got automatically the ckeditor, and by CKEDITOR.inline( content_id.
Check this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
<div id="content_11439" contenteditable="true">Click to edit.</div>
<div id="content_11440" contenteditable="true">Click to edit.</div>
<script>
CKEDITOR.disableAutoInline = true;
$("div[contenteditable='true']" ).each(function( index ) {
var content_id = $(this).attr('id');
CKEDITOR.inline( content_id, {
on: {
blur: function( event ) {
var data = event.editor.getData();
alert("Sending: " + data)
/*
var request = jQuery.ajax({
url: "http://www.xxxxxx/saveTextDetails.php",
type: "POST",
data: {
content : data,
content_id : content_id
},
dataType: "html"
});
*/
}
}
} );
});
</script>
I'm using jQuery AJAX to get an array from a PHP file which is getting data from a MySQL database. I'm now trying to use that array outside my ajax call. Specifically I'm loading multiple videoIDs for YT.Player but I'm stumbling on getting my array to another function.
Here's my testing code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var data = new Array();
$(document).ready( function() {
$.ajax({
type: 'POST',
url: 'test.php',
data: 'id=testdata',
dataType: 'json',
cache: false,
success: function(result) {
data = result;
$('#div1').html(result[4]);
},
});
});
$("button").click(function(){
alert(data[4]);
});
</script>
</head>
<body>
<button id="button">Test</button>
<div id="div1"><h2>div1</h2></div>
</body>
</html>
The div changes a half second after the page loads as expected. The click function for testing doesn't work, and its not working in the real function I'm working on:
function onPlayerStateChange(event) {
if(event.data === 0) {
++i;
player.loadVideoById(data[i]);
}
}
This is my first project with jQuery and JS so I'm hoping I'm missing something simple
You should put
$("button").click(function(){
alert(data[4]);
});
inside
$(document).ready( function() {
});
Also, if you put var before variable then it becomes local variable.
So, you should either remove var before
data = new Array();
or just put as a additional parameter
function onPlayerStateChange(event, data) {
if(event.data === 0) {
++i;
player.loadVideoById(data[i]);
}
}
but then you also need to call it inside
$(document).ready(function() {} );
scope.
I currently have this javascript/ajax request for my advanced search page
<script>
// window.setInterval(function()
// {
$(function ()
{
var SearchTerm = '<?php echo $_POST['Search']; ?>';
$.ajax({
url: 'Ajax/AjaxAdvSearch.php?SearchTerm='+SearchTerm, dataType: 'json', success: function(rows)
{
$('#output').empty();
for (var i in rows)
{
var row = rows[i];
var id = row[0];
var FunctionName = row[1];
$('#output').append("<a href='Page.php?ID="+id+"'>"+FunctionName+"</a><br>");
}
}
});
});
// }, 5000);
</script>
The $_POST['Search']; is obtained from a HTML textarea:
<textarea name='Search' style='width: 100%; height: 150px;'></textarea><br>
I want to dynamically update my javascript var each time the user types into the textarea, without the user having to press the submit..
so whilst the user is typing, the var SearchTerm is dynamically updated each time the textarea is updated with content.
Could anyone provide some assistance?
Use the .change() method in jQuery
var variableToUpdate = '';
$('#Search').change(function() {
variableToUpdate = $(this).val();
// call your search from within if you want
});
For search-as-you-type tutorials and plugins...
http://dbachrach.com/blog/2007/04/spotlight-like-search-as-you-type-with-css-ajax-js/
http://www.jquery4u.com/plugins/14-jquery-live-search-plugins/
Let me provide you an example
<html>
<head><style>
</style>
<script>
var DataCon;
function UpdateDIV(){
document.getElementById('updater').innerHTML=DataCon;
}
</script>
</head><body>
<div id="updater">
</div>
<textarea onkeydown="DataCon=this.value;UpdateDIV()"></textarea>
</body>
</html>
And here you can see, as you type a global variable updates and along with it, to check its working a UpdateDIV function also given which updates the div with id updater...
Now just assign certain vars and get your job done
I have a html
index.html:
<html>
<head>
<title>Facebook</title>
<script type="text/javascript" src="../xdata/js/jquery.js"></script>
</head>
<body>
Tasks (<span id="tasks">0</span>)
Messages (<span id="messages">0</span>)
Notifications (<span id="notifications">0</span>)
<script type="text/javascript">
$(document).ready(function() {
var pagetitle = document.title;
document.title = pagetitle+' NEW NOTIFICATON';
});
</script>
</body>
</html>
and a xml file
page.xml:
<?xml version="1.0" ?>
<page tasks="1" messages="3" notifications="3"/>
How do i make that every 5 seconds index.html to read page.xml and modify the title like in faceboook ("(1) Facebook") and also modify tasks, messages, notifications ...
I'm having problems at reading the xml. If anyone can help me?
PS - I prefer jQuery ... but JavaScript works as well
The following was done in jquery, though you have a slight error with your xml file that lead to parsing issues.
Assuming your xml file is like this:
<?xml version="1.0"?>
<data>
<page tasks="1" messages="3" notifications="3"/>
</data>
The following code will modify the page accordingly, using jquery of course:
$(document).ready(function() {
function get_info() {
$.ajax({
type: "GET",
url: "page.xml",
dataType: "xml",
cache: false,
complete: function(doc) {
var tasks = $(doc.responseText).find("page").attr("tasks");
var msgs = $(doc.responseText).find("page").attr("messages");
var notes = $(doc.responseText).find("page").attr("notifications");
if (tasks != $('#tasks').text() ||
msgs != $('#messages').text() ||
notes != $('#notifications').text()) {
document.title = "Facebook" + ' NEW NOTIFICATON';
}
$('#tasks').text(tasks);
$('#messages').text(msgs);
$('#notifications').text(notes);
}
});
}
setInterval(function() {
get_info();
}, 5000);
});
I spent some time developing this, and I know for a fact it works.
var tid = setTimeout(function_name, 5000);
function function_name() {
// do some stuff...
tid = setTimeout(function_name, 5000); // repeat
}
function abortTimer() { // to stop the timer
clearTimeout(tid);
}
Put your logic inside of a setTimeout method call:
setTimeout(function(){
alert('I am displayed after 3 seconds!');
}, 3000);
Try this:
(document).ready(function() {
function getPage() {
var page= $.ajax({
type: "GET",
url: "page.xml",
dataType: "xml",
async : false,
}).responseXML;
$(page).find('page').each(function(){
var tasks = $(this).attr("tasks");
var msgs = $(this).attr("messages");
var notes = $(this).attr("notifications");
$('#tasks').html(tasks);
$('#messages').html(msgs);
$('#notifications').html(notes);
});
}
});
setInterval(getPage,5000);
I have a script that on.DocumentReady posts data to another page. That page responds with some HTML encapsulated in one div tag.
My goal is to have this post response/data open in a new window.
Any hints or clues?
Here is the snippet I created from Dr. Mille's advice.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var packslip_id = 35592;
var po_no = 0018439;
var box_no = 1;
$.post("https://example.com/barcode/generate", { packing_slip: packslip_id, reference: po_no, total_boxes: box_no},
function (data) {
alert(data);
var win=window.open('about:blank');
with(win.document)
{
open();
write(data);
close();
}
});
});
Use the write()-Method of the Popup's document to put your markup there:
$.post(url, function (data) {
var w = window.open('about:blank');
w.document.open();
w.document.write(data);
w.document.close();
});
Accepted answer doesn't work with "use strict" as the "with" statement throws an error. So instead:
$.post(url, function (data) {
var w = window.open('about:blank', 'windowname');
w.document.write(data);
w.document.close();
});
Also, make sure 'windowname' doesn't have any spaces in it because that will fail in IE :)
If you dont need a feedback about the requested data and also dont need any interactivity between the opener and the popup, you can post a hidden form into the popup:
Example:
<form method="post" target="popup" id="formID" style="display:none" action="https://example.com/barcode/generate" >
<input type="hidden" name="packing_slip" value="35592" />
<input type="hidden" name="reference" value="0018439" />
<input type="hidden" name="total_boxes" value="1" />
</form>
<script type="text/javascript">
window.open('about:blank','popup','width=300,height=200')
document.getElementById('formID').submit();
</script>
Otherwise you could use jsonp. But this works only, if you have access to the other Server, because you have to modify the response.
I did it with an ajax post and then returned using a data url:
$(document).ready(function () {
var exportClick = function () {
$.ajax({
url: "/api/test.php",
type: "POST",
dataType: "text",
data: {
action: "getCSV",
filter: "name = 'smith'",
},
success: function(data) {
var w = window.open('data:text/csv;charset=utf-8,' + encodeURIComponent(data));
w.focus();
},
error: function () {
alert('Problem getting data');
},
});
}
});