co.ador Posted July 23, 2009 Share Posted July 23, 2009 <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> 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> 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> 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"> </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"> </td> <td colspan="7" class="style3"> </td> </tr> <tr><td> </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 > </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> 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"> </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"> </td> <td colspan="7" class="style3"> </td> </tr> <tr><td> </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 > </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 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"> </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"> </td> <td colspan="7" class="style3"> </td> </tr> <tr><td> </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 > </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> 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> The javascript href="javascript:RateItem('Torpedo', 1);". 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> The output in the browser is Price: $9.00 Rating: * 1 * 2 * 3 * 4 * 5 The javascript href="javascript:RateItem('Torpedo', 1);". 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> pluss the javascript property href="javascript refreshing effect is not working helpjavascript:RateItem('Torpedo', 1);". 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> How can it be possible to auto refresh it? Quote Link to comment Share on other sites More sharing options...
haku Posted July 23, 2009 Share Posted July 23, 2009 Please do not double post topics. Or in this case triple post. It is agains the forum rules, and can get you banned. Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 23, 2009 Author Share Posted July 23, 2009 ok understood. Quote Link to comment Share on other sites More sharing options...
seventheyejosh Posted July 23, 2009 Share Posted July 23, 2009 do you have a link to the problem page? And is the page refreshing just not keeping its styling? Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 23, 2009 Author Share Posted July 23, 2009 Good observation Seven the page is refreshing is just not keeping it's styling... I think it is refreshing becuase it stores the data in the database plus when I open the page for first time the blank row of star appear but then when I select the stars then it changes to Rating: * 1 * 2 * 3 * 4 * 5 at this point when i check the view source is the same as when I open the page for the first time with the blank row of stars. Example The blank row of stars when the user load the page without not rating <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> After the users rate the item the view source is the same as if when the user load the page though it saves the data in the database or numbers of star user x choose for that item <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> Then If I want to see the row of star with actual rating I have to manually refresh the browser then the view source changes to this: <td> <ul class="rated threestar" 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> I have not my page load it in a server yet I have it in a local server still. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.