2012-10-23 68 views
-2

我需要創建一個動態生成的窗口,其中顯示從數據庫中獲取的圖像和各種元素。彈出窗口工作,但它沒有得到我想要使用onclick函數的「id」。Popup w/jquery&Database

使用控制檯我收到以下消息:XMLHttpRequest無法加載getProduct.php?id = undefined。 Access-Control-Allow-Origin不允許Origin null。我不知道該怎麼做,進一步定義「id」。

HTML & JS:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script type="text/javascript"> 
$(document).ready(function() { 

onClickRegister = function(){ 
var id = $(this).attr('id'); 

    b = $("#blanket"); 
    b.css("display","block"); 
    b.css("position","fixed"); 
    b.css("width", window.innerWidth); 
    b.css("height", window.innerHeight); 
    b.css("background-color", "rgba(0, 0, 0, 0.7)"); 
    f=$("#openImg"); 
    f.css("position", "fixed"); 
    f.css("top", "10%"); 
    f.css("left", "10%"); 

    $.getJSON("getProduct.php?id="+id,function(data){ 
     var img = data.data.prodImg; 
     var name = data.data.prodName; 
     var price = data.data.prodPrice; 
     var description = data.data.prodDesc; 
     var qty = data.data.prodQty; 
     $("#openImg").html("<p style='float:right; margin: 0; padding: 0;'><a href='#' id='close' onClick='onClickClose();'>[X]</a></p><br /><img src='"+img+"' width='544' height='512' /><br />Name: "+name+"<br />Price: "+price+"<br />Qty: "+qty+"<br />Description: "+description) 
    }); 
}; 
window.onresize = function() { 
    if ($("#blanket").length > 0) { 
     b.css("width", window.innerWidth); 
     b.css("height", window.innerHeight); 
    } 
}; 
}); 
</script> 
</head><body> 

<div id="body"><div id="wrapper"> 

<a href="#" onclick="onClickRegister()" id="1"><img src="images/plug1_s.jpg" width="200" height="200" /></a> 
<a href="#" onclick="onClickRegister()" id="2"><img src="images/plug2_s.jpg" width="200" height="200" /></a> 
<a href="#" onclick="onClickRegister()" id="3"><img src="images/plug3_s.jpg" width="200" height="200" /></a> 
<a href="#" onclick="onClickRegister()" id="4"><img src="images/plug4_s.jpg" width="200" height="200" /></a> 
<a href="#" onclick="onClickRegister()" id="5"><img src="images/plug5_s.jpg" width="200" height="200" /></a> 
<a href="#" onclick="onClickRegister()" id="6"><img src="images/plug6_s.jpg" width="200" height="200" /></a> 

<div id="blanket"><div id="openImg"> 

</div></div> 

<script type="text/javascript"> 
function onClickClose(){ 
    $("#blanket").hide(); 
} 
</script></div></div> 
</body></html> 

PHP:

// retval: 0 - login ok, 1 - login failed, 2 - internal error 
$json = array("retval" => 2, "data" => NULL, "debug" => ""); 

$id=json_decode($_REQUEST['id']); 


$sql="SELECT * FROM prodTB WHERE prodId=" . $id; 

$json['debug'] .= "SQL query was: ".$sql."\n"; 
$result=mysql_query($sql); 
if (!$result) { 
    $json['debug'] .= "SQL query failed\n"; 
    $json['debug'] .= "Other output: ". ob_get_contents(); 
    ob_end_clean(); 
    die(json_encode($json)); 
} 
$count=mysql_num_rows($result); 

if($count==1){ 
    $json['retval'] = 0; 
    $json['data'] = mysql_fetch_assoc($result); 
} else { 
    $json['retval'] = 1; 
} 
$json['debug'] .= "Other output: ". ob_get_contents(); 
ob_end_clean(); 
echo json_encode($json); 

數據庫表結構:

CREATE TABLE `prodTB` (
`prodId` int(11) NOT NULL, 
`prodImg` varchar(80) COLLATE utf8_unicode_ci NOT NULL, 
`prodName` varchar(50) COLLATE utf8_unicode_ci NOT NULL, 
`prodPrice` decimal(10,2) NOT NULL, 
`prodDesc` longtext COLLATE utf8_unicode_ci NOT NULL, 
`prodQty` int(11) NOT NULL, 
PRIMARY KEY (`prodId`) 
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; 
+1

請不要使用'mysql_ *'函數編寫新代碼。他們不再被維護,並且社區已經開始[棄用流程](http://goo.gl/q0gwD)。請參閱 [紅盒子](http://goo.gl/OWwr2)?相反,您應該瞭解[準備好的 聲明](http://goo.gl/orrj0)並使用[PDO](http://goo.gl/TD3xh)或[MySQLi](http://in3.php達網絡/ mysqli的)。如果你不能決定哪些,[這篇文章](http://goo.gl/YXyWL)會幫助你。 如果你選擇PDO,[這裏是很好的教程](http://goo.gl/b2ATO)。 另請參閱[爲什麼不應該在PHP中使用mysql函數?](http://goo.gl/J5jAo) –

+0

如果您使用jQuery,我建議使用jQuery UI對話框http://jqueryui.com/dialog /對你來說這很容易,可能。您可以輕鬆地在窗口之間傳遞變量,因爲它們實際上並不是窗口,而是在同一窗口中的DIV。 – user1477388

+0

@Phawkes你有沒有嘗試在''href =「#」onclick =「onClickRegister(this)」''裏面傳遞'this'。看起來你不能正確地獲取ID。 –

回答

1

由於您使用jQuery的 - 你可以擺脫直列onClicks和綁定在DOM準備好的事件處理程序。

$(document).ready(function() { 
    var b = $("#blanket"); 
    var f = $("#openImg"); 
    $('#wrapper a').click(function() { 
     var id = $(this).attr('id');// this will get your ID now 

     b.css("display", "block"); 
     b.css("position", "fixed"); 
     b.css("width", window.innerWidth); 
     b.css("height", window.innerHeight); 
     b.css("background-color", "rgba(0, 0, 0, 0.7)"); 

     f.css("position", "fixed"); 
     f.css("top", "10%"); 
     f.css("left", "10%"); 

當聲明變量或者他們將是全局變量時也使用var的。您還需要在點擊綁定之前移動var f和var b,因爲您正在其他函數中使用它們。