Quicker Display of Query

do I have ro reload the whole page?

[old_expat]

I have several pages with image maps - and the image maps have hotspots that, when clicked, will generate a mySQL database query. Each set of information includes a very small .gif, a link, a thumbnail, and a description of less than 100 words.

The result of the query is displayed in a <div> above the map(s) (maps are about 30 - 50 kb)

With the script I have now (written by a 3rd party), when an image hotspot is clicked, it initiates a query.

Problem is, each time a different hotspot is clicked, the entire page is refreshed/loaded.

I'm wondering if there is a reasonable way to refresh/load *only* the <div information> without refreshing/loading the rest of the page, image map, menus, header, footer, etc. I definately don't want to use frames.

My code is :

<?
$server="myserver";
$user="username";
$password="password";
$database="database_name";
mysql_connect('localhost',$user,$password);
@MYSQL_SELECT_DB($database) or die("<div class=error><strong>Error!</strong></div>");

$link = NULL;

if (!empty($_REQUEST['link'])) { $link = $_REQUEST['link']; }

if (!(isset($link)
)) {
$link='link';
}

$query="SELECT * FROM name WHERE 1";

if (isset($link)) {$query .=" AND link='" . $link . "'";}

$query .= " ORDER BY ar DESC";
$result=mysql_query($query);
$numrow=mysql_num_rows($result);

?>
<div class="std" align="center"><em>click on location <font color="#FF0000"><strong>names</strong></font> for details</em></div>
<?
if ($numrow) {
while ($name = mysql_fetch_array($result)) {
echo('<div><a href="first_part_of_URL'.$server.'/'.$name['link'].'">
<IMG height="60" src="/tn/'.$name['tn'].'" width="60" border="1" align="right" >
<IMG src="/tn/'.$name['gif'].'widget.gif" width="16" height="12" border="0" hspace="4"></a>
<A href="first_part_of_URL'.$server.'/'.$name['link'].'" target=_blank><STRONG>'.$name['name'].'</STRONG></a>&nbsp;&nbsp;&nbsp;
<span class="eur"><STRONG>'.$name['rate'].'</STRONG></span><br>'.$name['desc1'].'
</div>
');
}
}

else {echo('<br>
<br>
<h1>That Information Is Not In Our Database</h1>');
}
?>

This is how my image map is set up

<map name="Map">
<area shape="rect" coords="317,170,422,220" href="page_name.php?link=location%2item%2f">
<area shape="rect" coords="329,241,429,283" href="page_name.php?link=location%2item%2f">
</map>

[mcibor]

There are two methods. One is javascript - only on the client side, second is AJAX - half server, half user.

However only AJAX allows to connect to server and get relevant data (not the whole page)

Some links on AJAX [webmasterworld.com]

Best regards
Michal Cibor

[old_expat]

Hello mcibor,

I'm trying to avoid any client side scripting requirement.

[NomikOS]

What is the problem with the iframe tag? Almost all browsers (in the real life) support it. Is a HTML 4.0 and DOM1 object.
I think is the perfect solution for your issue, and I think there is not another.
If you are considering compatibility or reliability definitely AJAX is not the way.

iframes existe since IE3 and is a wonderful invent. I suggest you consider it.

see this [draac.com...]

[old_expat]

Hello nomicos,

So if I were using I Frames, would my entire PHP code be in the iframe, or ...?

The image map link would cause the I Frame to reload?

Would the image map link have the same syntax?

Would the page still be mypage.php?

Sorry for such dumb questions but I'm not a programmer.

[NomikOS]

The ideal is what you want in terms of performance.
In the WWW the rich content (images, etc) bring us an increment in the size of pages but the speed and bandwidth are too increasing.

I mean you must encounter the balance between spectacular pages and useful and rapid pages, depending of your needs, your audience and then accept the reality of the WWW.

you say: maps are about 30 - 50 kb
If it is one per page then there is no problem, But 2,3 or more means 100 Kb (or more) per page and maybe your users can prefer another sites where obtain the same information without so many images and much more rapidly.

Said that:
See the iframe NAME and TARGET inside of area tag.

<iframe NAME="infoHere" src="codeSQL.php"> (say "Click over map for more info" or have the result from the consult when user click) </iframe>
 
<map name="Map"> 
<area shape="rect" coords="317,170,422,220" href="page_name.php?link=location%2item%2f" TARGET="infoHere"> 
<area shape="rect" coords="329,241,429,283" href="page_name.php?link=location%2item%2f" TARGET="infoHere"> 
</map>

codeSQL.php must have the same SQL code than you are using (almost) more their HTML code (at least html, head, body) formating the SQL result (the info requested)

you say: The image map link would cause the I Frame to reload?
Yes, responding to click

you say: Would the image map link have the same syntax?
Almost as you can see

Would the page still be mypage.php?
Yes, only change div for iframes

Please tell me if this answer your question.--

Ah! Another solution and the very easy is simply open another window for each click.
<area shape="rect" coords="329,241,429,283" href="page_name.php?link=location%2item%2f" TARGET="_blank">
Ugly? well, do a nice window with javascript :
niceWin = window.open('codeSQL.php','niceWin','width=300,height=150,top=100,left=100');

<area shape="rect" coords="329,241,429,283" href="page_name.php?link=location%2item%2f" TARGET="niceWin">

NomikOS.-

[old_expat]

The iframe works nicely, thanks

Re: Javascript .. I want to stick to server side scripting.

[NomikOS]

Wonderful!
And yes, client side is not reliable.
Regards.-