JS / AJAX / PHP Query...

**hfidgen** · 11-20-2008, 09:54 PM

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 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.

Code:

<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:

Code:

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=xmlHttp.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:

Code:

<?php
$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

**hfidgen** · 11-21-2008, 11:18 AM

Any ideas? :P

It looks like both elements work on their own, i just need to call them together. Thickbox should work, if class="thickbox" is referenced in the url, I just need to get the getnews() function called in a onclick action.

**hfidgen** · 11-26-2008, 09:07 PM

I could kick myself - thickbox has all this built in!

All you need to do is sort out the php page to handle the content generation, in this case getnews.php and...

Code:

 echo "<a href=\"getnews.php?height=400&width=600&q={$row['id']}\" class=\"thickbox\">{$row['title']}</a><br>";

"q" is the variable for the ID getnews needs to fetch and thickbox does the rest, handling the returned content.

Thread: JS / AJAX / PHP Query...

Thread Tools

Search Thread

JS / AJAX / PHP Query...

Bookmarks

Bookmarks

Posting Permissions