how to generate tinymce to ajax generated textarea

Posted by Jai_pans on Stack Overflow See other posts from Stack Overflow or by Jai_pans
Published on 2009-05-12T07:04:32Z Indexed on 2010/06/13 16:02 UTC
Read the original article Hit count: 305

Filed under:

Hi, i have a image multi-uloader script which also each item uploaded was preview 1st b4 it submitted and each images has its following textarea which are also generated by javascript and my problem is i want to use the tinymce editor to each textarea generated by the ajax.

Any help will be appreciated..

here is my script function fileQueueError(file, errorCode, message) { try { var imageName = "error.gif"; var errorName = ""; if (errorCode === SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED) { errorName = "You have attempted to queue too many files."; }

	if (errorName !== "") {
		alert(errorName);
		return;
	}

	switch (errorCode) {
	case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
		imageName = "zerobyte.gif";
		break;
	case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
		imageName = "toobig.gif";
		break;
	case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
	case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
	default:
		alert(message);
		break;
	}

	addImage("images/" + imageName);

} catch (ex) {
	this.debug(ex);
}

}

function fileDialogComplete(numFilesSelected, numFilesQueued) { try { if (numFilesQueued > 0) { this.startUpload(); } } catch (ex) { this.debug(ex); } }

function uploadProgress(file, bytesLoaded) {

try {
	var percent = Math.ceil((bytesLoaded / file.size) * 100);

	var progress = new FileProgress(file,  this.customSettings.upload_target);
	progress.setProgress(percent);
	if (percent === 100) {
		progress.setStatus("Creating thumbnail...");
		progress.toggleCancel(false, this);
	} else {
		progress.setStatus("Uploading...");
		progress.toggleCancel(true, this);
	}
} catch (ex) {
	this.debug(ex);
}

}

function uploadSuccess(file, serverData) { try { var progress = new FileProgress(file, this.customSettings.upload_target);

	if (serverData.substring(0, 7) === "FILEID:") {


		addRow("tableID","thumbnail.php?id=" + serverData.substring(7),file.name);
		//setup();
		//generateTinyMCE('itemdescription[]');
		progress.setStatus("Thumbnail Created.");
		progress.toggleCancel(false);
	} else {
		addImage("images/error.gif");
		progress.setStatus("Error.");
		progress.toggleCancel(false);
		alert(serverData);

	}


} catch (ex) {
	this.debug(ex);
}

}

function uploadComplete(file) { try { /* I want the next upload to continue automatically so I'll call startUpload here */ if (this.getStats().files_queued > 0) { this.startUpload(); } else { var progress = new FileProgress(file, this.customSettings.upload_target); progress.setComplete(); progress.setStatus("All images received."); progress.toggleCancel(false); } } catch (ex) { this.debug(ex); } }

function uploadError(file, errorCode, message) { var imageName = "error.gif"; var progress; try { switch (errorCode) { case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED: try { progress = new FileProgress(file, this.customSettings.upload_target); progress.setCancelled(); progress.setStatus("Cancelled"); progress.toggleCancel(false); } catch (ex1) { this.debug(ex1); } break; case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED: try { progress = new FileProgress(file, this.customSettings.upload_target); progress.setCancelled(); progress.setStatus("Stopped"); progress.toggleCancel(true); } catch (ex2) { this.debug(ex2); } case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: imageName = "uploadlimit.gif"; break; default: alert(message); break; }

	addImage("images/" + imageName);

} catch (ex3) {
	this.debug(ex3);
}

}

function addRow(tableID,src,filename) {
var table = document.getElementById(tableID);

var rowCount    	= table.rows.length;  
var row     		= table.insertRow(rowCount);  
	rowCount + 1;
	row.id 				= "row"+rowCount;
var cell0			= row.insertCell(0);
	cell0.innerHTML = rowCount;
	cell0.style.background	= "#FFFFFF";
var cell1 			= row.insertCell(1);  
	cell1.align		= "center";
	cell1.style.background	= "#FFFFFF";
var imahe   		= document.createElement("img");  
	imahe.setAttribute("src",src);

var hidden			= document.createElement("input");
	hidden.setAttribute("type","hidden");
	hidden.setAttribute("name","filename[]");
	hidden.setAttribute("value",filename);
/*var	hidden2			= document.createElement("input");
	hidden2.setAttribute("type","hidden");
	hidden2.setAttribute("name","filename[]");
	hidden2.setAttribute("value",filename);
	cell1.appendChild(hidden2);*/
	cell1.appendChild(hidden);
    cell1.appendChild(imahe);  

var cell2   		= row.insertCell(2);  
	cell2.align		= "left";
	cell2.valign	= "top";
	cell2.style.background	= "#FFFFFF";

	//tr1.appendChild(td1);

var div2			= document.createElement("div");
   div2.style.padding	="0 0 0 10px";
   div2.style.width	= "400px";
   var alink		= document.createElement("a");
	//alink.style.margin="40px 0 0 0";
    alink.href		="#";
	alink.innerHTML	="Cancel";
	alink.onclick= function () {
		document.getElementById(row.id).style.display='none';
		document.getElementById(textfield.id).disabled='disabled';
	};
   var div			= document.createElement("div");
		div.style.margin="10px 0";
		div.appendChild(alink);

var textfield 			= document.createElement("input");  
   textfield.id     		= "file"+rowCount;
   textfield.type 			= "text"; 
   textfield.name			= "itemname[]";
   textfield.style.margin	= "10px 0";
   textfield.style.width	= "400px";
   textfield.value			= "Item Name";
   textfield.onclick= function(){
	   							//textfield.value="";
								if(textfield.value=="Item Name")
								textfield.value="";
								if(desc.innerHTML=="")
									desc.innerHTML		="Item Description";
								if(price.value=="")
									price.value="Item Price";
							   }

  var desc					= document.createElement("textarea");
      desc.name 			= "itemdescription[]";
      desc.cols 			= "80";
      desc.rows 			= "4";
	  desc.innerHTML		= "Item Description";
	  desc.onclick			= function(){
		  						if(desc.innerHTML== "Item Description")
		  						desc.innerHTML		= "";
								if(textfield.value=="Item name" ||  textfield.value=="")
								textfield.value="Item Name";
								if(price.value=="")
								price.value="Item Price";
	  						}
 var price					= document.createElement("input");
 	price.id 			= "file"+rowCount;
   price.type 			= "text"; 
   price.name			= "itemprice[]";
   price.style.margin	= "10px 0";
   price.style.width	= "400px";
   price.value			= "Item Price";
   price.onclick= function(){
								if(price.value=="Item Price")
									price.value="";
								if(desc.innerHTML=="")
									desc.innerHTML		="Item Description";
								if(textfield.value=="")
									textfield.value="Item Name";
							   }
var span				= document.createElement("span");
	span.innerHTML		= "View";
	span.style.width	= "auto";
	span.style.padding	= "10px 0";
var view					= document.createElement("input");
	view.id 			= "file"+rowCount;
   view.type 			= "checkbox"; 
   view.name			= "publicview[]";
   view.value			= "y";
   view.checked			= "checked";
var div3				= document.createElement("div");   
	div3.appendChild(span);
   div3.appendChild(view);
var div4				= document.createElement("div");
	div4.style.padding	= "10px 0";
var span2				= document.createElement("span");
	span2.innerHTML		= "Default Display";
	span2.style.width	= "auto";
	span2.style.padding	= "10px 0";
var radio				= document.createElement("input");
	radio.type			= "radio";
	radio.name			= "setdefault";
	radio.value			= "y";

	div4.appendChild(span2);
	div4.appendChild(radio);
	div2.appendChild(div);
   //div2.appendChild(label);
    //div2.appendChild(table);
   div2.appendChild(textfield);
   div2.appendChild(desc);
   div2.appendChild(price);
   div2.appendChild(div3);
   div2.appendChild(div4);

cell2.appendChild(div2); }

function addImage(src,val_id) { var newImg = document.createElement("img"); newImg.style.margin = "5px 50px 5px 5px"; newImg.style.display= "inline"; newImg.id=val_id; document.getElementById("thumbnails").appendChild(newImg); if (newImg.filters) { try { newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0; } catch (e) { // If it is not set initially, the browser will throw an error. This will set it if it is not set yet. newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')'; } } else { newImg.style.opacity = 0; }

newImg.onload = function () {
	fadeIn(newImg, 0);
};
newImg.src = src;

}

function fadeIn(element, opacity) { var reduceOpacityBy = 5; var rate = 30; // 15 fps

if (opacity < 100) {
	opacity += reduceOpacityBy;
	if (opacity > 100) {
		opacity = 100;
	}

	if (element.filters) {
		try {
			element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
		} catch (e) {
			// If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
			element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
		}
	} else {
		element.style.opacity = opacity / 100;
	}
}

if (opacity < 100) {
	setTimeout(function () {
		fadeIn(element, opacity);
	}, rate);
}

}

/* ************************************** * FileProgress Object * Control object for displaying file info * ************************************** */

function FileProgress(file, targetID) { this.fileProgressID = "divFileProgress";

this.fileProgressWrapper = document.getElementById(this.fileProgressID);
if (!this.fileProgressWrapper) {
	this.fileProgressWrapper = document.createElement("div");
	this.fileProgressWrapper.className = "progressWrapper";
	this.fileProgressWrapper.id = this.fileProgressID;

	this.fileProgressElement = document.createElement("div");
	this.fileProgressElement.className = "progressContainer";

	var progressCancel = document.createElement("a");
	progressCancel.className = "progressCancel";
	progressCancel.href = "#";
	progressCancel.style.visibility = "hidden";
	progressCancel.appendChild(document.createTextNode(" "));

	var progressText = document.createElement("div");
	progressText.className = "progressName";
	progressText.appendChild(document.createTextNode(file.name));

	var progressBar = document.createElement("div");
	progressBar.className = "progressBarInProgress";

	var progressStatus = document.createElement("div");
	progressStatus.className = "progressBarStatus";
	progressStatus.innerHTML = "&nbsp;";

	this.fileProgressElement.appendChild(progressCancel);
	this.fileProgressElement.appendChild(progressText);
	this.fileProgressElement.appendChild(progressStatus);
	this.fileProgressElement.appendChild(progressBar);

	this.fileProgressWrapper.appendChild(this.fileProgressElement);

	document.getElementById(targetID).appendChild(this.fileProgressWrapper);
	fadeIn(this.fileProgressWrapper, 0);

} else {
	this.fileProgressElement = this.fileProgressWrapper.firstChild;
	this.fileProgressElement.childNodes[1].firstChild.nodeValue = file.name;
}

this.height = this.fileProgressWrapper.offsetHeight;

} FileProgress.prototype.setProgress = function (percentage) { this.fileProgressElement.className = "progressContainer green"; this.fileProgressElement.childNodes[3].className = "progressBarInProgress"; this.fileProgressElement.childNodes[3].style.width = percentage + "%"; }; FileProgress.prototype.setComplete = function () { this.fileProgressElement.className = "progressContainer blue"; this.fileProgressElement.childNodes[3].className = "progressBarComplete"; this.fileProgressElement.childNodes[3].style.width = "";

}; FileProgress.prototype.setError = function () { this.fileProgressElement.className = "progressContainer red"; this.fileProgressElement.childNodes[3].className = "progressBarError"; this.fileProgressElement.childNodes[3].style.width = "";

}; FileProgress.prototype.setCancelled = function () { this.fileProgressElement.className = "progressContainer"; this.fileProgressElement.childNodes[3].className = "progressBarError"; this.fileProgressElement.childNodes[3].style.width = "";

}; FileProgress.prototype.setStatus = function (status) { this.fileProgressElement.childNodes[2].innerHTML = status; };

FileProgress.prototype.toggleCancel = function (show, swfuploadInstance) { this.fileProgressElement.childNodes[0].style.visibility = show ? "visible" : "hidden"; if (swfuploadInstance) { var fileID = this.fileProgressID; this.fileProgressElement.childNodes[0].onclick = function () { swfuploadInstance.cancelUpload(fileID); return false; }; } };

i am using a swfuploader an i jst added a input fields and a textarea when it preview the images which ready to be uploaded and from my html i have this script

var swfu; window.onload = function () { swfu = new SWFUpload({ // Backend Settings upload_url: "../we_modules/upload.php", // Relative to the SWF file or absolute post_params: {"PHPSESSID": ""}, // File Upload Settings file_size_limit : "20 MB", // 2MB file_types : "*.*", //file_types : "", file_types_description : "jpg", file_upload_limit : "0", file_queue_limit : "0", // Event Handler Settings - these functions as defined in Handlers.js // The handlers are not part of SWFUpload but are part of my website and control how // my website reacts to the SWFUpload events. //file_queued_handler : fileQueued, file_queue_error_handler : fileQueueError, file_dialog_complete_handler : fileDialogComplete, upload_progress_handler : uploadProgress, upload_error_handler : uploadError, upload_success_handler : uploadSuccess, upload_complete_handler : uploadComplete, // Button Settings button_image_url : "../we_modules/images/SmallSpyGlassWithTransperancy_17x18.png", // Relative to the SWF file button_placeholder_id : "spanButtonPlaceholder", button_width: 180, button_height: 18, button_text : 'Select Files(2 MB Max)', button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt;cursor:pointer } .buttonSmall { font-size: 10pt; }', button_text_top_padding: 0, button_text_left_padding: 18, button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT, button_cursor: SWFUpload.CURSOR.HAND, // Flash Settings flash_url : "../swfupload/swfupload.swf", custom_settings : { upload_target : "divFileProgressContainer" }, // Debug Settings debug: false }); };

where should i put on the tinymce function as you mention below?

© Stack Overflow or respective owner

Related posts about JavaScript