2012-10-23 40 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,因为您正在其他函数中使用它们。