Problem with dynamic content [SOLVED! (using jquery)

[C-TZ]

Hello there,

new to this forum and starting with a quick question. Normaly I can figure things out myself but I'm a bit stuck on this one.

I have two scripts.

one is for TinyMCE (WYZIWYG editor):




tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directi onality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",


// Theme options - button# indicated the row# only
theme_advanced_buttons1 : "newdocument,save,|,styleprops,del,ins,attribs,|,visualaid,visualchars,template,pagebreak,|,preview,cleanup,code,print,|,|,help,fullscreen",
theme_advanced_buttons2 : "insertlayer,absolute,moveforward,movebackward,|,tablecontrols,|,hr,advhr,,charmapemotions,iespell,media,ltr,rtl,anchor,image,nonbreaking,|,insertdate,inserttime",
theme_advanced_buttons3 : "bold,italic,underline,strikethrough,|,outdent,indent,|,bullist,numlist,|,sub,sup,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons4 : "undo,redo,|,cut,copy,paste,|,pastetext,pasteword,|,search,replace,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,blockquote,cite,| ,abbr,acronym,|,link,unlink,|,removeformat",
content_css : '/CSS/TinyMCE.css',
theme_advanced_styles : "Test style=header1;",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,

});

function setup() {
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directi onality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",


// Theme options - button# indicated the row# only
theme_advanced_buttons1 : "newdocument,save,|,styleprops,del,ins,attribs,|,visualaid,visualchars,template,pagebreak,|,preview,cleanup,code,print,|,|,help,fullscreen",
theme_advanced_buttons2 : "insertlayer,absolute,moveforward,movebackward,|,tablecontrols,|,hr,advhr,,charmapemotions,iespell,media,ltr,rtl,anchor,image,nonbreaking,|,insertdate,inserttime",
theme_advanced_buttons3 : "bold,italic,underline,strikethrough,|,outdent,indent,|,bullist,numlist,|,sub,sup,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons4 : "undo,redo,|,cut,copy,paste,|,pastetext,pasteword,|,search,replace,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,blockquote,cite,| ,abbr,acronym,|,link,unlink,|,removeformat",
content_css : '/CSS/TinyMCE.css',
theme_advanced_styles : "Test style=header1;",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,

});
}


first part loads tinymce when it's there on the page, second part loads it when a button is pushed.

second script is for loading filecontent into a div:




function load_this(url) {
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = targetDiv;
try {
req.open("GET", url, true);
} catch (e) {
alert(e);
}
req.send(null);
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = targetDiv;
req.open("GET", url, true);
req.send();
}
}
}

function targetDiv() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById("main").innerHTML = req.responseText;
} else {
alert("Problem: " + req.statusText);
}
}
}


now the problem:

I have this page with div 'main'. an url loads this script, but after loading the dynamic content into the div, the setup() script isn't working:




function load_editor(url) {
load_this(url);
setup();
}


where url=editor.php.

The funny thing is: when I click the button to load the content into the div, the textarea (from editor.php) loads, but the javascript function to start tinymce isn't working!

This is probably because right after loading the div with 'editor.php' the setup() script doens't recognise the freshly loaded content. However, when I place a link in 'editor.php' which calls javascript:setup(); and click it after loading the content, setup() does work.


my question:

How can I make it so, that, when I press a link or button to load the editor.php into a div, the setup() script recognises the fresh code and starts the WYSIWYG editor? Do I have to use state ready or something? And ifso, how do I do this?

Or is there some other way I can do this?

Kind regards and many thanks for your help!

Kevin

[C-TZ]

bump =]

[Beverleyh]

Have you go a link so we can see what's happening /not happening?

[C-TZ]

Only hosted on my home-brew server at the moment.. I can email you the code though?

[djr33]

That's asking for us to do more work. If you help us to help you, then you will get more help more quickly.

[C-TZ]

I think, after some research, I can clarify my problem:

1. I am loading a TEXTAREA into a DIV using an AJAX-call.

effect: discrepancy between the DOM and the actual site you see in the browser.
EDIT: thats why the setup() function is not doing anything: it doesn't know there is a new born textarea.

2. I want to use tinymce javascript (the setup() part) to transform this dynamicaly loaded TEXTAREA into the tinymce WYZIWYG editor.

note: I've read that a person was able to do this with a dynamicaly loaded DIV instead of Textarea

I think I need to do something with this:



http.onreadystatechange = function() {
if (http.readyState == 4) {
document.getElementById('editor_content').innerHTML = http.responseText;
tinyMCE.execCommand('mceAddControl', false, 'editor_content');
}
};


but I'm not familiar enough with javascript to come up with a good solution.




Basically:

In need to tell the browser this: "Hey, here is some new content for you! Use it with this script! Because I've loaded something behind your back."

browser goes like "Hey ur right, I'm a dumb [insert favourite curseword], lets get to work."

[C-TZ]

djr33, I hope you understand that I feel uncomfortable opening up my home IP to the world wide webs.

[[Nicolas]]

Try hosting on a simple webhost temporarily, or upload the html to the internet to a site like 4Shared. Webfreehosting is a good temporary host.

[C-TZ]

thnx, I'll do that when I get back. Have to go now so hope someone is smart enough to come up with an answer (like #foo@bar.appendsomething,etc) without the code..

[djr33]

I completely understand and I'm not recommending anything in particular. I'm just explaining that if you want more help, make it easier for those helping you. If, for example, that means paying $5 for a month of hosting or setting up a free account somewhere, or revealing your home IP address, then that means that solving the problem is worth that to you. You don't need to do this and someone may still help, but the odds are better if you make it easier.

[C-TZ]

Back from the café =]. Hopefully in a couple of days, I can start drinking again for fun :p And.. Yeah you're absolutely right. As a matter of fact, I think I might have an old url lingering around here or there. Will look into that so I can show u guys,

In the meantime, lets say I wanted to control, for example, a button in div 'content' in the following example:

homepage.html:



<BUTTON id="button_on_homepage"></BUTTON>


index.php:


<HTML>
<HEAD>
<script type="text/javascript" language="JavaScript">
function load_this(url) {
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = targetDiv;
try {
req.open("GET", url, true);
} catch (e) {
alert(e);
}
req.send(null);
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = targetDiv;
req.open("GET", url, true);
req.send();
}
}
}

function targetDiv() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById("content").innerHTML = req.responseText;
} else {
alert("Problem: " + req.statusText);
}
}
}
</script>
</HEAD>

<BODY>
<DIV id="main div">
<BUTTON onclick="javascript:load_this(homepage.html);">
</BUTTON>
</DIV>

<DIV id="content">
<p>button will appear here.</p>
</DIV>
</BODY>
</HTML>


I want to change it's color with a javascript. How would I do this?

I recon that, the code used to change a dynamicaly loaded button, can also work for my project.

I only need to substitute the code used to change the button color with setup();.


For the record: I know how to change a buttons color using javascript haha :p just not in this instance.

[C-TZ]

Fixed it!

using the jquery .load function.

if anyone is interested:


$('#main').load('editor.php',function() {
var mydiv = $("#editor_content");
setup();
});


where:
#main is the div you want your file in,
editor.php is the file to be loaded

the var mydiv rule isn't acctualy needed but if you want to change or add some text or an object it comes in handy.


Now I'm trying to integrate this into a script so, when it's loading, you get a nice .gif animation telling you the site is doing something.