Popup w/ Jquery & Database

Question

I need to create a dynamically generated window which shows an image and various elements which are taken from a database. The pop-up window works, but it's not getting the "id" which I am trying to get using an onclick function.

Using the console I get this message: XMLHttpRequest cannot load getProduct.php?id=undefined. Origin null is not allowed by Access-Control-Allow-Origin. I'm not sure what to do define the "id" further.

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

Database Table Structure:

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;

Please, don't use `mysql_*` functions to write new code. They are no longer maintained and the community has begun [deprecation process](http://goo.gl/q0gwD). See the [red box](http://goo.gl/OWwr2)? Instead you should learn about [prepared statements](http://goo.gl/orrj0) and use either [PDO](http://goo.gl/TD3xh) or [MySQLi](http://in3.php.net/mysqli). If you can't decide which, [this article](http://goo.gl/YXyWL) will help you. If you pick PDO, [here is good tutorial](http://goo.gl/b2ATO). Also see [Why shouldn't I use mysql functions in PHP?](http://goo.gl/J5jAo) — NullPoiиteя, Oct 23 '12 at 19:49
If you are using jQuery I suggest using the jQuery UI dialog box http://jqueryui.com/dialog/ it's a a lot easier for you, probably. You can easily pass variables between windows since they are not actually windows, but DIVs within the same window. — user1477388, Oct 23 '12 at 19:55
@Phawkes Have you tried passing in `this` inside your function ` — wirey00, Oct 23 '12 at 20:02
did you update the function as well? var onClickRegister = function(this){ — wirey00, Oct 23 '12 at 20:04
http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin — case1352, Oct 23 '12 at 20:05
@Phawkes When did you start getting this error? I remember helping you with this call and it didn't have any `Access-Control-Allow-Origin` errors — wirey00, Oct 23 '12 at 20:07
adding (this) to the function caused syntax errors, and the difference is the lack of data_form actually, I hadn't realized. — Black Bird, Oct 23 '12 at 20:13

score 1 · Accepted Answer · answered Oct 23 '12 at 23:39

Since you are using jQuery - you can get rid of the inline onClicks and bind the event handler at dom ready.

$(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%");

Also use var's when declaring your variables or they'll be global. You also need to move the var f and var b before the click binding since you are using them in your other function

Popup w/ Jquery & Database

1 Answers1