我制作了时间表。问题是每当我添加一个动态行时,我的第二行添加的函数自动完成功能都不起作用。当我将按钮保存在页面底部时,我的函数enter
(用于自动完成)将通过刷新页面来重新进行。这是我的autocomplete.php文件的代码:
<!--------------------------------- JOURNÉE DE DIMANCHE --------------------------->
<b>Dimanche</b> </br><?php echo $date1 ?>
</td>
<!-- numéro de projet du dimanche -->
<td>
<span id="numpro" >
<form method="post" action="" onsubmit="return false;">
<input type="text" id="name" name="add_name"onkeypress="return handleEnter(event, this, 'task');"/> <input onclick="addRow(this.form);" type="button" value="Add row" />
</form>
<html>
<div >
<form method="post" action="" onsubmit="return false;">
<div id="itemRows">
<?php
if($result!=false && mysqli_num_rows($result)>0){
while($product = mysqli_fetch_array($result)): ?>
<p id="oldRow<?=$product['id']?>"> <input type="text" name="name<?=$product['id']?>" value="<?=$product['name']?>" />
<?php endwhile;
}
?>
</div>
<p><input type="submit" name="ok" value="Save Changes"></p>
</form>
</div>
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'"> <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>
</span>
</td>
</td>
<!-- client du dimanche -->
<td>
<span id="proclient">
<input type="text" name="client1" class = "client" size="12" id ="client1" disabled />
</span>
</td>
<!-- description du projet de dimanche -->
<td>
<span id="prodesc">
<input type="text" name="desc1" size="30" id ="desc1" class "desc" disabled />
</span>
</td>
<!-- ddescription de la tache du dimanche -->
<td>
<span id="protache">
<textarea rows="1" cols="20" name="taskDesc1" id ="task1" class "task"> </textarea>
</span>
</td>
<!-- lieu pour dimanche -->
<td>
<span id="prolieu">
<input type="text" name="prolieu1" size="10" id ="lieu1" class "lieu">
</span>
</td>
<!-- tache -->
<td>
<span id="tache">
<!-- <input type="text" name="tache" size="30" id="tache"class= "tache" /> -->
<!-- début section cobobox tache avec tool tip -->
<label title="Select your state"> <select title="Select your state" id="state" name="state">
<?php
$stmt->execute();
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo ' <option title="';
echo $row['tacName'];
echo '">';
echo $row['tacId'];
echo '</option>'."\n";
$task = array();
//echo '<option value="'.$row['tacName'].'">'.$row['tacId'].'</option>'."\n";
}
?>
</select>
</label>
<!-- Fin section cobobox tache avec tool tip -->
</span>
</td>
<!-- calculter le temps pour le diamnche -->
<td>
<span id="calculTemps">
<input type="number" name="tempsd" size="30" id="temps1"class= "temps" min= "0" max="24" value="0" />
</span>
</td>
这是我的index.php
<html>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<LINK rel=stylesheet type="text/css" href="main.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script type="text/javascript">
//------------------AUTO COMPLETE NUMÉRO DE PROJET----------------------
$(document).ready(function(){
//-------AUTO COMPLETE DIMANCHE PROJET-----
$("#name").autocomplete({
source:'getautocomplete.php',
minLength:1
});
//-------AUTO COMPLETE LUNDI PROJET-----
$("#proj1").autocomplete({
source:'getautocomplete.php',
minLength:1
});
//-------AUTO COMPLETE MARDI PROJET-----
$("#proj2").autocomplete({
source:'getautocomplete.php',
minLength:1
});
//-------AUTO COMPLETE MERCREDI PROJET-----
$("#proj3").autocomplete({
source:'getautocomplete.php',
minLength:1
});
//-------AUTO COMPLETE JEUDI PROJET-----
$("#proj4").autocomplete({
source:'getautocomplete.php',
minLength:1
});
//-------AUTO COMPLETE VENDREDI PROJET-----
$("#proj5").autocomplete({
source:'getautocomplete.php',
minLength:1
});
//-------AUTO COMPLETE VENDREDI PROJET-----
$("#proj6").autocomplete({
source:'getautocomplete.php',
minLength:1
});
});
//------------------COMPLETE CLIENT DESC DIMANCHE----------------------
function handleEnter(e, obj, field){
if (e.keyCode == 13 || e.which == 13){
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)
{
tempArrayInJS = JSON.parse(xmlhttp.responseText);
$("#client1").val( tempArrayInJS[0]['cliName']);
$("#desc1").val( tempArrayInJS[0]['proDescription']);
}
}
xmlhttp.open("GET","completeclient.php?q="+obj.value,true);
xmlhttp.send();
}
//Enter was pressed, handle it here
}
//------------------COMPLETE CLIENT DESC LUNDI----------------------
function handleEnter2(e, obj, field){
if (e.keyCode == 13 || e.which == 13){
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)
{
tempArrayInJS = JSON.parse(xmlhttp.responseText);
$("#client2").val( tempArrayInJS[0]['cliName']);
$("#projDesc2").val( tempArrayInJS[0]['proDescription']);
}
}
xmlhttp.open("GET","completeclient.php?q="+obj.value,true);
xmlhttp.send();
}
//Enter was pressed, handle it here
}
//------------------COMPLETE CLIENT DESC MARDI----------------------
function handleEnter3(e, obj, field){
if (e.keyCode == 13 || e.which == 13){
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)
{
tempArrayInJS = JSON.parse(xmlhttp.responseText);
$("#client3").val( tempArrayInJS[0]['cliName']);
$("#projDesc3").val( tempArrayInJS[0]['proDescription']);
}
}
xmlhttp.open("GET","completeclient.php?q="+obj.value,true);
xmlhttp.send();
}
//Enter was pressed, handle it here
}
//------------------COMPLETE CLIENT DESC MERCREDI----------------------
function handleEnter4(e, obj, field){
if (e.keyCode == 13 || e.which == 13){
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)
{
tempArrayInJS = JSON.parse(xmlhttp.responseText);
$("#client4").val( tempArrayInJS[0]['cliName']);
$("#projDesc4").val( tempArrayInJS[0]['proDescription']);
}
}
xmlhttp.open("GET","completeclient.php?q="+obj.value,true);
xmlhttp.send();
}
//Enter was pressed, handle it here
}
//------------------COMPLETE CLIENT DESC JEUDI----------------------
function handleEnter5(e, obj, field){
if (e.keyCode == 13 || e.which == 13){
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)
{
tempArrayInJS = JSON.parse(xmlhttp.responseText);
$("#client5").val( tempArrayInJS[0]['cliName']);
$("#projDes5").val( tempArrayInJS[0]['proDescription']);
}
}
xmlhttp.open("GET","completeclient.php?q="+obj.value,true);
xmlhttp.send();
}
//Enter was pressed, handle it here
}
//------------------COMPLETE CLIENT DESC VENDREDI----------------------
function handleEnter6(e, obj, field){
if (e.keyCode == 13 || e.which == 13){
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)
{
tempArrayInJS = JSON.parse(xmlhttp.responseText);
$("#client6").val( tempArrayInJS[0]['cliName']);
$("#projDes6").val( tempArrayInJS[0]['proDescription']);
}
}
xmlhttp.open("GET","completeclient.php?q="+obj.value,true);
xmlhttp.send();
}
//Enter was pressed, handle it here
}
//------------------COMPLETE CLIENT DESC Samedi----------------------
function handleEnter7(e, obj, field){
if (e.keyCode == 13 || e.which == 13){
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)
{
tempArrayInJS = JSON.parse(xmlhttp.responseText);
$("#client7").val( tempArrayInJS[0]['cliName']);
$("#projDes7").val( tempArrayInJS[0]['proDescription']);
}
}
xmlhttp.open("GET","completeclient.php?q="+obj.value,true);
xmlhttp.send();
}
//Enter was pressed, handle it here
}
</script>
</head>
<body>
<script type="text/javascript" src="script/calcul.js"></script>
答案 0 :(得分:0)
我只是略过了你的代码(因为它的例子太多了),但看起来你的javascript按照id工作。
$("#proj4").autocomplete({...
考虑将其更改为按类工作:".proj4"
,以便自动完成功能可以在多个元素上运行。