retrieving data via php/sql, displaying via AJAX & Thickbox...issues! 
November 21st, 2008, 11:25 AM
| | | |
Hiya,
I'm trying to get a AJAX driven update to my list of news articles, so
when users click the title of the news article, it pops up the article
content in a thickbox overlay. Retrieving content from the database
via AJAX is no problem, that works and thickbox works too, I'm just
having problems getting them both running together! It seems like it's
too much information to cram into one poor little "a href=".... the
"onclick" called in the hyperlink needs to run 2 functions - one to
call thickbox and the other to call the getnews, i've been playing
with changing the javascript, but can't get it working, so i thought
i'd come back to stage 1 and see if anyone else has some ideas.
================================================== ==============
The xhtml page looks like this: It loads the AJAX related stuff in the
news.js, then the php query populates a list of hyperlinks which
presently just pop up the highslide thickbox.
================================================== ==============
<head>
<script type="text/javascript" src="java/news.js"></script>
</head>
<!--other stuff... into the php query which selects the titles of the
news articles-->
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
echo "<a href=\"#?article={$row['id']}\" class=\"highslide\"
onclick=\"return hs.htmlExpand(this, { contentId: 'highslide-html' } )
\">{$row['title']}</a><br>";
}
?>
================================================== ==============
news.js is this:
================================================== ==============
var xmlHttp
function getnews(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getnews.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHt tp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
================================================== ==============
and finally getnews.php is this:
================================================== ==============
$q=$_GET["q"];
$host = 'abc';
$user = 'def';
$password = 'ghi';
$db = 'jkl';
$con = mysql_connect($host, $user, $password);
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db($db,$con);
$sql="SELECT title, introtext FROM jos_content WHERE id = '".$q."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
echo "<h1>{$row['title']}</h1>{$row['introtext']}";
}
mysql_close($con);
================================================== ==============
Everything works to a point - if I have something in the xhtml page
which feeds the ID into getnews() function then sure, the thickbox
updates with the right content (example)
Code:
<form>
<select name="test" onchange="getnews(this.value)">
<option value="1">ID 1</option>
<option value="2">ID 2</option>
<option value="3">ID 3</option>
<option value="4">ID 4</option>
</select>
</form>
but I can't figure out how to get all this running from the act of
clicking the hyperlink... the "onclick" called in the hyperlink needs
to run 2 functions - one to call thickbox and the other to call the
getnews.
Help!
Thank you | 
November 21st, 2008, 01:15 PM
| | | | re: retrieving data via php/sql, displaying via AJAX & Thickbox...issues! fidgen@gmail.com wrote: Quote:
Hiya,
>
I'm trying to get a AJAX driven update to my list of news articles, so
when users click the title of the news article, it pops up the article
content in a thickbox overlay. Retrieving content from the database
via AJAX is no problem, that works and thickbox works too, I'm just
having problems getting them both running together! It seems like it's
too much information to cram into one poor little "a href=".... the
"onclick" called in the hyperlink needs to run 2 functions - one to
call thickbox and the other to call the getnews, i've been playing
with changing the javascript, but can't get it working, so i thought
i'd come back to stage 1 and see if anyone else has some ideas.
>
>
================================================== ==============
The xhtml page looks like this: It loads the AJAX related stuff in the
news.js, then the php query populates a list of hyperlinks which
presently just pop up the highslide thickbox.
================================================== ==============
<head>
<script type="text/javascript" src="java/news.js"></script>
</head>
<!--other stuff... into the php query which selects the titles of the
news articles-->
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
echo "<a href=\"#?article={$row['id']}\" class=\"highslide\"
onclick=\"return hs.htmlExpand(this, { contentId: 'highslide-html' } )
\">{$row['title']}</a><br>";
}
?>
================================================== ==============
>
news.js is this:
>
================================================== ==============
var xmlHttp
function getnews(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getnews.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHt tp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
================================================== ==============
>
and finally getnews.php is this:
>
================================================== ==============
$q=$_GET["q"];
$host = 'abc';
$user = 'def';
$password = 'ghi';
$db = 'jkl';
$con = mysql_connect($host, $user, $password);
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db($db,$con);
>
$sql="SELECT title, introtext FROM jos_content WHERE id = '".$q."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
echo "<h1>{$row['title']}</h1>{$row['introtext']}";
}
>
mysql_close($con);
>
================================================== ==============
Everything works to a point - if I have something in the xhtml page
which feeds the ID into getnews() function then sure, the thickbox
updates with the right content (example)
>
Code:
>
<form>
<select name="test" onchange="getnews(this.value)">
<option value="1">ID 1</option>
<option value="2">ID 2</option>
<option value="3">ID 3</option>
<option value="4">ID 4</option>
</select>
</form>
>
but I can't figure out how to get all this running from the act of
clicking the hyperlink... the "onclick" called in the hyperlink needs
to run 2 functions - one to call thickbox and the other to call the
getnews.
>
Help!
>
Thank you
| This more properly belongs in comp.lang.javascript. If your getnews.php
correctly echoes what you want, then that is the end of the php
component of the question. If you use Firefox, then in Firebug you can
see what is returned. |  | | | | /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 225,662 network members.
|