私はこれにほぼ4時間取り組んできましたが、うまくいきません。
テキストエリアとドロップダウンリストを持つフォームがあります。ドロップダウン データは MySQL データベースからのものです。ドロップダウンでアイテムを選択すると、テキストエリアにデータが入力され、これは正常に機能しています。
テキストエリア エディタとして TinyMCE を追加しましたが、データが表示されません。TinyMCE がテキストエリアに取って代わることは知っていますが、動作させることはできません。
以下は、私が使用している完全なコードです。TinyMCE を有効にして適切に動作させるために不足しているものを誰かが助けてくれますか? どうもありがとう。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,nonbreaking,xhtmlxtras,template,visualchars",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,cut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,|,forecolor,backcolor,|,tablecontrols,hr,removeformat,|,sub,sup",
theme_advanced_buttons2 : ",charmap,advhr,|,fullscreen,|,cite,abbr,acronym,|,visualchars,nonbreaking,|,cleanup,help,code",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
skin : "o2k7",
skin_variant : "silver"
});
</script>
<!-- JQUERY -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.autoSubmit = function(options) {
return $.each(this, function() {
// VARIABLES: Input-specific
var input = $(this);
var column = input.attr('name');
// VARIABLES: Form-specific
var form = input.parents('form');
var method = form.attr('method');
var action = form.attr('action');
// VARIABLES: Where to update in database
var where_val = form.find('#where').val();
var where_col = form.find('#where').attr('name');
// ONBLUR: Dynamic value send through Ajax
input.bind('blur', function(event) {
// Get latest value
var value = input.val();
// AJAX: Send values
$.ajax({
url: action,
type: method,
data: {
val: value,
col: column,
w_col: where_col,
w_val: where_val
},
cache: false,
timeout: 10000,
success: function(data) {
// Alert if update failed
if (data) {
alert(data);
}
// Load output into a P
else {
$('#notice').text('Updated');
$('#notice').fadeOut().fadeIn();
}
}
});
// Prevent normal submission of form
return false;
})
});
}
})(jQuery);
// JQUERY: Run .autoSubmit() on all INPUT fields within form
$(function(){
$('#ajax-form TEXTAREA').autoSubmit();
});
</script>
<!-- STYLE -->
<style type="text/css">
INPUT { margin-right: 1em }
</style>
<script language="JavaScript">
function updateThis(obj){
var option = document.getElementById('option').selectedIndex;
var option = document.getElementById('option').options[document.getElementById('option').selectedIndex].text;
//alert("running updateThis function and the variable named option is: " + option);
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
tinyMCE.execCommand("mceAddControl", true, "pfdnote");
document.getElementById("pfdnote").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getNote.php?lname="+option,true);
xmlhttp.send();
}
</script>
</head>
<body>
<?php
require("DB_connector.php");
require("Functions.php");
$stk = $stmt->prepare("select stk_id, stk_name, stk_type, stk_summary, stk_description from stk_pfd WHERE stk_summary = 'sample data only'");
$stk->execute();
$row = $stk->fetchAll();
?>
<form id="ajax-form" class="autosubmit" method="POST" action="">
<textarea id="pfdnote" name="notes" value="<?php echo $row['stk_description']?>" /></textarea>
</form>
<p id="notice"></p>
<?php
$stk1 = $stmt->prepare("select stk_id, stk_name, stk_type, stk_summary, stk_description from stk_stk");
$stk1->execute();
$stk2 = $stk1->fetchAll();
echo '<select id="option" onChange="updateThis(this)" lake="something">';
foreach ($stk2 as $d) {
echo '<option id="lname" value="'.$d['stk_id'].'">'.$d['stk_id'] . "+". $d['stk_name']." + ".$d['stk_type'].'</option>';
}
?>
<script>
jQuery(function(){
$('#option').change(function(){
var selectedLakeName = $('#option :selected').text();
});
});
</script>
</body>
</html>
以下は、データベースからデータを取得してテキストエリアに表示する getNote.php コードです。
<?php
$stk_id = $_GET['lname'];
require("DB_connector.php");
require("Functions.php");
$stk = $stmt->prepare("select stk_id, stk_name, stk_type, stk_summary, stk_description from stk_pfd WHERE stk_id = '$stk_id'");
$stk->execute();
$r = $stk->fetchAll();
foreach ($r as $row) {
$stk_desc = $row['stk_description'];
}
echo $stk_desc;
?>