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,directionality,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,directionality,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.