1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS class is not being taken by javascript refreshing effect is not working help

Discussion in 'CSS' started by co.ador, Jul 22, 2009.

0
  1. #1 
     <td>
<ul class="rating nostar" id="Torpedo">
  <li class="one"><a   href="javascript:RateItem('Torpedo', 1);" title="1 Star">1</a></li>
  <li class="two"><a   href="javascript:RateItem('Torpedo', 2);" title="2 Stars">2</a></li>
  <li class="three"><a href="javascript:RateItem('Torpedo', 3);" title="3 Stars">3</a></li>

  <li class="four"><a  href="javascript:RateItem('Torpedo', 4);" title="4 Stars">4</a></li>
  <li class="five"><a  href="javascript:RateItem('Torpedo', 5);" title="5 Stars">5</a></li>
</ul>
</td>
    Code (markup):
    this is a rating star row which is suppose to refresh without a browser refreshing. it is refreshing but is not CSS formating to 

    <td><strong>Raiting:</strong></td>
  <td>
<ul class="rated twostar" id="Torpedo">
  <li class="one">1</li>
  <li class="two">2</li>
  <li class="three">3</li>

  <li class="four">4</li>
  <li class="five">5</li>
</ul>
    Code (markup):
    I have to refresh the browser in order to 

    <td><strong>Raiting:</strong></td>
  <td>
<ul class="rated twostar" id="Torpedo">
  <li class="one">1</li>
  <li class="two">2</li>
  <li class="three">3</li>

  <li class="four">4</li>
  <li class="five">5</li>
</ul>
    Code (markup):
    to appear..

    It's the javascript working?


    This is the code before clicking on one of the star in the star row.

    
<style type="text/css">
<!--
.style1 {color: #FF3300}
.style2 {color: #FFFFFF}
.style3 {color: #000000}
-->
</style>


 \<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" href="../stylesheets/rantwebpageprueba.css" rel="stylesheet" media="all" />
<title>Shoes</title>
    <script type="text/javascript" src="scripts/prototype.js"></script>

    <script type="text/javascript" src="scripts/rating.js"></script>
  

<script src="../flowplayer/flowplayer.controls-3.1.1.swf"></script>


</head>

<body>
<table id="rantview">

<a href=""><td width="40" id="contenido1">tropiezo></td></a>
<a href=""><td width="40" id="contenido2">colozar1></td></a>
<a href=""><td width="40" id="contenido3">colozar2></td></a>

<a href=""><td width="40" id="contenido4">colozar3></td></a> 
<a href=""><td width="40" id="contenido4">colozar4></td></a>
<a href=""><td width="40" id="contenido4">colozar3</td></a>
</table>

<table width="100%"  border="0" cellspacing="0" cellpadding="0" class="itemdetails">
<tr>
<td width="1100" height="350" bgcolor="#FFFFFF" class="tento">
<table class="cafe"><tr><td width="547">
<a href="#"><h3 align="justify" style="position:relative; height:5px; top: 10px;">Torpedo</h3></a>
</td>
</tr>
</table>

<table width="1215" height="609" class="chencho" >
 <td class="largethumb" rowspan="8" align="center">
<a href="#"><img src="../images/image1.jpg" width="270" height="160" alt="coloe"/></a></td>
<td width="340" rowspan="8" padding="0"  ><table width="252" style="font-size:12px; position:relative; top:-6px;">
  <td width="1">&nbsp;</td>
  <td width="54" bgcolor="#FFFFFF"> <img src="../images/price.gif" alt="s" /></td>
  <td colspan="7">$<span class="style3">6.00</span></td>
<tr>
  <td class="style1">&nbsp;</td>

  <td colspan="7" class="style3">&nbsp;</td>
</tr>
<tr><td>&nbsp;</td>
<td> <img src="../images/rating.gif" alt="s" /></td>
  <td>
<ul class="rating nostar" id="Torpedo">
  <li class="one"><a   href="javascript:RateItem('Torpedo', 1);" title="1 Star">1</a></li>
  <li class="two"><a   href="javascript:RateItem('Torpedo', 2);" title="2 Stars">2</a></li>
  <li class="three"><a href="javascript:RateItem('Torpedo', 3);" title="3 Stars">3</a></li>

  <li class="four"><a  href="javascript:RateItem('Torpedo', 4);" title="4 Stars">4</a></li>
  <li class="five"><a  href="javascript:RateItem('Torpedo', 5);" title="5 Stars">5</a></li>
</ul>
</td>
</tr><tr>
  <td width="12"><span class="style2">coloso</span></td>
  
</tr>
  <tr>
  <td >&nbsp;</td>

</tr></table>
 </td>
<tr>
  <td width="400" height="40" rowspan="3"><strong>Details:</strong></td>
</tr>
<tr>
  <td width="134" height="28"><a href="#"><img src="../images/add to Car.gif" alt="df" width="99" height="28" /></a></td>
</tr><tr>
  <td height="25"><a href="#"><img src="../images/viewcart.gif" alt="rt" width="99" height="28" /></a></td>
</tr>
<tr>
  <td width="400" height="29"><ul>

    <li>coloso mentiroso</li>
  </ul></td>
</tr>
<tr>
  <td width="400" height="29"><ul>
    <li>coloso mentiroso</li>
  </ul></td>
</tr>
<tr>
  <td width="400" height="21"><ul>

    <li>coloso mentiroso</li>
  </ul></td>
</tr><tr>
  <td height="12" colspan="2"><img src="../images/line..gif" alt="as" width="300" height="7" /></td>
</tr>

<tr></tr><td rowspan="2">
<table width="162" align="center" class="smallthumbs">
</td></table>


</body>
</html>
    Code (markup):
    This is the code after clicking as you can see is the same as the one above except that after clicking it does record the data in the database but it does not refresh as it supposed to with the javascript and Ajax links it has on top of the code.
    <style type="text/css">
<!--
.style1 {color: #FF3300}
.style2 {color: #FFFFFF}
.style3 {color: #000000}
-->
</style>


 \<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" href="../stylesheets/rantwebpageprueba.css" rel="stylesheet" media="all" />
<title>Shoes</title>
    <script type="text/javascript" src="scripts/prototype.js"></script>

    <script type="text/javascript" src="scripts/rating.js"></script>
  

<script src="../flowplayer/flowplayer.controls-3.1.1.swf"></script>


</head>

<table width="100%"  border="0" cellspacing="0" cellpadding="0" class="itemdetails">
<tr>
<td width="1100" height="350" bgcolor="#FFFFFF" class="tento">
<table class="cafe"><tr><td width="547">
<a href="#"><h3 align="justify" style="position:relative; height:5px; top: 10px;">-1/2 Pollo al horno</h3></a>
</td>
</tr>
</table>

<table width="1215" height="609" class="chencho" >
 <td class="largethumb" rowspan="8" align="center">
<a href="#"><img src="../images/image1.jpg" width="270" height="160" alt="coloe"/></a></td>
<td width="340" rowspan="8" padding="0"  ><table width="252" style="font-size:12px; position:relative; top:-6px;">
  <td width="1">&nbsp;</td>
  <td width="54" bgcolor="#FFFFFF"> <img src="../images/price.gif" alt="s" /></td>
  <td colspan="7">$<span class="style3">9.00</span></td>
<tr>
  <td class="style1">&nbsp;</td>

  <td colspan="7" class="style3">&nbsp;</td>
</tr>
<tr><td>&nbsp;</td>
<td> <img src="../images/rating.gif" alt="s" /></td>
  <td>
<ul class="rating nostar" id="Torpedo">
  <li class="one"><a   href="javascript:RateItem('-1/2 Torpedo', 1);" title="1 Star">1</a></li>
  <li class="two"><a   href="javascript:RateItem('-1/2 Torpedo'', 2);" title="2 Stars">2</a></li>
  <li class="three"><a href="javascript:RateItem('-1/2 Torpedo'', 3);" title="3 Stars">3</a></li>

  <li class="four"><a  href="javascript:RateItem('-1/2 Torpedo'', 4);" title="4 Stars">4</a></li>
  <li class="five"><a  href="javascript:RateItem('-1/2 Torpedo'', 5);" title="5 Stars">5</a></li>
</ul>
</td>
</tr><tr>
  <td width="12"><span class="style2">coloso</span></td>
  
</tr>
  <tr>
  <td >&nbsp;</td>

</tr></table>
 </td>
<tr>
  <td width="400" height="40" rowspan="3"><strong>Details:</strong></td>
</tr>
<tr>
  <td width="134" height="28"><a href="#"><img src="../images/add to Car.gif" alt="df" width="99" height="28" /></a></td>
</tr><tr>
  <td height="25"><a href="#"><img src="../images/viewcart.gif" alt="rt" width="99" height="28" /></a></td>
</tr>
<tr>
  <td width="400" height="29"><ul>

    <li>coloso mentiroso</li>
  </ul></td>
</tr>
<tr>
  <td width="400" height="29"><ul>
    <li>coloso mentiroso</li>
  </ul></td>
</tr>
<tr>
  <td width="400" height="21"><ul>

    <li>coloso mentiroso</li>
  </ul></td>
</tr><tr>
  <td height="12" colspan="2"><img src="../images/line..gif" alt="as" width="300" height="7" /></td>
</tr>

<tr></tr><td rowspan="2">
<table width="162" align="center" class="smallthumbs">
</td></table>
</body>
</html
    Code (markup):
    instead of the result row of star appear the output and result after clicking is recording the data in the database and outputing..

    Price: $9.00

    Rating:

    * 1
    * 2
    * 3
    * 4
    * 5

    it doesn't format the ul ordered list with the classes rated without a manual browser refresh. It will formatted if I manually refresh the browser. It seem like the Ajax code is not affecting the html code why do I have to manually refresh? By the way the source page after manually refreshing vary and it gets formatted with the CSS class "rated". Before the users click in one of the star in the row it gets formatted with the CSS class "rating" and it supposed to change after clicking in one of the star in the row without manually having to refresh the browser.

    The source page after manually refreshing the browser is:


    <style type="text/css">
<!--
.style1 {color: #FF3300}
.style2 {color: #FFFFFF}
.style3 {color: #000000}
-->
</style>


 \<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" href="../stylesheets/rantwebpageprueba.css" rel="stylesheet" media="all" />
<title>Shoes</title>
    <script type="text/javascript" src="scripts/prototype.js"></script>

    <script type="text/javascript" src="scripts/rating.js"></script>
  

<script src="../flowplayer/flowplayer.controls-3.1.1.swf"></script>


</head>

<body>
<table width="100%"  border="0" cellspacing="0" cellpadding="0" class="itemdetails">
<tr>
<td width="1100" height="350" bgcolor="#FFFFFF" class="tento">
<table class="cafe"><tr><td width="547">
<a href="#"><h3 align="justify" style="position:relative; height:5px; top: 10px;">-1/2 Pollo al horno</h3></a>
</td>
</tr>
</table>

<table width="1215" height="609" class="chencho" >
 <td class="largethumb" rowspan="8" align="center">
<a href="#"><img src="../images/image1.jpg" width="270" height="160" alt="coloe"/></a></td>
<td width="340" rowspan="8" padding="0"  ><table width="252" style="font-size:12px; position:relative; top:-6px;">
  <td width="1">&nbsp;</td>
  <td width="54" bgcolor="#FFFFFF"> <img src="../images/price.gif" alt="s" /></td>
  <td colspan="7">$<span class="style3">9.00</span></td>
<tr>
  <td class="style1">&nbsp;</td>

  <td colspan="7" class="style3">&nbsp;</td>
</tr>
<tr><td>&nbsp;</td>
<td> <img src="../images/rating.gif" alt="s" /></td>
  <td>
<ul class="rated fourstar" id="Torpedo">
  <li class="one">1</li>
  <li class="two">2</li>
  <li class="three">3</li>

  <li class="four">4</li>
  <li class="five">5</li>
</ul>
</td>
</tr><tr>
  <td width="12"><span class="style2">coloso</span></td>
  
</tr>
  <tr>
  <td >&nbsp;</td>

</tr></table>
 </td>
<tr>
  <td width="400" height="40" rowspan="3"><strong>Details:</strong></td>
</tr>
<tr>
  <td width="134" height="28"><a href="#"><img src="../images/add to Car.gif" alt="df" width="99" height="28" /></a></td>
</tr><tr>
  <td height="25"><a href="#"><img src="../images/viewcart.gif" alt="rt" width="99" height="28" /></a></td>
</tr>
<tr>
  <td width="400" height="29"><ul>

    <li>coloso mentiroso</li>
  </ul></td>
</tr>
<tr>
  <td width="400" height="29"><ul>
    <li>coloso mentiroso</li>
  </ul></td>
</tr>
<tr>
  <td width="400" height="21"><ul>

    <li>coloso mentiroso</li>
  </ul></td>
</tr><tr>
  <td height="12" colspan="2"><img src="../images/line..gif" alt="as" width="300" height="7" /></td>
</tr>

<tr></tr><td rowspan="2">
<table width="162" align="center" class="smallthumbs">
</td></table>
</body>
</html>
    Code (markup):
    The only differences is that:

    Stage 1.

    Before clicking on one of the stars it appear nostar and the user get to choose which number of star he/she wants to choose by hovering over. The code below is the output when stars=0, nostar are show just a blank row of star and the users get to hover over them to chooses the number of stars they want.
      <td>
<ul class="rating nostar" id="Torpedo">
  <li class="one"><a   href="javascript:RateItem('Torpedo', 1);" title="1 Star">1</a></li>
  <li class="two"><a   href="javascript:RateItem('Torpedo', 2);" title="2 Stars">2</a></li>
  <li class="three"><a href="javascript:RateItem('Torpedo', 3);" title="3 Stars">3</a></li>

  <li class="four"><a  href="javascript:RateItem('Torpedo', 4);" title="4 Stars">4</a></li>
  <li class="five"><a  href="javascript:RateItem('Torpedo', 5);" title="5 Stars">5</a></li>
</ul>
</td>
    Code (markup):
    The javascript 
    href="javascript:RateItem('Torpedo', 1);".
    Code (markup):
    does appear the first time.

    Stage 2.

    the code below appear in the source page.
      <td>
<ul class="rating nostar" id="Torpedo">
  <li class="one"><a   href="javascript:RateItem('Torpedo', 1);" title="1 Star">1</a></li>
  <li class="two"><a   href="javascript:RateItem('Torpedo', 2);" title="2 Stars">2</a></li>
  <li class="three"><a href="javascript:RateItem('Torpedo', 3);" title="3 Stars">3</a></li>

  <li class="four"><a  href="javascript:RateItem('Torpedo', 4);" title="4 Stars">4</a></li>
  <li class="five"><a  href="javascript:RateItem('Torpedo', 5);" title="5 Stars">5</a></li>
</ul>
</td>
    Code (markup):
    The output in the browser is

    Price: $9.00

    Rating:

    * 1
    * 2
    * 3
    * 4
    * 5
    The javascript 
    href="javascript:RateItem('Torpedo', 1);".
    Code (markup):
    does appear and at this point the data or number of star has been record in the database but instead of stage appearing it should be stage 3 right after stage 1.

    Stage 3

    After refreshing the browser manually the ul gets formatted by the CSS rated class.

    
 <td>
<ul class="rated fourstar" id="Torpedo">
  <li class="one">1</li>
  <li class="two">2</li>
  <li class="three">3</li>

  <li class="four">4</li>
  <li class="five">5</li>
</ul>
</td>
    Code (markup):
    pluss the javascript property 
    href="javascript refreshing effect is not working helpjavascript:RateItem('Torpedo', 1);".
    Code (markup):
    does not appear as it appears in the source page before users click on one of the stars.

    The javascript links that should do the refreshing automatically supposed to be the two below:

    <script type="text/javascript" src="scripts/prototype.js"></script>
    <script type="text/javascript" src="scripts/rating.js"></script>
    Code (markup):

    How can it be possible to auto refresh it?
     
    co.ador, Jul 22, 2009 IP