Support forums - Adding html dynamically with jQuery

Support forums » Products » Cute Editor for PHP » Re: Adding html dynamically with jQuery

Adding html dynamically with jQuery

Last post 05-11-2011, 2:22 PM by jallred15. 3 replies.


	Sort Posts: Previous Next

03-30-2011, 6:07 AM 66924

annoyingmouse
Joined on 03-30-2011
Cambridge, UK
Posts 2

Adding html dynamically with jQuery

Reply Quote

So I've the following page (edited for brevity):

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/test.js"></script>
<title>test</title>
</head>
<body>
<legend>Page to edit</legend>
<label for="page">Page: </label>
<select title="Page" name="page" id="page">
<option value="0">- Select -</option>
<option value="page1.php">page1.php</option>
<option value="page2.php">page2.php</option>
<option value="page3.php">page3.php</option>
<option value="page4.php">page4.php</option>
<option value="page5.php">page5.php</option>
</select>
<legend>Content</legend>
<?php
//Step 2: Create Editor object.
$editor = new CuteEditor();
$editor->Text = "Please select a page using the drop down list above.";
//Step 3: Set a unique ID to Editor
$editor->ID = "editor1";
//Step 4: Render Editor
$editor->Draw();
?>
</body>
</html>

with test.js looking like this:

$(function(){
var editor1 = document.getElementById('editor1');
$('#page').change(function(){
$.ajax({
url: "getPage.php",
data: {
pageName: $(this).val()
},
success: function(data){
$("#editor1").html(data); // <- Doesn't work
alert(data); // <- Works so I know the data is there
editor1.setHTML(data); // <- Doesn't work
var editor2 = document.getElementById('editor1');
editor2.setHTML(data); // <- Doesn't work
}
});
});
});

getPage.php basically returns some html data which is stored within a MySQL database. I know that that bit is working as the alert shows the correct content.

What I want to do is get the content returned by the ajax call into the editor where I can allow the user to alter it.

Later I'll work on saving it back to the database ;-)

Cheers,

Dom

p.s. Tried to post this in via Chrome (10.0.648.151) and it failed, most especially on the code highlight pop-up.

Filed under: javascript, jQuery

03-31-2011, 5:10 AM 66936 in reply to 66924

annoyingmouse
Joined on 03-30-2011
Cambridge, UK
Posts 2

Re: Adding html dynamically with jQuery

Reply Quote

I think that basically what I'm after is a way of replacing the present content and then loading new content into the editor dynamically using javascript. I can get the new content but I'm having problems inserting it.

03-31-2011, 12:13 PM 66943 in reply to 66936

Eric
Joined on 08-05-2009
Posts 1,269

Re: Adding html dynamically with jQuery

Reply Quote

Dear annoyingmouse,

http://phphtmledit.com/JavaScript-API.php , this example demonstrates how to use javascript API in CuteEditor, you can find the source code of this example in download package.

The following function set the content to CuteEditor.

function setHTML()
   {
    // get the cute editor instance
    var editor1 = document.getElementById('<?php echo $ClientID;?>');

    // Set the editor
    editor1.setHTML(document.getElementById("myTextArea").value);
   }

Thank you for asking

[email protected]

05-11-2011, 2:22 PM 67544 in reply to 66936

jallred15
Joined on 02-28-2011
Posts 4

Re: Adding html dynamically with jQuery

Reply Quote

CuteEditor uses your passed ID for the textarea and then generates an ID from it for the table and its children, where the text actually is. The table has an Id of "CE_yourID_ID".

So, for getting and setting content with JQuery, you need to get into the document of the iframe that the editor uses:

$('#CE_editor1_ID').find('iframe').contents().find('body').html();

Jquery's .contents() gives you access to the document of the iframe.

I find this much more reliable than CuteEditor's javascript API. I just can't predict when that will work for me. However, if you want to try using it, then you would do this:

document.getElementById('CE_editor1_ID').getHTML();

Good Luck!