co.ador Posted July 22, 2009 Share Posted July 22, 2009 public static function OutputRating($varItem) { // Verify $varItem was provided if ($varItem != null && strlen(trim($varItem)) != 0) { // Check if Magic QUotes is ON if (!get_magic_quotes_gpc()) { $varItem = addslashes($varItem); } // Information for the Output $averageStars = Rating::CalculateAverageRating($varItem); // Check to see that the user has not already rated this item if (Rating::CheckRatingsByIp($varItem) == 0) { $classes = "rating" . Rating::ShowStars($averageStars); // Write Output HTML for the Rating Data $output = "\r\n"; $output .= "<ul class=\"{$classes}\" id=\"{$varItem}\">\r\n"; $output .= " <li class=\"one\"><a href=\"javascript:RateItem('{$varItem}', 1);\" title=\"1 Star\">1</a></li>\r\n"; $output .= " <li class=\"two\"><a href=\"javascript:RateItem('{$varItem}', 2);\" title=\"2 Stars\">2</a></li>\r\n"; $output .= " <li class=\"three\"><a href=\"javascript:RateItem('{$varItem}', 3);\" title=\"3 Stars\">3</a></li>\r\n"; $output .= " <li class=\"four\"><a href=\"javascript:RateItem('{$varItem}', 4);\" title=\"4 Stars\">4</a></li>\r\n"; $output .= " <li class=\"five\"><a href=\"javascript:RateItem('{$varItem}', 5);\" title=\"5 Stars\">5</a></li>\r\n"; $output .= "</ul>\r\n"; } else { $classes = "rated " . Rating::ShowStars($averageStars); // Write Output HTML for the Rating Data $output = "\r\n"; $output .= "<ul class=\"{$classes}\" id=\"{$varItem}\">\r\n"; $output .= " <li class=\"one\">1</li>\r\n"; $output .= " <li class=\"two\">2</li>\r\n"; $output .= " <li class=\"three\">3</li>\r\n"; $output .= " <li class=\"four\">4</li>\r\n"; $output .= " <li class=\"five\">5</li>\r\n"; $output .= "</ul>\r\n"; } } else { $output = ""; // This is a major issue. NO information can be retrieve if an item name is not passed. Error::LogError("Variable Missing", "You must provide the item name for this function to find the average."); } return $output; } The ul below just show the number with bullets without the format of the class rating. if (Rating::CheckRatingsByIp($varItem) == 0) { $classes = "rating" . Rating::ShowStars($averageStars); // Write Output HTML for the Rating Data $output = "\r\n"; $output .= "<ul class=\"{$classes}\" id=\"{$varItem}\">\r\n"; $output .= " <li class=\"one\"><a href=\"javascript:RateItem('{$varItem}', 1);\" title=\"1 Star\">1</a></li>\r\n"; $output .= " <li class=\"two\"><a href=\"javascript:RateItem('{$varItem}', 2);\" title=\"2 Stars\">2</a></li>\r\n"; $output .= " <li class=\"three\"><a href=\"javascript:RateItem('{$varItem}', 3);\" title=\"3 Stars\">3</a></li>\r\n"; $output .= " <li class=\"four\"><a href=\"javascript:RateItem('{$varItem}', 4);\" title=\"4 Stars\">4</a></li>\r\n"; $output .= " <li class=\"five\"><a href=\"javascript:RateItem('{$varItem}', 5);\" title=\"5 Stars\">5</a></li>\r\n"; $output .= "</ul>\r\n"; } The css style sheet is below .rating{ width:80px; height:16px; margin:0 0 20px 0; padding:0; list-style:none; clear:both; position:relative; background: url(../images/star-matrix.gif) no-repeat 0 0; } .rating li.total { background:none; top:0; right:-40px; /*left:90px; /*if you want brackets aligned left*/ position:absolute; fext-indent:0; font-size::93%; } ul.rating li { cursor: pointer; /*ie5 mac doesn't like it if the list is floated\*/ float:left; /* end hide*/ text-indent:-999em; } ul.rating li a { position:absolute; left:0; top:0; width:16px; height:16px; text-decoration:none; z-index: 200; } ul.rating li.one a {left:0} ul.rating li.two a {left:16px;} ul.rating li.three a {left:32px;} ul.rating li.four a {left:48px;} ul.rating li.five a {left:64px;} ul.rating li a:hover { z-index:2; width:80px; height:16px; overflow:hidden; left:0; background: url(../images/star-matrix.gif) no-repeat 0 0 } ul.rating li.one a:hover {background-position:0 -96px;} ul.rating li.two a:hover {background-position:0 -112px;} ul.rating li.three a:hover {background-position:0 -128px} ul.rating li.four a:hover {background-position:0 -144px} ul.rating li.five a:hover {background-position:0 -160px} /* this is used to remove the hover affect */ /* use the background position according to the table above to display the required images*/ .rated{ width:80px; height:16px; margin:0 0 3px 0; padding:0; list-style:none; clear:both; position:relative; background: url(../images/star-matrix.gif) no-repeat 0 0; } ul.rated li { cursor: pointer; /*ie5 mac doesn't like it if the list is floated\*/ float:left; /* end hide*/ text-indent:-999em; } ul.rated li.one a {left:0} ul.rated li.two a {left:16px;} ul.rated li.three a {left:32px;} ul.rated li.four a {left:48px;} ul.rated li.five a {left:64px;} /* add these classes to the ul to effect the change to the correct number of stars */ .nostar {background-position:0 0} .onestar {background-position:0 -16px} .twostar {background-position:0 -32px} .threestar {background-position:0 -48px} .fourstar {background-position:0 -64px} .fivestar {background-position:0 -80px} /* end rating code */ h3{margin:0 0 2px 0;font-size:110%} after the if statement in the OutputRating method there is an else statement which will execute if Rating::CheckRatingsByIp is not equal to 0 else it excute the "rated" class in which works fine, it format the ul tags in the else statement but in the if statement it doesn't format which is the default appearance before the user rate the item. The default appearance is 'nostar' waiting to be rated. There is another method call ShowStars which both statements in the OutputRating method uses the if and else statemtn. ShowStars method: private static function ShowStars($varStars) { $classes = ''; // Select the Number of Stars Class switch ($varStars) { case 1: $classes .= "onestar"; break; case 2: $classes .= "twostar"; break; case 3: $classes .= "threestar"; break; case 4: $classes .= "fourstar"; break; case 5: $classes .= "fivestar"; break; default: $classes .= "nostar"; break; } return $classes; } Help please. Quote Link to comment Share on other sites More sharing options...
haku Posted July 22, 2009 Share Posted July 22, 2009 If you want CSS help, you need to show us the HTML output, not the PHP. The PHP is irrelevant, as CSS is only applied after the data has been outputted from the script. Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 22, 2009 Author Share Posted July 22, 2009 if (Rating::CheckRatingsByIp($varItem) == 0) { $classes = "rating" . Rating::ShowStars($averageStars); // Write Output HTML for the Rating Data $output = "\r\n"; $output .= "<ul class=\"{$classes}\" id=\"{$varItem}\">\r\n"; $output .= " <li class=\"one\"><a href=\"javascript:RateItem('{$varItem}', 1);\" title=\"1 Star\">1</a></li>\r\n"; $output .= " <li class=\"two\"><a href=\"javascript:RateItem('{$varItem}', 2);\" title=\"2 Stars\">2</a></li>\r\n"; $output .= " <li class=\"three\"><a href=\"javascript:RateItem('{$varItem}', 3);\" title=\"3 Stars\">3</a></li>\r\n"; $output .= " <li class=\"four\"><a href=\"javascript:RateItem('{$varItem}', 4);\" title=\"4 Stars\">4</a></li>\r\n"; $output .= " <li class=\"five\"><a href=\"javascript:RateItem('{$varItem}', 5);\" title=\"5 Stars\">5</a></li>\r\n"; $output .= "</ul>\r\n"; } else { $classes = "rated " . Rating::ShowStars($averageStars); // Write Output HTML for the Rating Data $output = "\r\n"; $output .= "<ul class=\"{$classes}\" id=\"{$varItem}\">\r\n"; $output .= " <li class=\"one\">1</li>\r\n"; $output .= " <li class=\"two\">2</li>\r\n"; $output .= " <li class=\"three\">3</li>\r\n"; $output .= " <li class=\"four\">4</li>\r\n"; $output .= " <li class=\"five\">5</li>\r\n"; $output .= "</ul>\r\n"; } } else { $output = ""; // This is a major issue. NO information can be retrieve if an item name is not passed. Error::LogError("Variable Missing", "You must provide the item name for this function to find the average."); } return $output; }[/code] .rating { list-style:none; width:54px; height:7px; margin:0 0 30px 0; padding:0px; clear:both; position:relative; background:url(../images/shoes%27s%20grid%20Rating%20system.gif) no-repeat 0 0; } ul.rating li { cursor: pointer; float:left; text-indent:-900em; } ul.rating li a { position:absolute; left:0; top:0px; width:12px; height:7px; text-decoration:none; z-index: 200; } ul.rating li.one a {left:0px} ul.rating li.two a {left:11px;} ul.rating li.three a {left:22px;} ul.rating li.four a {left:33px;} ul.rating li.five a {left:44px;} ul.rating li a:hover { z-index:2; width:54px; height:7px; overflow:hidden; left:0; background:url(../images/shoes%27s%20grid%20Rating%20system.gif) no-repeat 0 0; list-style:none; } ul.rating li.one a:hover {background-position:0 -42px;} ul.rating li.two a:hover {background-position:0 -49px;} ul.rating li.three a:hover {background-position:0 -56px;} ul.rating li.four a:hover {background-position:0 -63px;} ul.rating li.five a:hover {background-position:0 -70px;} .rated{ width:54px; height:7px; margin:0 0 3px 0; padding:0; list-style:none; clear:both; position:relative; background: url(../images/shoes%27s%20grid%20Rating%20system.gif) no-repeat 0 0; } ul.rated li { cursor: pointer; /*ie5 mac doesn't like it if the list is floated\*/ float:left; /* end hide*/ text-indent:-999em; } ul.rated li.one a {left:0} ul.rated li.two a {left:11px;} ul.rated li.three a {left:22px;} ul.rated li.four a {left:33px;} ul.rated li.five a {left:44px;} .nostar {background-position:0 0} .onestar {background-position:0 -7px;} .twostar {background-position:0 -14px;} .threestar {background-position:0 -21px;} .fourstar {background-position:0 -28px;} .fivestar {background-position:0 -35px;} /* totals */ .rating li.total{ background:none; top:0; right:-40px; /*left:90px; if you want them aligned left*/ position:absolute; text-indent:0; font-size:93%; } Quote Link to comment Share on other sites More sharing options...
haku Posted July 22, 2009 Share Posted July 22, 2009 You are still showing us the PHP. Show us the HTML output, not the php. Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 22, 2009 Author Share Posted July 22, 2009 you mean what appear in the browser? Price: $3.50 Raiting: * 1 * 2 * 3 * 4 * 5 <ul class="rating fourstar"> <li class="one"><a href="#" title="1 Star">1</a></li> <li class="two"><a href="#" title="2 Stars">2</a></li> <li class="three"><a href="#" title="3 Stars">3</a></li> <li class="four"><a href="#" title="4 Stars">4</a></li> <li class="five"><a href="#" title="5 Stars">5</a></li> </ul> The code below has some php embed but it is the same as the html above.. $classes = "rating" . Rating::ShowStars($averageStars); // Write Output HTML for the Rating Data $output = "\r\n"; $output .= "<ul class=\"{$classes}\" id=\"{$varItem}\">\r\n"; $output .= " <li class=\"one\"><a href=\"javascript:RateItem('{$varItem}', 1);\" title=\"1 Star\">1</a></li>\r\n"; $output .= " <li class=\"two\"><a href=\"javascript:RateItem('{$varItem}', 2);\" title=\"2 Stars\">2</a></li>\r\n"; $output .= " <li class=\"three\"><a href=\"javascript:RateItem('{$varItem}', 3);\" title=\"3 Stars\">3</a></li>\r\n"; $output .= " <li class=\"four\"><a href=\"javascript:RateItem('{$varItem}', 4);\" title=\"4 Stars\">4</a></li>\r\n"; $output .= " <li class=\"five\"><a href=\"javascript:RateItem('{$varItem}', 5);\" title=\"5 Stars\">5</a></li>\r\n"; $output .= "</ul>\r\n"; } hope this help if that's not it let me know I will find what you want... Quote Link to comment Share on other sites More sharing options...
haku Posted July 22, 2009 Share Posted July 22, 2009 That's better. The generated HTML is what matters, not the php. CSS doesn't interact with PHP. Anyways, as to your problem, this: .rating{ width:80px; height:16px; margin:0 0 20px 0; padding:0; [b] list-style:none;[/b] clear:both; position:relative; background: url(../images/star-matrix.gif) no-repeat 0 0; } should have fixed your problem. Since it didn't, then one of two things is happening: 1) You have a stronger CSS selector somewhere in your code 2) You have written another CSS declaration somewhere after this, that is the same as this. The last one is the one that takes precedence. Try changing this: .rating{ to this: ul.rating{ Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 22, 2009 Author Share Posted July 22, 2009 I had the same code before but I deleted before. Now I put ul.rating it affected another code in another page i have which is using plain html and not php and it did work but then in the other want is not working. I changed to : ul.rating { list-style:none; width:54px; height:7px; margin:0 0 30px 0; padding:0px; clear:both; position:relative; background:url(../images/NYhungry%27s%20grid%20Rating%20system.gif) no-repeat 0 0; } ul.rating li { cursor: pointer; float:left; text-indent:-900em; } ul.rating li a { position:absolute; left:0; top:0px; width:12px; height:7px; text-decoration:none; z-index: 200; } but still the b rowser displaying as: Price: $3.50 Raiting: * 1 * 2 * 3 * 4 * 5 Quote Link to comment Share on other sites More sharing options...
haku Posted July 22, 2009 Share Posted July 22, 2009 Then like I said before: Since it didn't, then one of two things is happening: 1) You have a stronger CSS selector somewhere in your code 2) You have written another CSS declaration somewhere after this, that is the same as this. The last one is the one that takes precedence. Is this <ul> in a div? What is the ID of the div? Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 22, 2009 Author Share Posted July 22, 2009 it is inside a td.... Hey I got the view source, now it can be a lot more easy to figure it out This is the part that display the rating it passing the classes rating and nostar together not separate as it should be <ul class="rating nostar"> <td><strong>Raiting:</strong></td> <td> <ul class="ratingnostar" id="Jordan air"> <li class="one"><a href="javascript:RateItem('Jordan air', 1);" title="1 Star">1</a></li> <li class="two"><a href="javascript:RateItem('Jordan air', 2);" title="2 Stars">2</a></li> <li class="three"><a href="javascript:RateItem('Jordan air', 3);" title="3 Stars">3</a></li> <li class="four"><a href="javascript:RateItem('Jordan air', 4);" title="4 Stars">4</a></li> <li class="five"><a href="javascript:RateItem('Jordan air', 5);" title="5 Stars">5</a></li> </ul> </td> The whole view source is below and it contain the html code above which as I said display the rating which right now is displaying it vertical instead of formatting it horizontally. <style type="text/css"> <!-- .style1 {color: #FF3300} .style2 {color: #FFFFFF} .style3 {color: #000000} --> </style> <link type="text/css" href="../stylesheets/shoewebpageprueba.css" rel="stylesheet" media="all" /> <title>NYhungry</title> <script src="../flowplayer/flowplayer.controls-3.1.1.swf"></script> <div id="sidebar1"> <ul id="mainNav"> <li id="restaurants"><a href="../../includes/Restaurants frontpage.html" title="All restaurants inside nyhungry" class="first">Restaurants</a></li> <li id="takeouts"><li><a href="../../Take Outs/Take Outs frontpage.html" title="Information about all take Outs">Take Outs</a></li> <li id="pizzerias"><a href="../../Pizzeria/Pizzeria frontpage.html" title="All the pizzerias inside nyhungry">Pizzerias</a></li> <li id="fishmarkets"><a href="../../Fish Markets/Fish Market frontpage.html" title="All the fishmarkets inside nyhungry">Fish Markets</a></li> </ul> <!-- end #sidebar1 --></div> <table id="restaurantview"> <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> </head> <body> </body> </html> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script> $(function() { var default_image = $('td.largethumb img').attr('src'); $('table.smallthumbs a').mouseover(function() { $('td.largethumb img').attr('src', $('img', this).attr('src')); }); }); </script> <script type="text/javascript" src="scripts/prototype.js"></script> <script type="text/javascript" src="scripts/rating.js"></script> <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;">Cereza</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"><strong>Price:</strong></td> <td colspan="7">$<span class="style3">3.50</span></td> <tr> <td class="style1"> </td> <td colspan="7" class="style3"> </td> </tr> <tr><td> </td> <td><strong>Raiting:</strong></td> <td> <ul class="ratingnostar" id="Cereza"> <li class="one"><a href="javascript:RateItem('Cereza', 1);" title="1 Star">1</a></li> <li class="two"><a href="javascript:RateItem('Cereza', 2);" title="2 Stars">2</a></li> <li class="three"><a href="javascript:RateItem('Cereza', 3);" title="3 Stars">3</a></li> <li class="four"><a href="javascript:RateItem('Cereza', 4);" title="4 Stars">4</a></li> <li class="five"><a href="javascript:RateItem('Cereza', 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> </td></table> I have to add that the <td><strong>Raiting:</strong></td> is not horizontally aligned with the row of stars displayed when the css classes format the html code. The row of star is a little upward and the Rating: is a little be downward i want it to be at the same height, Do i have to use the property top? Quote Link to comment Share on other sites More sharing options...
haku Posted July 22, 2009 Share Posted July 22, 2009 Looking at your source, you have some major problems in your code, which are very likely causing your problems. An HTML document needs to be structured like this: <doctype> <html> <head> // title tags, javascript, css </head> <body> // content (javascript is also ok) </body> </html> You have content in your head, and your closing html and body tags are in the middle of your document. Clean these things up first, and see if that helps. Really, you should make your code validate at w3c.org. Errors cause your code to do weird things - like ignore CSS declarations! Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 22, 2009 Author Share Posted July 22, 2009 $classes = "rating " . Rating::ShowStars($averageStars); Huku the problem with the two Css classes together was that I needed to put an space after rating i had "rating" but it is "rating " an space before the double qoutes it was a php error then it pick the nostar or onestar or twostar whichever css rating it pick up, then It pick up the CSS class from the ShowStars Php class and put it "rating nostar" It needed a space. But there is a lot more error I need to take care later I will late you. Quote Link to comment Share on other sites More sharing options...
co.ador Posted July 23, 2009 Author Share Posted July 23, 2009 Haku i am facing the following issue <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...
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.