php - 每次点击 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 代码将是....

在此 php 代码中，包含将显示在该 div“nrow”中的部分。

<?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;