我正在尝试使用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>
答案 0 :(得分：0)
由于您有一些标点符号错误，因此未定义该函数。例如：
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.");
}
}
}
// Create a function that will receive data sent from the server
// Lighthart says: Semicolon missing near here.
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.");
}
}
}
似乎缺少分号。使用javascript linter会在脚本部分显示无数错误。试试http://www.jshint.com/并修正你的错误。
答案 1 :(得分：0)
<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 getCompanyData(id){
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(){
if(ajaxRequest.readyState == 4){
var ajaxResult = ajaxRequest.responseText;
var obj = jQuery.parseJSON(ajaxResult);
$("#c_id").val(obj.company_id);
$("#company_name").val(obj.company_name);
$("#company_address").val(obj.company_address);
$("#company_city").val(obj.company_city);
$("#company_state").val(obj.company_state);
$("#company_zip").val(obj.company_zip);
$("#company_phone").val(obj.company_phone);
$("#company_fax").val(obj.company_fax);
$("#company_email").val(obj.company_email);
$("#company_website").val(obj.company_website);
}
}
var queryString = "?company_id=" + id;
ajaxRequest.open("GET", "ajax_get_companies.php" + queryString, true);
ajaxRequest.send(null);
}
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(){
if(ajaxRequest.readyState == 4){
var ajaxResult = ajaxRequest.responseText;
var obj = jQuery.parseJSON(ajaxResult);
if (ajaxResult == "failed") {
alert("There was an error updating the database. Please try again.");
} else {
$( "#c_name-" + obj.company_id ).text( obj.company_name );
$( "#c_address-" + obj.company_id ).text( obj.company_address );
$( "#c_city-" + obj.company_id ).text( obj.company_city );
$( "#c_state-" + obj.company_id ).text( obj.company_state );
$( "#c_zip-" + obj.company_id ).text( obj.company_zip );
$( "#c_phone-" + obj.company_id ).text( obj.company_phone );
$( "#c_fax-" + obj.company_id ).text( obj.company_fax );
$( "#c_email-" + obj.company_id ).text( obj.company_email );
$( "#c_website-" + obj.company_id ).text( obj.company_website );
// $( "#company-row-" + obj.company_id ).html( "<td>" + obj.company_name + "</td>" + "<td>" + obj.company_address + "</td>" + "<td>" + obj.company_city + "</td>" + "<td>" + obj.company_state + "</td>" + "<td>" + obj.company_zip + "</td>" + "<td>" + obj.company_phone + "</td>" + "<td>" + obj.company_fax + "</td>" + "<td>" + obj.company_email + "</td>" + "<td>" + obj.company_website + "</td>" + "<td><button class=company-edit-button data-id=514>Update Company</button></td>" );
$( "#dialog-form" ).dialog( "close" );
}
}
}
var queryString = "?company_id=" + $("#c_id").val() + "&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_edit_company.php" + queryString, true);
ajaxRequest.send(null);
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Save": 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", 3, 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" );
//bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
//bValid = bValid && checkRegexp( company_address, /^([0-9a-zA-Z])+$/, "Address field only allows numbers and letters" );
if ( bValid ) {
ajaxSend = ajaxFunction();
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$(".company-edit-button").click(function(){
var id = $(this).data("id");
getCompanyResults = getCompanyData(id);
$( "#dialog-form" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<input type="hidden" name="c_id" id="c_id" class="text ui-widget-content ui-corner-all" />
<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="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" 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>Wesbite</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td id="c_name-514">Ashton Wynne</td>
<td id="c_address-514">124 Main</td>
<td id="c_city-514">Dallas</td>
<td id="c_state-514">TX</td>
<td id="c_zip-514">75206</td>
<td id="c_phone-514">2148264955</td>
<td id="c_fax-514">2148264969</td>
<td id="c_email-514">info@ashtonwynne.com</td>
<td id="c_website-514">www.google.com</td>
<td><button class="company-edit-button" data-id="514">Update Company</button></td>
</tr>
<tr>
<td id="c_name-515">Ashton Wynne</td>
<td id="c_address-515">124 Main</td>
<td id="c_city-515">Dallas</td>
<td id="c_state-515">TX</td>
<td id="c_zip-515">75206</td>
<td id="c_phone-515">2148264955</td>
<td id="c_fax-515">2148264969</td>
<td id="c_email-515">info@ashtonwynne.com</td>
<td id="c_website-515">www.google.com</td>
<td><button class="company-edit-button" data-id="515">Update Company</button></td>
</tr>
</tbody>
</table>
</div>