Results 1 to 2 of 2

Thread: Combining YUI with PHP/mySQL db call

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    209
    Vote Rating
    0
      0  

    Default Combining YUI with PHP/mySQL db call

    I am playing around with the YUI.. lots of fun

    I am trying to combine overlays with a db query and am not having much success.

    I am listing RSS titles on the site and when the user hits the '+' sign an overlay is supposed to slide in with the body text of the clicked article title..

    try clicking on the '+' sign next to the very first title -- that one works but the remainder do not.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    		
    		<script type="text/javascript" src="yui/build/yahoo/yahoo.js"></script>
    		<script type="text/javascript" src="yui/build/event/event.js" ></script>
    		<script type="text/javascript" src="yui/build/dom/dom.js" ></script>
    		<script type="text/javascript" src="yui/build/animation/animation.js"></script>
    
    		<script type="text/javascript" src="yui/build/container/container_core.js"></script>
    		
    		<style>
    			.overlay { position:absolute;border:1px dotted black;padding:5px;margin:10px;background:#fff; }
    			.overlay .hd { border:1px solid red;padding:5px; }
    			.overlay .bd { border:1px solid green;padding:5px; }
    			.overlay .ft { border:1px solid blue;padding:5px; }
    		</style>
    
    		<script>
    				YAHOO.namespace("example.container");
    
    				function init() {
    
    					// Build overlay3 based on markup
    					YAHOO.example.container.overlay3 = new YAHOO.widget.Overlay("overlay3", { xy:[350,300], 
    													  visible:false, 
    													  width:"300px",
    													  effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
    															  {effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.5}] } );
    					YAHOO.example.container.overlay3.render();
    				
    					YAHOO.util.Event.addListener("show3", "click", YAHOO.example.container.overlay3.show, YAHOO.example.container.overlay3, true);
    					YAHOO.util.Event.addListener("hide3", "click", YAHOO.example.container.overlay3.hide, YAHOO.example.container.overlay3, true);
    					
    				}
    
    				YAHOO.util.Event.addListener(window, "load", init);
    		</script>
    
    	</head>
    	<body>
    
    							<?php
    							
    										include("../../inc/connect.php");
    					 
    							 			$query = "select id, dateUnix, dateString, headline, permalink, body, author, authorURL, favico, sitetype, vote, verified from anews2 where newsCat='breastfeeding' && majorNews = 0 ORDER BY dateUnix DESC LIMIT 10";
    								
    										$result = mysql_query($query);    
    								                                                                                                                                                                                                                                                            
    										// echo $query . "
    
    ";
    					
    										echo '<div id="wrapper">';
    								
    												while ($rownews = mysql_fetch_assoc($result)){
    									 		
    										 						echo '<div id="headline'.$rownews[id].'">[img]'.$rownews[favico].'[/img] <div id="show3" style="display: inline; ">[img]img/icons/expand.gif[/img]</div> '.substr($rownews[headline], 0, 40).'</div>';			 	
    				
    							?>
    												<div id="overlay<?php echo $rownews[id]; ?>" style="visibility:hidden">
    													<div class="hd"><?php echo 'posted by: '.$rownews[author]; ?></div>
    													<div class="bd"><?php echo $rownews[body]; ?></div>
    													<div class="ft">End of Overlay #3 <div id="hide<?php echo $rownews[id]; ?>">x</div></div>
    										
    												</div>
    							<?php
    							
    												}
    										
    							 			echo '</div>';						 	
    					 	
    					 		 ?>
    
    	</body>
    </html>
    the problem is with function init() -- referring to each container as overlay3 is obviously incorrect. How do I change the JS so that the overlay id becomes serialized (ie. id= overlay1, overlay2, overlay3 etc)

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    125
    Vote Rating
    0
      0  

    Default

    You could make it so each overlay has a classname that you can grab all of them by, then loop through the results and add the listeners or whatever. You could also do an asyncRequest or JSONView and make them using javascript.

Similar Threads

  1. sync Ajax call?
    By Nullity in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 24 Jun 2009, 8:24 PM
  2. Complete Grid/mySQL/PHP example anyone?
    By perlmonger in forum Ext 1.x: Help & Discussion
    Replies: 10
    Last Post: 15 Jul 2007, 11:41 AM
  3. yui-ext Mysql Dataloader
    By virtualman in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 27 Apr 2007, 12:02 AM
  4. How to call array-grid?
    By sailaja in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 16 Jan 2007, 6:56 AM
  5. load new tab from menu link from mysql database
    By sondang in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 24 Nov 2006, 10:22 PM

Posting Permissions

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