stopping Page refreshing
stopping Page refreshing
Kindly visit
http://www.nambamoja.com/vote/viewall.p ... Radio%20Ad
. I want a situation where when you click on the 'click me ' link at the image icons, the image loads at the up section without the page refreshing. How can i achieve this through JQUERY?
Th code:
-----------------------------------------------------starts here
<?php session_start();
//if logout then destroy the session and redirect the user
if(isset($_GET['logout']))
if($_GET['logout']=='logout')
{
session_destroy();
header("location:login.html");
}
echo "<a href='index.php?logout=logout'><b class='maandiko'>Logout<b></a>";
include('dbconnect.php');
error_reporting(5);
if (!isset($_GET['category'])){$category = '%';}
$category = $_GET['category'];
if ( $category == "ALL Ads"){$category = '%';}
if (!isset($_GET['myreadid'])){$myreadid = '0';}
$myreadid = $_GET['myreadid'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".vote").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if(name=='up')
{
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "up_vote.php?voteup=yes",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
} });
}
else
{
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "down_vote.php?votedown=yes",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
return false;
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Competition</title>
<style type="text/css">
body
{
font-family:'Georgia', Times New Roman, Times, serif;
}
#main
{
height:370px;
border:1px dashed #29ABE2;
margin-bottom:7px;
width:700px;
}
a
{
color:#DF3D82;
text-decoration:none;
}
a:hover
{
color:#DF3D82;
text-decoration:underline;
}
.up
{
height:40px; font-size:24px; text-align:center; background-image:url(juu1.png);background-repeat:no-repeat;margin-bottom:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px;border:1px dashed #00A651;
}
.up a
{
color:#000000;
text-decoration:none;
}
.up a:hover
{
color:#000000;
text-decoration:none;
}
.down
{
height:40px; font-size:24px; text-align:center;background-image:url(chini.png);background-repeat:no-repeat ;margin-top:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px;border:1px dashed #FF0000;
}
.down a
{
color:#000000;
text-decoration:none;
}
.down a:hover
{
color:#000000;
text-decoration:none;
}
.box1
{
float:left; height:80px; width:50px;
}
.maandiko
{
font-size:11px;font-weight:lighter;padding-top:inherit;color: #800000;
}
.u
{
font-size:11px;font-weight:lighter;padding-top:inherit;float:right;
}
.box2
{
float:left; width:590px; text-align:center;
margin-left:10px;height:345px;margin-top:10px;
font-weight:bold;
font-size:12px;
}
.box3
{
float:right;width:20%; text-align:center;
margin-left:10px;height:100px;margin-top:10px;
font-weight:bold;border:1px dashed #29ABE2;
font-size:12px;
}
tdpicha{width:426px;height:344px;}
tdcomments{width:154px;height:344px;}
img
{
border:none;
padding-top:7px;
}
.a { font-size: small;
font-family:"Trebuchet MS", verdana, arial, sans-serif;
font-weight: normal;
font-size:100%;
color: #800000;
}
.a1 {font-size: small;
font-family:"Trebuchet MS", verdana, arial, sans-serif;
font-weight: normal;
font-size:100%;
color: #800000;
}
.a2 { font-size: small;
font-family:"Trebuchet MS", verdana, arial, sans-serif;
font-weight: normal;
font-size:100%;
color: #800000;
}
</style>
<style type="text/css">
<!--
.style1 {font-size:70%; color: #9F9F9F; font-family: "Trebuchet MS", verdana, arial, sans-serif;}
.rightbox {
margin:0.2em; padding:0.3em; border:1px solid #970000; text-align:left;}
h2
{
background-color:#DDDDDD; color:#3B4471; font-size:75%; font-weight:normal; margin:0.2em; padding:0;
font-weight: bold; font-family:"Trebuchet MS", verdana, arial, sans-serif;
}
.text
{
font-family:"Trebuchet MS", verdana, arial, sans-serif;
font-size:75%;
font-weight:bold;
color: #333333;
}
.field {
font-size:85%;
color:#666666;
font-family:"Trebuchet MS", verdana, arial, sans-serif;
font-weight:normal;
}
.footer {
color:#999999; font-size:75%; margin:0.2em 0.2em 0.2em 0.2em; padding:0.2em;
border-top:1px solid #999999; text-align:left; clear:both;}
.footer .right {
float:right; clear:right; text-align:right;}
.footer p {margin:0;}
.topp {
color:#999999; font-size:75%; margin:0.2em 0.2em 0.2em 0.2em; padding:0.2em;
border-top:1px solid #999999; text-align:left; clear:both;}
.top .right {
float:right; clear:right; text-align:right;}
.topp p {margin:0;}
.header{
font-family:"Trebuchet MS", verdana, arial, sans-serif;
font-size:95%;
font-weight:bold;
color: #C40000;
}
.content{
font-family:"Trebuchet MS", verdana, arial, sans-serif;
font-size:75%;
font-weight: normal;
color: #333333;
}
.empasise{
font-family:"Trebuchet MS", verdana, arial, sans-serif;
font-weight: bold;
color: #C40000;
}
.a {
font-size: small;
font-family:"Trebuchet MS", verdana, arial, sans-serif;
font-weight: normal;
font-size:100%;
color: #800000;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.header_top {
color:#999999; font-size:75%; margin:0.2em 0.2em 0.2em 0.2em; padding:0.2em;
border-top:0px solid #999999; text-align:left; clear:both;}
.header_top .right {
float:right; clear:right; text-align:right;}
.header_top p {margin:0;}
.aa {
font-size: small;
font-family:"Trebuchet MS", verdana, arial, sans-serif;
font-weight: normal;
font-size:75%;
color: #800000;
}
aa:link {
text-decoration: none;
}
aa:visited {
text-decoration: none;
}
aa:hover {
text-decoration: none;
}
aa:active {
text-decoration: none;
}
.button{
font-family:"Trebuchet MS", verdana, arial, sans-serif;
font-size:75%;
font-weight:bold;
color: #C40000;
}
.buttonstatic{
font-family:"Trebuchet MS", verdana, arial, sans-serif;
font-size:75%;
font-weight:bold;
color: #C40000;
}
.a11 {font-size: small;
font-family:"Trebuchet MS", verdana, arial, sans-serif;
font-weight: normal;
font-size:100%;
color: #800000;
}
.a21 {font-size: small;
font-family:"Trebuchet MS", verdana, arial, sans-serif;
font-weight: normal;
font-size:100%;
color: #800000;
}
.a22 {font-size: small;
font-family:"Trebuchet MS", verdana, arial, sans-serif;
font-weight: normal;
font-size:100%;
color: #800000;
}
.maandiko {
color: #000;
}
.maandiko1 { font-size:11px;font-weight:lighter;padding-top:inherit;
}
.maandiko1 { color: #000;
}
.up1 {height:40px; font-size:24px; text-align:center; background-image:url(juu1.png);background-repeat:no-repeat;margin-bottom:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px;
}
.up2 {height:40px; font-size:24px; text-align:center; background-image:url(juu1.png);background-repeat:no-repeat;margin-bottom:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px;border:1px dashed #00A651;
}
.up11 {height:40px; font-size:24px; text-align:center; background-image:url(juu1.png);background-repeat:no-repeat;margin-bottom:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px;
}
-->
</style>
</head>
<body>
<table width="766" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#F8F8F8" >
<tr>
<td width="766" ><table width="735" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="146" rowspan="2" valign="top"><img src="images/nambamoja.gif" width="129" height="149" /></td>
<td width="589" valign="top"><div align="center" class="maandiko"><a href="index.php?category=%" class="a22">ALL Ads</a>|<a href="index.php?category=TV Ad" class="a22">TV Ad</a> | <a href="index.php?category=Radio Ad" class="a22"> Radio Ad </a>| <a href="index.php?category=Print Ad" class="a22"> Print Ad </a>| <a href="index.php?category=Other Ad" class="a22">Other Ad </a>| <a href="uploadform1.html" class="a22">Upload </a> |<a href="registration.php" class="a22"> Register</a> | <a href="login.html" class="a22">Login</a> |<a href="http://www.nambamoja.com/index.php" class="a22" target="_blank"> Home </a>| <a href="#" class="a22">Terms & Conditons</a></div></td>
</tr>
<tr>
<td valign="top"> </td>
</tr>
</table></td>
</tr>
<tr>
<td >
<table height='353' width='580' border = '0' cellpadding='5' cellspacing='0' class='maandiko' align="center">
<tr >
<td> <?php
//Get correct values of Up and Down
$ss1 = "SELECT mes_id,up,down FROM messages WHERE msg = '$myreadid'";// like '$category' ORDER BY up, category"; //All encompasing SQL statement
$results1 = mysql_query($ss1); //Call Query
$row1=mysql_fetch_array($results1);
$mes_id=$row1['mes_id'];
$up=$row1['up'];
$down=$row1['down'];
?>
<div class="box1">
<div class='up' align="right"><a href="" class="vote" id="<?php echo $mes_id; ?>" name="up">
<?php echo $up; ?></a></div>
<div class='down'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="down"><?php echo $down; ?></a></div>
</div>
<?php
$sqlx=mysql_query("SELECT imagepath,imagename,username,comment FROM tbl_image WHERE id = '$myreadid' ");
$xxx=mysql_fetch_array($sqlx);
$img = $xxx['imagepath'];
$picname = $xxx['imagename'];
$uname = $xxx['username'];
$comm = $xxx['comment'];
//LOAD IMAGE
$ext=substr($img, strrpos($img, '.') + 1);
if( $ext== "swf")
{
echo ("<EMBED SRC=$img WIDTH='425' HEIGHT='325' >");
}
else
{
echo "<OBJECT CLASSID='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B'
CODEBASE='http://www.apple.com/qtactivex/qtplugin.cab' WIDTH='200' HEIGHT='150' >
<PARAM NAME='src' VALUE=$img >
<PARAM NAME='autoplay' VALUE='true' >
<EMBED SRC=$img TYPE='image/x-macpaint'
PLUGINSPAGE='http://www.apple.com/quicktime/download' WIDTH='425' HEIGHT='325' AUTOPLAY='false'></EMBED>
</OBJECT>";
}
if ($myreadid!=0){echo "<span class='maandiko'><hr>$picname | BY: $uname | <a href=$img>Downloadfile</a></span> ";}
?>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td >
<!--Table 2-->
<table width="100%" border="1" align="center" cellpadding="0" cellspacing="2" bgcolor="#F8F8F8" >
<!--Find how many TR and TD we need-->
<?php
//Get the count of all the said records and divide by the table width
$ss = "SELECT mes_id,msg,up,down FROM messages WHERE category like '$category' ORDER BY up desc, category "; //All encompasing SQL statement
$results = mysql_query($ss); //Call Query
$totalr = mysql_num_rows($results); //Find total
if ($category =="%"){echo "<span class='maandiko'>Total: </span>" . $totalr;
}else{echo "<span class='maandiko'>Total $category: </span>" . $totalr;
}
$x = 0; // Load 4 images in each TR
while($row=mysql_fetch_array($results))
{
if ($x==0){echo ("<tr>");}// Open TR
echo ("<td height=150 width = 200 >");
$readid = $row[1];
$mesid = $row[0];
$up1=$row['up'];
$down1=$row['down'];
$sqlx=mysql_query("SELECT imagepath,imagename,username,comment FROM tbl_image WHERE id = '$readid' ");
$xxx=mysql_fetch_array($sqlx);
$img = $xxx['imagepath'];
//$picname = $xxx['imagename'];
// $uname = $xxx['username'];
// $comm = $xxx['comment'];
//LOAD IMAGE
$ext=substr($img, strrpos($img, '.') + 1);
if( $ext== "swf")
{
echo ("<span class='maandiko'><a href='viewall.php?category=" . $category . "&myreadid=$readid' class='a22'> Click Here </a></span> <span class='u'><font color='#009966'>$up1</font> : <font color='#FF0000'>$down1</font></span><EMBED SRC=$img WIDTH='200' HEIGHT='150' > :");
}
else
{
echo "<span class='maandiko'><a href='viewall.php?category=" . $category . "&myreadid=$readid' class='a22'> Click Here </a> </span> <span class='u'><font color='#009966'> $up1 </font>: <font color='#FF0000'> $down1</font></span><OBJECT CLASSID='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B'
CODEBASE='http://www.apple.com/qtactivex/qtplugin.cab' WIDTH='200' HEIGHT='150' >
<PARAM NAME='src' VALUE=$img >
<PARAM NAME='autoplay' VALUE='true' >
<EMBED SRC=$img TYPE='image/x-macpaint'
PLUGINSPAGE='http://www.apple.com/quicktime/download' WIDTH='200' HEIGHT='150' AUTOPLAY='false'></EMBED>
</OBJECT>";
}
echo("</td>");
$x=$x+1; // incrememnt x
if ($x==4 ){$x=0;} // Return x to zero
if ($x==0 ){echo ("</tr>");} // Close TR
}
?>
</table>
<!--Table 2 END-->
</td>
</tr>
</table>
</body>
</html>
-----------------------------------------------------Ends here