returning javascript via ajax but it doesnt work
I am trying to get the links that appear after clicking the开发者_开发技巧 business name to appear in a light box. on a standalone page, it was possible but as soon as I send the same code through ajax, it does not call the light box anymore. help?
This is the original file, which is supposed to represent a 3rd party publisher site, integrating our code:
<html>
<head>
<script type="text/javascript" src="lib/js/jquery-latest.js"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="lib/js/jquery.ppo.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/js/sp.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
This is the publisher's website. <br>
<div id="bizname1" onclick="showComp(this.innerHTML)" id="bizname" class="bizname">click here - this event should be substituted for an 'on load'.</div><br><br>
lots of data about the company here
<br />
<div id="txtHint"><b>Company info will be listed here.</b></div>
</body>
</html>
This is the ajax script, showcomp.js:
function showComp(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getbutton.php?q="+str,true);
xmlhttp.send();
}
This is the getbutton.php file called by the ajax function:
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();
include('config.php');
init_connection();
$sql=select content from db;// this part works fine, so actual sql query not inserted here.
$result = mysql_query($sql);
while ($row = mysql_fetch_object($result)) {
$companyname = $row->result1;
$contenturl = $row->result2;
//echo $companyname;
//echo $contenturl;
?>
<HTML>
<HEAD>
</HEAD>
<BODY>
<a href="http://www.youtube.com/embed/DudfBIxw6do?iframe=true&width=640&height=390" rel="prettyPhoto" title="my caption"> Video in iframe
<img src="images/thumb-1.jpg" width="100" height="40" alt="Video in iframe" />
</a>
<a href="demo/vidrefer.php?iframe=true&width=500&height=410" rel="prettyPhoto" title="my caption"> Vidrefer in iframe
<img src="images/thumb-1.jpg" width="100" height="40" alt="Vidrefer in iframe" />
</a>
<br />
</BODY>
</HTML>
<?php
}
//echo out button here. give the button what it needs to launch the light box.
echo "
<br>
<div id='button'>
this is a button
</div>
";
//mysql_close($con);
?>
<script id="ppready" type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
Please help if you can see why it is not working! Thank you.
I fixed this! the problem was due to the fact that the javascript already acted before I loaded my new elements via ajax. all I had to do was to load my elements in before the ajax call and hey presto!
An alternative solution would have been to use live() or livequery() in jquery. They would have kept the jquery acting on elements both before and after they loaded into the DOM. Simples.
The JS would not run on the client side, when it is just echo'ed from the server side. Try moving your codeblock
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
<-- inside-->
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
To look like :
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
$("a[rel^='prettyPhoto']").prettyPhoto();
}
加载中,请稍侯......
精彩评论