jqueryとajaxを使用してmysqlデータベースを更新しようとしています。新しいレコードを追加し、スクリプトにhtmlを適切に追加させることができました。次に、テーブルの各行にIDを追加して、任意の行の情報を編集できるようにする必要があります。関数editCompany(id)を呼び出して、IDをスクリプトに渡しますが、機能させることができません。
スクリプトを実行すると、「プロパティeditCompany()の値がnullまたは未定義であり、関数オブジェクトではありません」というエラーが表示されます。
何かご意見は?
<html>
<head>
<title><?=$settings['title']?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<style>
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script>
$(document).ready(function(){
var company_name = $( "#company_name" ),
company_address = $( "#company_address" ),
company_city = $( "#company_city" ),
company_state = $( "#company_state" ),
company_zip = $( "#company_zip" ),
company_phone = $( "#company_phone" ),
company_fax = $( "#company_fax" ),
company_email = $( "#company_email" ),
company_website = $( "#company_website" ),
allFields = $( [] ).add( company_name ).add( company_address ).add( company_city ).add( company_state ).add( company_zip ).add( company_phone ).add( company_fax ).add( company_email ).add( company_website ),
tips = $( ".validateTips" );
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " + min + " and " + max + "." );
//updateTips( n );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(company_id){
if(ajaxRequest.readyState == 4){
if( ajaxResult == "success"){
$( "#company-id-" + id ).html( "<tr>" + "<td>" + company_name.val() + "</td>" + "<td>" + company_address.val() + "</td>" + "<td>" + company_city.val() + "</td>" + "<td>" + company_state.val() + "</td>" + "<td>" + company_zip.val() + "</td>" + "<td>" + company_phone.val() + "</td>" + "<td>" + company_fax.val() + "</td>" + "<td>" + company_email.val() + "</td>" + "<td>" + company_website.val() + "</td>" + "</tr>" );
$( "#dialog-form" ).dialog( "close" );
} else if ( ajaxResult == "failed" ) {
$( "#dialog-form" ).dialog( "close" );
alert("There was an error updating the information to the database.");
}
}
}
var queryString = "?company_name=" + company_name.val() + "&company_address=" + company_address.val() + "&company_city=" + company_city.val() + "&company_state=" + company_state.val() + "&company_zip=" + company_zip.val() + "&company_phone=" + company_phone.val() + "&company_fax=" + company_fax.val() + "&company_email=" + company_email.val() + "&company_website=" + company_website.val();
ajaxRequest.open("GET", "ajax_add_company.php" + queryString, true);
ajaxRequest.send(null);
}
function editCompany(id) {
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Edit a Company": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkLength( company_name, "Company Name", 3, 50 );
bValid = bValid && checkLength( company_address, "Address", 3, 50 );
bValid = bValid && checkLength( company_city, "City", 1, 50 );
bValid = bValid && checkLength( company_state, "State", 2, 2 );
bValid = bValid && checkLength( company_zip, "Zip Code", 1, 50 );
bValid = bValid && checkRegexp( company_email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
if ( bValid ) {
ajaxEditCompany(id);
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
}
});
</script>
</head>
<body>
<div id="dialog-form" title="Edit Company Information">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">Company Name</label>
<input type="text" name="company_name" id="company_name" class="text ui-widget-content ui-corner-all" />
<label for="company_address">Company Address</label>
<input type="text" name="company_address" id="company_address" class="text ui-widget-content ui-corner-all" />
<label for="company_city">City</label>
<input type="text" name="company_city" id="company_city" class="text ui-widget-content ui-corner-all" />
<label for="company_state">State</label>
<input type="text" name="company_state" id="company_state" class="text ui-widget-content ui-corner-all" />
<label for="company_zip">Zip</label>
<input type="text" name="company_zip" id="company_zip" class="text ui-widget-content ui-corner-all" />
<label for="company_phone">Phone</label>
<input type="text" name="company_phone" id="company_phone" class="text ui-widget-content ui-corner-all" />
<label for="company_fax">Fax</label>
<input type="text" name="company_fax" id="company_fax" class="text ui-widget-content ui-corner-all" />
<label for="company_email">Email</label>
<input type="text" name="company_email" id="company_email" class="text ui-widget-content ui-corner-all" />
<label for="company_website">Website</label>
<input type="text" name="company_website" id="company_website" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
<div id="company-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="companies" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header">
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th>Phone</th>
<th>Fax</th>
<th>Email</th>
<th>Website</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr id="id-1">
<td>Ashton Martin</td>
<td>124 Main</td>
<td>Dallas</td>
<td>TX</td>
<td>75206</td>
<td>2148264955</td>
<td>2148264969</td>
<td>info@google.com</td>
<td>www.google.com</td>
<td><button onClick="editCompany('1');">Edit</button></td>
</tr>
<tr id="id-2">
<td>Mike Jones</td>
<td>124 Main</td>
<td>Dallas</td>
<td>TX</td>
<td>75206</td>
<td>2148245654</td>
<td>2148232165</td>
<td>info@mikejones.com</td>
<td>www.google.com</td>
<td><button onClick="editCompany('2');">Edit</button></td>
</tr>
<tr id="id-3">
<td>Nick Moore</td>
<td>124 Main</td>
<td>Dallas</td>
<td>TX</td>
<td>75206</td>
<td>2144584569</td>
<td>214789456</td>
<td>info@nickmoore.com</td>
<td>www.google.com</td>
<td><button onClick="editCompany('3');">Edit</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>