|
|
|
Question : Rebind jquery event after simple ajax call
|
|
|
|
Hello,
The website I'm working on is http://pearlofthewest.com/ . I've implemented Dynamic Drive's image bubble to the screenshots. So, when you first visit the site, you can hover above the screenshots and the images magnify and display the contents of the images alt attribute like they're supposed to. When you click any of the 4 links above the screenshots (votetree, mathcpr, etc..), the php file holding the contents relative to that link are placed into the division below them. However, the image bubble mechanism isn't working on them. I don't know what is wrong, but one guess is that the image bubble event is being wiped away when a php page gets placed into the content div.
The click mechanism uses the js file, getdata.js, to change the php files in the content div. The hover effect over the screenshots use jquery's 1.3.2 version and other relative js files.
I've tried using the jquery live plugin to reattach the event to specific links in the incoming php file, but had no luck getting it to work. The answer is probably so simple, but I'm clueless :)
*** Main page, index.php ***
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="KT's webfolio" />
<meta name="keywords" content="pearl, west, pearlwest, pearlofthewest, web, portfolio, webfolio, votetree, math, cpr, mathcpr, superior, support, solutions, ajc, legal, ajclegal" />
<meta name="author" content="KT" />
<title>Webfolio</title>
<link rel = "stylesheet" type = "text/css" href = "../css/pearlwest.css" media = "screen,projection" />
<link rel = "stylesheet" type="text/css" href = "../css/imgbubbles.css" />
<style type="text/css">
#orbs li{
width: 65px; /*width of image container. Should be wider than contained images (before bubbling) */
height:60px; /*height of image container. Should be taller than contained images (before bubbling) */
}
#orbs li img{
width: 55px; /*width of each image before bubbling*/
height: 60px; /*height of each image*/
}
#squares li{
width: /* 45 */ 300px; /*width of image container. Must be wider than contained images (before bubbling) */
height:/* 40 */ 220px; /*height of image container. Must be taller than contained images (before bubbling) */
margin-left:
}
#squares li img{
width: /* 31 */ 283px; /*width of each image before bubbling*/
height: /* 31 */ 212px; /*height of each image*/
margin-left: 75px;
}
</style>
<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type = "text/javascript" src = "../js/jquery.livequery.js"></script>
<script type="text/javascript" src="../js/imgbubbles.js">
/***********************************************
* Image Bubbles effect- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('ul#orbs').imgbubbles({factor:1.75}) //add bubbles effect to UL id="orbs"
$('ul#squares').imgbubbles({factor:1.55}) //add bubbles effect to UL id="squares"
})
</script>
<script type = "text/javascript" src = "../js/getdata.js"></script>
</head>
<body>
<div id="wrap">
<h1><a href="http://pearlofthewest.com/">PearlWest</a></h1>
<p class="slogan">my simple webfolio</p>
<div id = "maincontent">
<div id = "content">
<p style = "text-align:center;" class = "toptabs">
<strong class = "hide">Main menu:</strong>
<a id = "vote" class="toptab active" href = "javascript:void(0);" onclick = "getdata('page/vote.php','content');">VoteTree</a><span class="hide"> | </span>
<a id = "math" class="toptab" href = "javascript:void(0);" onclick = "getdata('page/math.php','content');">mathCPR</a><span class="hide"> | </span>
<a id = "superior" class="toptab" href = "javascript:void(0);" onclick = "getdata('page/superior.php','content');">Superior Support Solutions</a><span class="hide"> | </span>
<a id = "ajc" class="toptab" href = "javascript:void(0);" onclick = "getdata('page/ajc.php','content');">AJC Legal</a>
</p>
<h2>VOTETREE</h2>
<p style = "position:relative;margin-left:75px;">
<ul id = "squares" class = "bubblewrap">
<li><a href = "http://votetree.com/" target = "_blank"><img src = "../img/vote_resize.png" alt = "Worked on following features: fix file upload ~ flag items ~ image url upload ~ Recaptchas ~ modify,manage MySQL database ~ implement jquery plugins ~ . . . " /></a></li>
<li><a href = "http://votetree.com/index.php?id=products&cid=3" target = "_blank"><img src = "../img/vote_flag_resize.png" alt = ". . . modify pagination ~ automated PHP REST queries for AWS ~ web-based database backend, technical documentation" /></a></li>
</ul>
</p>
</div>
</div>
<p class = "footer">Copyright © 2010 <a href = "http://pearlofthewest.com/">KT's Webfolio</a></p>
</div>
</body>
</html>
*** superior.php, one of the pages to be placed in the content division when superior support solutions link is clicked ***
<p style = "text-align:center;" class="toptabs">
<strong class="hide">Main menu:</strong>
<a id = "vote" class="toptab" href = "javascript:void(0);" onclick = "getdata('page/vote.php','content');">VoteTree</a><span class="hide"> | </span>
<a id = "math" class="toptab" href = "javascript:void(0);" onclick = "getdata('page/math.php','content');">mathCPR</a><span class="hide"> | </span>
<a id = "superior" class="toptab active" href = "javascript:void(0);" onclick = "getdata('page/superior.php','content');">Superior Support Solutions</a><span class="hide"> | </span>
<a id = "ajc" class="toptab" href = "javascript:void(0);" onclick = "getdata('page/ajc.php','content');">AJC Legal</a>
</p>
<h2>SUPERIOR SUPPORT SOLUTIONS</h2>
<p style = "position:relative;margin-left:75px;">
<ul id = "squares" class = "bubblewrap superiorimg">
<li><a href = "http://superiorsupportsolutions.com/" target = "_blank"><img src = "../img/superior_home_resize.png" alt = "integrated site owner's custom html,css files into WordPress ~ Thesis Theme, Hooks Plugin ~ . . ." /></a></li>
<li><a href = "http://superiorsupportsolutions.com/blog" target = "_blank"><img src = "../img/superior_blog_resize.png" alt = ". . . created technical documentation so owner can add,modify,maintain new pages as needed with a consistent personalized theme" /></a></li>
</ul>
</p>
*** getdata.js ***
// here we define global variable
var ajaxdestination="";
function getdata(what,where) { // get data from source (what)
try {
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { /* do nothing */ }
document.getElementById(where).innerHTML ="<img src='../img/ajax-loader.gif'>";
// we are defining the destination DIV id, must be stored in global variable (ajaxdestination)
ajaxdestination=where;
xmlhttp.onreadystatechange = triggered; // when request finished, call the function to put result to destination DIV
xmlhttp.open("GET", what);
xmlhttp.send(null);
return false;
}
function triggered() { // put data returned by requested URL to selected DIV
if (xmlhttp.readyState == 4) if (xmlhttp.status == 200)
document.getElementById(ajaxdestination).innerHTML =xmlhttp.responseText;
}
|
|
|
|
Answer : Rebind jquery event after simple ajax call
|
|
Hmmm... Have you though about the .load() method in jquery instead of the getdata() function you are currently using. The reason I suggest this is I know that if there is $(document).ready() script on the "loaded" page of the .load() method, it will be applied on the target page. Here is a simple example. <a href="page1.php" class="loadLink">Load Page 1</a> <div id="container"></div> $(document).ready(function (){ $(".loadLink").click(funct ion(e){ e.preventDefault(); $("#container").load($(thi s).attr("h ref")); }) }); I know, it seems too simple. But that is really all that should be necessary. If you put your javascript on page1.php that hooks up the dynamic effect, it will be loaded with the rest of the page contents in to the container div.
|
|
|
|
|
