2012-12-27 46 views
-2

我有一張表,其結構如下。我不希望鏈接到外部PHP腳本,而是希望PHP腳本在出現在相應行下方的DIV中執行。我想這可以通過插入一個跨越表的DIV在其中的行,然後在該DIV中加載外部腳本來完成。使用jQuery在每個鏈接之後將PHP響應加載到DIV中

<table width="100%" border="0" cellspacing="0" cellpadding="5"> 
    <tr class="tableTitle"> 
    <td></td> 
    <td>Category</td> 
    <td>Price</td> 
    <td>Stock</td> 
    <td>Options</td> 
    </tr> 
    <tr> 
    <td><a href="getProduct.php?id=634">007: Quantum of Solace</a></td> 
    <td>Gaming > Xbox 360 > Games > Shooter</td> 
    <td>$22.00</td> 
    <td>0</td> 
    <td><a href="productDelete.php?id=634">delete</a></td> 
    </tr> 
    <tr> 
    <td><a href="getProduct.php?id=711">2006 FIFA World Cup Germany</a></td> 
    <td>Gaming > Xbox 360 > Games > Sports</td> 
    <td>$9.00</td> 
    <td>0</td> 
    <td><a href="productDelete.php?id=711">delete</a></td> 
    </tr> 
    <tr> 
    <td><a href="getProduct.php?id=148">2010 FIFA World Cup South Africa</a></td> 
    <td>Gaming > PlayStation 3</td> 
    <td>$15.00</td> 
    <td>0</td> 
    <td><a href="productDelete.php?id=148">delete</a></td> 
    </tr> 
</table> 

這是jQuery的代碼中,我試圖讓工作:

$("a").click(function(event) { 
    var clicked = $(this); 
    $.get($(this).attr('href'), 
    function(data){ 
     $(clicked).next().find('tr').after(data); 
    }); 
}); 

任何幫助表示讚賞:)

+0

請使用AJAX,IFRAME ,或直接從服務器回顯 –

+0

而不是打開新窗口中的鏈接,我想getProduct.php?id =加載在一個DIV下面的鏈接,因此頁面不必刷新。 – cianz

+0

然後請使用ajax並將您的服務器中的內容替換爲div的內容。 –

回答

0

我相信你說你希望你的HTML DIV PHP內,這裏的一個例子,希望這有助於。

<?php 
$con = mysql_connect("localhost", "cis246", "[email protected]") 
or exit(mysql_error()); 
$db = mysql_select_db("students",$con) 
or die(mysql_error()); 
$sql = mysql_query("select * from CIS110"); 
echo "<table cellspacing='0' border='1'>"; 
echo "<tr><th>SID</th><th>FirstName</th><th>LastName</th></tr>"; 
while($row = mysql_fetch_object($sql)) { 
$sid = $row -> SID; 
$LastName = $row -> LastName; 
$firstName = $row -> FirstName; 
echo("<tr><td>$sid</td><td>$LastName</td><td>$FirstName</td></tr>"); 
} 
echo "</table>"; 
mysql_close($con); 
?> 
+0

這不是我所問的,而是我自己自己解決的。儘管感謝您的回覆。 – cianz

0

在文檔按需(使用javascript)中實際執行PHP腳本是不可能的。你可以做的是使用iframe和文檔加載到使用target屬性a標籤:

<a href=somescript.php target=product123>Link</a> 
... 
<iframe id=product123 frameborder=0></iframe> 

這將鏈接的href加載到由ID目標屬性指定的iframe沒有任何JavaScript。並記得以某種方式隱藏你的iframe(css?js?),直到點擊所需的鏈接。您也可以在點擊鏈接時動態創建並插入iframe,但我認爲這僅限於同一個域。

+0

這不是我所問的,而是我自己自己解決的。儘管感謝您的回覆。 – cianz

0

那麼我自己使用Prototype而不是jQuery來解決它。希望這會幫助其他人。

的JavaScript:

<script src="js/prototype.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    function getDetails(targetDiv) { 
     new Ajax.Updater(targetDiv, 'productGet.php', { method: 'get', parameters: 'id='+targetDiv }); 
    } 
</script> 

HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="5"> 
    <tr class="tableTitle"> 
    <td></td> 
    <td>Category</td> 
    <td>Price</td> 
    <td>Stock</td> 
    <td>Options</td> 
    </tr> 
    <tr> 
    <td><a href="javascript:void(0)" onclick="javascript:getDetails(pid634); return false;">007: Quantum of Solace</a> 
     </td> 
    <td>Gaming > Xbox 360 > Games > Shooter</td> 
    <td>$22.00</td> 
    <td>0</td> 
    <td><a href="productDelete.php?id=634">delete</a> 
     </td> 
    </tr> 
    <tr> 
    <td colspan="5"><div id="pid634"></div></td> 
    </tr> 
    <tr> 
    <td><a href="javascript:void(0)" onclick="javascript:getDetails(pid711); return false;">2006 FIFA World Cup Germany</a> 
      <br> 
     <span class="offset">2006 FIFA World Cup</span> 
     </td> 
    <td>Gaming > Xbox 360 > Games > Sports</td> 
    <td>$9.00</td> 
    <td>0</td> 
    <td><a href="productDelete.php?id=711">delete</a> 
      <br> 
     <a href="productDelete.php?id=711&aliasId=0">delete</a> 
     </td> 
    </tr> 
    <tr> 
    <td colspan="5"><div id="pid711"></div></td> 
    </tr> 
    <tr> 
    <td><a href="javascript:void(0)" onclick="javascript:getDetails(pid148); return false;">2010 FIFA World Cup South Africa</a> 
     </td> 
    <td>Gaming > PlayStation 3</td> 
    <td>$15.00</td> 
    <td>0</td> 
    <td><a href="productDelete.php?id=148">delete</a> 
     </td> 
    </tr> 
    <tr> 
    <td colspan="5"><div id="pid148"></div></td> 
    </tr> 
</table> 

如果你正在使用jQuery藏漢作爲原型,一定要避免任何衝突:

<script type="text/javascript"> 
    var $j = jQuery.noConflict(); 
</script>