使用 AJAX 生成表格后，我的 javascript 出现问题。我正在生成一个包含用户插入值的表。这些值是从本地运行的 SQL EXPRESS 2012 数据库中检索的。检索到值后，它们将存储在字符串中。该字符串被发送回 index.thml。所有结果检索都由 validate.php 完成。
我已经用普通表尝试了我的代码，它就像一个魅力。但每当我使用生成的表时，它似乎拒绝运行 javascript。
我个人对此的想法是因为页面加载时表格不存在。该表是在页面加载后创建的，这会导致 javascript 无法正常运行。鼠标悬停时突出显示该行时我遇到了同样的问题。我通过调用 tr.mouseover 中的 mouseover 函数克服了这个问题。
老实说，我是 ajax 和 javascript 的新手，所以我现在拥有的几乎所有东西都来自互联网。我确实知道一切意味着什么，并为我的项目更改了代码。我真的希望你们能对此有所启发，因为我已经被困了好几天了。
那么让我们开始吧：
我的 index.html：
<html>
<head>
<title>ESL Checking Tool</title>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajaxrequest.js"></script>
<script type="text/javascript">
function callAjax(method, value, target)
{
if(encodeURIComponent)
{
var req = new AjaxRequest();
var params = "method=" + method + "&value=" + encodeURIComponent(value) + "&target=" + target;
req.setMethod("POST");
req.loadXMLDoc('validate.php', params);
}
}
</script>
<script type="text/javascript">
function mouseover()
{
var message = $('#message');
var tr = $('#table_id').find('tr');
tr.hover(
function()
{ //mouseover
$(this).addClass('row-highlight');
var values = '';
var tds = $(this).find('td');
$.each(tds, function(index, item)
{
values = values + 'td' + (index + 1) + ':' + item.innerHTML + '<br/>';
});
message.html(values);
},
function()
{ // mouseout
$(this).removeClass('row-highlight');
message.html('');
})
}
</script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body id="dt_example">
<form method="POST" action="non-Ajax form handler" onsubmit="return checkForm(this;">
<fieldset>
<legend>ESL Checkup Form</legend>
<p>Product: <input type="text" size="32" id="product" name="product" onkeyup="if(this.value != '') callAjax('checkProduct', this.value, this.id);">
<input id="valid_product" type="checkbox" disabled name="valid_product"></p>
<div id="rsp_product">
</div>
<p>Barcode: <input type="text" size="32" id="barcode" name="barcode" onkeyup="if(this.value != '') callAjax('checkBarcode', this.value, this.id);">
<input id="valid_barcode" type="checkbox" disabled name="valid_barcode"></p>
<div id="rsp_barcode"><!-- --></div>
<p>ESL: <input type="text" size="32" id="email" name="email" onkeyup="if(this.value != '') callAjax('checkEmail', this.value, this.id);">
<input id="valid_email" type="checkbox" disabled name="valid_email"></p>
<div id="rsp_email"><!-- --></div>
</fieldset>
</form>
<div id="message">
</div>
<a href="#" class="topopup">Click Here Trigger</a>
<div id="toPopup">
<div class="close"></div>
<span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
<div id="popup_content"> <!--your content start-->
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi
vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
commodo Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante. </p>
<br />
<p>
Donec eu libero sit amet quam egestas semper. Aenean ultricies mi
vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
commodo Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
<p align="center"><a href="#" class="livebox">Click Here Trigger</a></p>
</div> <!--your content end-->
</div> <!--toPopup end-->
<div class="loader"></div>
<div id="backgroundPopup"></div>
</body>
</html>
我的风格/style.css：
/*
author: istockphp.com
*/
#backgroundPopup {
z-index:1;
position: fixed;
display:none;
height:100%;
width:100%;
background:#000000;
top:0px;
left:0px;
}
#toPopup {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #ccc;
border-radius: 3px 3px 3px 3px;
color: #333333;
display: none;
font-size: 14px;
left: 50%;
margin-left: -402px;
position: fixed;
top: 20%;
width: 800px;
z-index: 2;
}
div.loader {
background: url("../img/loading.gif") no-repeat scroll 0 0 transparent;
height: 32px;
width: 32px;
display: none;
z-index: 9999;
top: 40%;
left: 50%;
position: absolute;
margin-left: -10px;
}
div.close {
background: url("../img/closebox.png") no-repeat scroll 0 0 transparent;
bottom: 24px;
cursor: pointer;
float: right;
height: 30px;
left: 27px;
position: relative;
width: 30px;
}
span.ecs_tooltip {
background: none repeat scroll 0 0 #000000;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
display: none;
font-size: 11px;
height: 16px;
opacity: 0.7;
padding: 4px 3px 2px 5px;
position: absolute;
right: -62px;
text-align: center;
top: -51px;
width: 93px;
}
span.arrow {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid #000000;
display: block;
height: 1px;
left: 40px;
position: relative;
top: 3px;
width: 1px;
}
div#popup_content {
margin: 4px 7px;
}
.row-highlight {
background-color: #0099FF;
}
我的 ajaxrequest.js：
function AjaxRequest()
{
var req;
var method="GET";
var nocache=false;
var handler;
this.loadXMLDoc=function(url,params)
{
if(window.XMLHttpRequest)
{
try
{
req=new XMLHttpRequest();
}
catch(e)
{
req=false;
}
}
else if(window.ActiveXObject)
{
try
{
req=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
req=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
req=false;
}
}
}
if(req)
{
if(!handler)handler=processReqChange;req.onreadystatechange=handler;if(nocache)
{
params+=(params!='')?'&'+(new Date()).getTime():(new Date()).getTime();
}
if(method=="POST")
{
req.open("POST",url,true);
req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
req.send(params);
}
else
{
if(params)url+="?"+ params;req.open(method,url,true);req.send(null);
}
return true;
}
return false;
}
this.setMethod=function(newmethod)
{
method=newmethod.toUpperCase();
}
this.nocache=function()
{
nocache=true;
}
this.setHandler=function(fn)
{
handler=fn;
}
this.getResponse=function()
{
return req;
}
var getNodeValue=function(parent,tagName)
{
var node=parent.getElementsByTagName(tagName)[0];
return(node&&node.firstChild)?node.firstChild.nodeValue:'';
}
var processReqChange=function()
{
if(req.readyState==4&&req.status==200)
{
var response=req.responseXML.documentElement;
var commands=response.getElementsByTagName('command');
for(var i=0;i<commands.length;i++)
{
method=commands[i].getAttribute('method');
switch(method)
{
case'alert':var message=getNodeValue(commands[i],'message');
window.alert(message);
break;
case'setvalue':var target=getNodeValue(commands[i],'target');
var value=getNodeValue(commands[i],'value');
if(target&&value!=null)
{
document.getElementById(target).value=value;
}
break;
case'setdefault':var target=getNodeValue(commands[i],'target');
if(target)
{
document.getElementById(target).value=document.getElementById(target).defaultValue;
}
break;
case'focus':var target=getNodeValue(commands[i],'target');
if(target)
{
document.getElementById(target).focus();
}
break;
case'setcontent':var target=getNodeValue(commands[i],'target');
var content=getNodeValue(commands[i],'content');
if(target&&(content!=null))
{
document.getElementById(target).innerHTML=content;
}
break;
case'setstyle':var target=getNodeValue(commands[i],'target');
var property=getNodeValue(commands[i],'property');
var value=getNodeValue(commands[i],'value');
if(target&&property&&(value!=null))
{
document.getElementById(target).style[property]=value;
}
break;
case'setproperty':var target=getNodeValue(commands[i],'target');
var property=getNodeValue(commands[i],'property');
var value=getNodeValue(commands[i],'value');
if(value=="true")value=true;
if(value=="false")value=false;
if(target&&document.getElementById(target))
{
document.getElementById(target)[property]=value;
}
break;
default:window.console.log("Error: unrecognised method '"+ method+"' in processReqChange()");
}
}
}
}
}
我的 script.js：
/*
author: istockphp.com
*/
jQuery(function($) {
$("a.topopup").click(function() {
loading(); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup(); // function show popup
}, 500); // .5 second
return false;
});
$("tr#row-clck").click(function() {
loading(); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup(); // function show popup
}, 500); // .5 second
return false;
});
/* event for close the popup */
$("div.close").hover(
function() {
$('span.ecs_tooltip').show();
},
function () {
$('span.ecs_tooltip').hide();
}
);
$("div.close").click(function() {
disablePopup(); // function close pop up
});
$(this).keyup(function(event) {
if (event.which == 27) { // 27 is 'Ecs' in the keyboard
disablePopup(); // function close pop up
}
});
$("div#backgroundPopup").click(function() {
disablePopup(); // function close pop up
});
$('a.livebox').click(function() {
alert('Hello World!');
return false;
});
/************** start: functions. **************/
function tablerowclick() {
loading(); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup(); // function show popup
}, 500); // .5 second
return false;
}
function loading() {
$("div.loader").show();
}
function closeloading() {
$("div.loader").fadeOut('normal');
}
var popupStatus = 0; // set value
function loadPopup() {
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
$("#toPopup").fadeIn(0500); // fadein popup div
$("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
$("#backgroundPopup").fadeIn(0001);
popupStatus = 1; // and set value to 1
}
}
function disablePopup() {
if(popupStatus == 1) { // if value is 1, close popup
$("#toPopup").fadeOut("normal");
$("#backgroundPopup").fadeOut("normal");
popupStatus = 0; // and set value to 0
}
}
/************** end: functions. **************/
}); // jQuery End
我的 validate.php：
<?PHP
// check that all POST variables have been set
if(!isset($_POST['method']) || !$method = $_POST['method']) exit;
if(!isset($_POST['value']) || !$value = $_POST['value']) exit;
if(!isset($_POST['target']) || !$target = $_POST['target']) exit;
$serverName = "localhost\sqlexpress"; //serverName\instanceName
$connectionInfo = array( "Database"=>"MIQ", "UID"=>"sa", "PWD"=>"miq123");
$conn = sqlsrv_connect( $serverName, $connectionInfo);
if( $conn ) {
}else{
echo "Connection could not be established.<br />";
die( print_r( sqlsrv_errors(), true));
}
$passed = false;
$retval = '';
switch($method)
{
case 'checkProduct':
$query = "SELECT PRODUCT_NAME, ESL, Product FROM ESL, SIQEE_IM_ITEM_INFORMATION WHERE ESL.Product = SIQEE_IM_ITEM_INFORMATION.GTIN AND SIQEE_IM_ITEM_INFORMATION.PRODUCT_NAME LIKE '%$value%'";
//Execute query
$qry_result = sqlsrv_query($conn, $query, array(), array("Scrollable"=>"buffered")) or die(sqlsrv_error());
//Build Result String
$display_string = '<table cellpadding="0" cellspacing="0" border="0" class="display" id="table_id" width="60%">';
$display_string .= "<thead>";
$display_string .= "<tr>";
$display_string .= "<th>ESL</th>";
$display_string .= "<th>Barcode</th>";
$display_string .= "<th>Product</th>";
$display_string .= "</tr>";
$display_string .= "</thead>";
$display_string .= "<tbody>";
// Insert a new row in the table for each person returned
while($row = sqlsrv_fetch_array($qry_result)){
$display_string .= "<tr id='row-clck' onmouseover='mouseover();'>";
$display_string .= "<td>$row[ESL]</td>";
$display_string .= "<td>$row[Product]</td>";
$display_string .= "<td>$row[PRODUCT_NAME]</td>";-
$display_string .= "</tr>";
}
$display_string .= "</tbody>";
$display_string .= "</table>";
$num_results = sqlsrv_num_rows($qry_result);
if ($num_results > 0){
$retval = $display_string;
$passed = true;
}
else{
$retval = "Dit product is nog niet gekoppeld";
$passed = false;
}
// ...
// set the $retval message, and the $passed variable to true or false
// ...
break;
case 'checkBarcode':
$query = "SELECT PRODUCT_NAME, ESL, Product FROM ESL, SIQEE_IM_ITEM_INFORMATION WHERE ESL.Product = '$value' AND SIQEE_IM_ITEM_INFORMATION.GTIN = '$value'";
//Execute query
$qry_result = sqlsrv_query($conn, $query, array(), array("Scrollable"=>"buffered")) or die(sqlsrv_error());
//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>ESL</th>";
$display_string .= "<th>Barcode</th>";
$display_string .= "<th>Product</th>";
$display_string .= "</tr>";
// Insert a new row in the table for each person returned
while($row = sqlsrv_fetch_array($qry_result)){
$display_string .= "<tr>";
$display_string .= "<td>$row[ESL]</td>";
$display_string .= "<td>$row[Product]</td>";
$display_string .= "<td>$row[PRODUCT_NAME]</td>";-
$display_string .= "</tr>";
}
$display_string .= "</table>";
$num_results = sqlsrv_num_rows($qry_result);
if ($num_results > 0){
$retval = $display_string;
$passed = true;
}
else{
$retval = "Deze barcode is nog niet gekoppeld";
$passed = false;
}
// ...
// set the $retval message, and the $passed variable to true or false
// ...
break;
case 'checkAge':
if ($value >= 16 && $value <= 100){
$retval = "is helemaal goed";
$passed = true;
}
else{
$retval = "Nope no can do";
$passed = false;
}
// ...
// set the $retval message, and the $passed variable to true or false
// ...
break;
case 'checkEmail':
//build query
$query2 = "SELECT PRODUCT_NAME, ESL, Product FROM ESL, SIQEE_IM_ITEM_INFORMATION WHERE ESL.ESL = '$value' AND SIQEE_IM_ITEM_INFORMATION.GTIN = ESL.Product";
//Execute query
$qry_result2 = sqlsrv_query($conn, $query2, array(), array("Scrollable"=>"buffered")) or die(sqlsrv_error());
//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>ESL</th>";
$display_string .= "<th>Barcode</th>";
$display_string .= "<th>Product</th>";
$display_string .= "</tr>";
// Insert a new row in the table for each person returned
while($row = sqlsrv_fetch_array($qry_result2)){
$display_string .= "<tr>";
$display_string .= "<td>$row[ESL]</td>";
$display_string .= "<td>$row[Product]</td>";
$display_string .= "<td>$row[PRODUCT_NAME]</td>";-
$display_string .= "</tr>";
}
$display_string .= "</table>";
$num_results2 = sqlsrv_num_rows($qry_result2);
if ($num_results2 > 0){
$retval = $display_string;
$passed = true;
}
else{
$retval = "Deze ESL is nog niet gekoppeld";
$passed = false;
}
// ...
// set the $retval message, and the $passed variable to true or false
// ...
break;
default: exit;
}
include "class.xmlresponse.php";
$xml = new xmlResponse();
$xml->start();
// set the response text
$xml->command('setcontent',
array('target' => "rsp_$target", 'content' => htmlentities($retval))
);
if($passed) {
// set the message colour to green and the checkbox to checked
$xml->command('setstyle',
array('target' => "rsp_$target", 'property' => 'color', 'value' => 'green')
);
$xml->command('setproperty',
array('target' => "valid_$target", 'property' => 'checked', 'value' => 'true')
);
} else {
// set the message colour to red, the checkbox to unchecked and focus back on the field
$xml->command('setstyle',
array('target' => "rsp_$target", 'property' => 'color', 'value' => 'red')
);
$xml->command('setproperty',
array('target' => "valid_$target", 'property' => 'checked', 'value' => 'false')
);
$xml->command('focus', array('target' => $target));
}
$xml->end();
?>