每次點擊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);    
     } 
     }