Page 1 of 1

show/hide details with javascipt css and php do while

Posted: Tue Nov 20, 2007 5:06 am
by prasitc2005
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Hi All Gurus

Please help me modifying this scripts, what have I done wrong. Why the show/hide details appear only at the first row of products and not individually at the rest?


The php do while script with problem:

Code: Select all

<td width="73%" align="left" valign="top">
              <h1 align="left">Product Price Details</h1>
              <form action = <?php echo $_SERVER["PHP_SELF"] ?>?<?php echo $_SERVER["QUERY_STRING"] ?> method = post>
                <table width="100%"  border="1" cellpadding="0" cellspacing="0" bordercolor="#eeeeee">
                <!--DWLayoutTable-->
                <tr bgcolor="#eeeeee">
                  <td><div align="center"><strong>Qty</strong></div></td>
                  <td><div align="center"><strong>Image</strong></div></td>
                  <td><div align="center"><strong>Product Name </strong></div></td>
                  <td><div align="center"><strong>Colour</strong></div></td>
                  <td><div align="center"><strong>Lamp Type </strong></div></td>
                  <td><div align="center"><strong>Price</strong></div></td>
                </tr>
                <?php do { ?>
				  <tr bgcolor="#FFFFFF">
                  <td width="27"><font face="verdana" size="1" color="black">
				    <input type = text name = "__<?php echo $row_rs_pricedet['code']; ?>" value="0" size="2">
                  </a> </font></td>
                  <td width="59"><img src='<?php echo $row_rs_pricedet['image']; ?>' width="50" height="50" />&nbsp;</td>
                  <td width="256"><div align="center"><?php echo $row_rs_pricedet['name']; ?>             
                   </div>   
<div>   <!--start to show/hide details-->		
<a href="javascript:workforchange('p2','changer2','Hide details:','Show details:');" id='changer2'>More details:</a>
<span id='p2' style='display:none'><?php echo $row_rs_pricedet['details]; ?></span>
<!--end to show/hide details--></div>  

 					
                  
				  <td width="94"><div align="center">
                    <?php if($row_rs_pricedet['colour']!="") { echo $row_rs_pricedet['colour']; } else { echo " "; }?>
                  </div> </td>
				  <td width="82"><div align="center"><?php echo $row_rs_pricedet['lamptype']; ?></div> </td>
                  <td width="93"><div align="right">&pound;<?php echo $row_rs_pricedet['price']; ?></div> </td>
                </tr>
                <?php } while ($row_rs_pricedet = mysql_fetch_assoc($rs_pricedet)); ?>
                <tr bordercolor="#CCCCFF">
                  <td colspan="6" bordercolor="#CCCCFF"></td>
                </tr>
              </table>
                <br />
                <input type = hidden name = new value = 0 >  
              <input type = hidden name = addmultiple value = true>
                <input type="submit" name="Submit" value="Add To Cart" />
                <div></div>
              </form>
		    </td>

The javascript:

Code: Select all

<script type="text/javascript" language="JavaScript"><!--
<!--
	function showhide(targetID) {
		//change target element mode
		var elementmode = document.getElementById(targetID).style;
		elementmode.display = (!elementmode.display) ? 'none' : '';
	}

	function changetext(changee,oldText,newText) {
		//changes text in source element
		var elementToChange = document.getElementById(changee);
		elementToChange.innerHTML = (elementToChange.innerHTML == oldText) ? newText : oldText;
	}

	function workforchange(targetID,sourceID,oldContent,newContent) {
		showhide(targetID);
		changetext(sourceID,oldContent,newContent);
	}

	// Cruft note: The content of "oldContent," the third argument of the
	// workforchange() function, must match the existing content of the changer text.

// -->
</script>

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Wed Nov 21, 2007 10:46 am
by Zoxive

Code: Select all

<a href="javascript:workforchange('p2','changer2','Hide details:','Show details:');" id='changer2'>More details:</a> 
<span id='p2' style='display:none'><?php echo $row_rs_pricedet['details]; ?></span> 
They all need Unique IDs. This is a HTML/Javascript Problem not PHP.

Simply Change the the ID to something Unique per each Loop Item/Data.

Posted: Wed Nov 21, 2007 12:21 pm
by prasitc2005
Thanks a lot

This gave me a big hint for help. I manage to change id for unique recordset but the fist row still act funny displaying show or hide details.

Code: Select all

<!--start to show/hide details-->		
<a href="javascript:workforchange('<?php echo $row_rs_pricedet['code']; ?>','changer2','Hide details:','Show details:');" id='changer2'>More details:</a>
<span id='<?php echo $row_rs_pricedet['code']; ?>' style='display:none'><?php echo $row_rs_pricedet['name'];?></span>
<!--end to show/hide details-->
More help please, it's now almost there!

Posted: Wed Nov 21, 2007 12:27 pm
by feyd
The code still contains hardcoded values for the id's.