SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript refreshing effect is not working help

    Code:
     <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

    Code:
    <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

    Code:
    <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.

    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>
    
    <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>
    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.
    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
    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:


    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>
    
    <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>
    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.
    Code:
      <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
    Code:
    href="javascript:RateItem('Torpedo', 1);".
    does appear the first time.

    Stage 2.

    the code below appear in the source page.
    Code:
      <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
    Code:
    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.

    Code:
     <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
    Code:
    href="javascript: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:

    Code:
    <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?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    What do you suggest is needed, for us to be able to test things out in our own web browser?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i want the code to be formatted automatically with the rated css class and right after the users insert the desired numbers of stars then it refresh automatically not by me refreshing the browser..


    I suggest to put the two file below to work.

    Code:
    <script type="text/javascript" src="scripts/prototype.js"></script>
    <script type="text/javascript" src="scripts/rating.js"></script>
    i have observed that i am using another javascript or AJAX function for a image gallery that when the users hover over the pictures it shows the pictures of the smallthumb in the largerthumb and i think that java script is conflicting with the two javascript files above that are suppose to refresh the browser after a user rate.

    Script for the pictures gallery
    Code:
    <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>
    when i put both functions or javascript codes together in the same page one for the image gallery and the other for the rating refresh then the script for the picture gallery stop working.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •