Using jQuery function in AJAX

Question

I have 3 PHP files named as,

1. index page
2. books
3. user

Index Page

<link href="colorbox.css" type="text/css" rel="stylesheet" media="all" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.colorbox.js"></script>
<script type="text/javascript">
function bookRetr(str)
{
 if (str=="") {
 document.getElementById("more-info").innerHTML="";
 return;
 }
 // code for IE7+, Firefox, Chrome, Opera, Safari
 if (window.XMLHttpRequest) {
 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("more-info").innerHTML=xmlhttp.responseText;
 }
 }
 xmlhttp.open("GET","showbook.php?id="+str,true);
 xmlhttp.send();
}
</script> 
<script>
$(document).ready(function() {
 //Examples of how to assign the ColorBox event to elements
 $(".popup").colorbox({iframe:true, innerWidth:750, innerHeight:520});
});
</script>
<div id='$bookid' onClick="bookRetr(this.id)></div>
<div id='more-info'></div>

bookshow.php

$bookid = $_GET['id'];
$query = mysql_query("SELECT * FROM bookdatabase WHERE ID='{$bookid}'");
$fetch = mysql_fetch_array($query);
$user = $fetch['userID'];
echo "<a href='showuser?id=$user' class='popup'>My name is X</a>";

The book show echo part is shown in my index page when i click on the div, but when click on My name is X, it open a new page but its actually supposed to open a popup. I got the popup named as colorbox plugin.

I'm unable to figure out where exactly i'm going wrong that the popup never opens.

• user1731476: sorry for writing the wrong php file name, just to correct the post, its showbook.php, so that its not confusing to answer.
• Jason McCreary: Please don't use the mysql_* functions as they are in the deprecation process. Use MySQLi or PDO instead.
• user1731476: @JasonMcCreary But that is not where i get the error, the error is the popup never opens. All I want to do is to pop the popup on my screen, thanks for the info.
• Jason McCreary: I realize that. I am encouraging you to be a better PHP Developer.
• user1731476: @JasonMcCreary Thank you sir, I really appreciate your suggestion.

Answer 1

Instead of:

$(".popup").colorbox({iframe:true, innerWidth:750, innerHeight:520});

Try:

$('.popup').live('click', function() {
 $.colorbox({href:$(this).attr('href'), open:true, iframe:true, innerWidth:750, innerHeight:520});
 return false;
});

OR if it won't work:

$("body").on("click", ".popup", function() {
 $.fn.colorbox({href:$(this).attr('href'), open:true, iframe:true, innerWidth:750, innerHeight:520});
 return false;
});

Hope it helps a little

• user1731476: how can i set the inner width and height?
• user1731476: When I click once this code works, when i click second time it does'nt work.

Answer 2

your problem is that you are dynamically generating the link, You will have to use jquery live to make it work. Here is the code

 $(function(){
 //Examples of how to assign the ColorBox event to elements
 $(".popup").live("click",function(){
 $.colorbox({iframe:true, innerWidth:750, innerHeight:520});
 return false;
 });
 });

Dins

• user1731476: This code does'nt work, its shows a popup for just a second and then opens a new page.

Answer 3

Because you need to hijack the natural execution of clicking a href link...you need to add return false , which will essentially tell the browser to not treat your href like a link

If you change your popup function like this it should work, course readd your colorbox opts after the href opt by comma separation like so

 $('.popup').click(function(){
 $.colorbox({href:$(this).attr('href'), iframe:true, innerWidth:750, innerHeight:520});
 return false;
 });

Added your opts and code cleanup