Using jQuery function in AJAX

Question

I have 3 PHP files named as,

index page
books
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.

sorry for writing the wrong php file name, just to correct the post, its showbook.php, so that its not confusing to answer. — user1731476
– user1731476, Commented Nov 10, 2012 at 3:10
Please don't use the mysql_* functions as they are in the deprecation process. Use MySQLi or PDO instead. — Jason McCreary
– Jason McCreary, Commented Nov 10, 2012 at 3:13
@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. — user1731476
– user1731476, Commented Nov 10, 2012 at 3:15
I realize that. I am encouraging you to be a better PHP Developer. — Jason McCreary
– Jason McCreary, Commented Nov 10, 2012 at 3:18
@JasonMcCreary Thank you sir, I really appreciate your suggestion. — user1731476
– user1731476, Commented Nov 10, 2012 at 3:20

Jack · Accepted Answer · 2013-03-06 15:58:08Z

2

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

edited Mar 6, 2013 at 15:58

Jack

9,5783 gold badges31 silver badges33 bronze badges

answered Nov 10, 2012 at 3:29

Jaromír BaGricek Navara

1368 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1731476 Over a year ago

how can i set the inner width and height?

user1731476 Over a year ago

When I click once this code works, when i click second time it does'nt work.

Dinesh · Accepted Answer · 2012-11-10 03:47:56Z

1

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

edited Nov 10, 2012 at 3:47

answered Nov 10, 2012 at 3:35

Dinesh

3,1031 gold badge21 silver badges19 bronze badges

1 Comment

user1731476 Over a year ago

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

Jay Rizzi · Accepted Answer · 2012-11-10 03:41:40Z

0

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

edited Nov 10, 2012 at 3:41

answered Nov 10, 2012 at 3:30

Jay Rizzi

4,3046 gold badges45 silver badges73 bronze badges

Collectives™ on Stack Overflow

Using jQuery function in AJAX

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related