每次点击href使用jquery显示相同的DIV

Question

我在点击href时显示div中包含的特定表单域时遇到了问题。

这里的代码.......

JS代码............

<script> 
$(document).ready(function(){ 

    $('#nrow').hide(); 
    $('#npart').click(function(event){ 
     $('#nrow').show(); 
     event.preventDefault(); 
    }); 
}); 


function expandable_parts() 
{ 
    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) 
     { 
     document.getElementById("nrow").innerHTML=xmlhttp.responseText; 
     } 
     } 
    xmlhttp.open("GET","exp.php",true); 
    xmlhttp.send(null); 
} 
</script> 

的HTML代码将被.....

<form name="zone_form" method="post" action="product_code.php" onsubmit=""> 
    <input type="hidden" name="frmtype" value="new_product" /> 
    <input type="hidden" name="node" value="<?php echo $_REQUEST['node']; ?>" /> 
    <input type="hidden" name="subnode" value="<?php echo $_REQUEST['subnode']; ?>" /> 
    <table width="100%" border="0" cellpadding="2" cellspacing="0"> 
     <tr> 
      <td valign="top">Product Name:</td> 
      <td><input type="text" name="txt_pro" /></td> 
      <td valign="top">Designator</td> 
      <td><input type="text" name="txt_desig" /></td> 
      <td valign="top">Product Quantity:</td> 
      <td><input type="text" name="txt_pquan" /></td> 
     </tr> 
     <tr> 
      <td valign="top">Price <br/>per product</td> 
      <td><input type="text" name="txt_pprice" /></td> 
      <td valign="top">Total Amount</td> 
      <td colspan="3"><input type="text" name="txt_pamount" /></td> 
     </tr> 
     <tr><td colspan="6">&nbsp;</td></tr> 
     <tr><td colspan="6"><strong>Parts Library</strong></td></tr> 
     <tr> 
      <td valign="top">Description/Identifier:</td> 
      <td> <input type="text" id="demo-input-facebook-theme" name="txt_part" class="ignore"/> 
      <script> 
      $("#demo-input-facebook-theme").tokenInput([ 
      <?php 
      $sql = mysql_query("select * from tbl_protype"); 
      while($sql1 = mysql_fetch_object($sql)) 
      { 
       echo "{'id':'$sql1->part_id','name':'$sql1->part_company_name'},"; 
      }?> 
      ], { 
       theme: "facebook" 
      }); 
      </script> 
      </td> 
      <td>Company P/N</td> 
      <td><input type="text" name="txt_comp" /> </td> 
      <td>Footprint</td> 
      <td><input type="text" name="txt_foot" /></td> 
     </tr> 
     <tr> 
      <td colspan="6">&nbsp;</td> 
     </tr> 
     <tr> 
      <td colspan="6"><div id="nrow"></div></td> 
     </tr> 
     <tr> 
      <td colspan="6"><a href="" name="npart" id="npart" class="npart" onclick="expandable_parts()">Add New Part</a></td> 
     </tr>   

     <tr> 
      <td colspan="6" align="left"><input type="submit" id="submit" value="submit"></td> 
     </tr> 
    </table> 

</form> 

PHP代码将是....

在其中包含将显示在该div“nrow”的部分这PHP代码。

<?php 
include "../../config/connection.php"; 

      echo "<table width='100%' border='0' cellpadding='2' cellspacing='0'> 
      <tr><td valign='top'>Description/Identifier:</td> 
      <td> <input type='text' id='demo-input-facebook-theme' name='txt_part' class='ignore'/> 
      <script> 
      $('#demo-input-facebook-theme').tokenInput(["; 
      $sql = mysql_query("select * from tbl_protype"); 
      while($sql1 = mysql_fetch_object($sql)) 
      { 
       echo "{'id':'$sql1->part_id','name':'$sql1->part_company_name'},"; 
      } 
      echo " 
      ], { 
       theme: 'facebook' 
      }); 
      </script> 
      </td> 
      <td>Company P/N</td> 
      <td><input type='text' name='txt_comp' /> </td> 
      <td>Footprint</td> 
      <td><input type='text' name='txt_foot' /></td></table>"; 
      ?> 

从这段代码，只有一次会显示特定的div“nrow”。但我需要每次当我点击该href，新div“nrow”将能够显示。完蛋了.....

Answer 1

you have to append the new html, in your code the hole content of the div is replacing 

document.getElementById("nrow").innerHTML=xmlhttp.responseText; 

to 

document.getElementById("nrow").innerHTML= document.getElementById("nrow").innerHTML + xmlhttp.responseText; 

Answer 2

首先，如果你想多nrow元素，必须使用class代替id因为一个ID必须为每个元素独特的DOM。

根据您的问题，试试这个：

在HTML：

<td colspan="6" id="nrows_container"></td> 

在你的JavaScript：

xmlhttp.onreadystatechange=function() 
     { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
     var newNrow = document.createElement('div'); 
     newNrow.className = 'nrow'; 
     newNrow.innerHTML=xmlhttp.responseText; 
     document.getElementById('nrows_container').appendChild(newNrow);    
     } 
     }