jQuery Div Refresh with jQuery Hide/Show Div

Discussion in 'jQuery' started by gallitin, Jun 15, 2012.

  1. #1
    I have a page that refreshes a div:
    <?php
    /***************************************************************************************
    Purpose: 	Page to display all open projects.
    		
    Maintenance History:
    Date:		Name:			Action:	
    ----------------------------------------------------------------------------------------
    06/14/2012	Nathan             	Created
    ****************************************************************************************/
    //Is the user logged in?
    define("_VALID_PHP", true);
    require_once("init.php");
      if (!$user->logged_in)
          redirect_to("index.php");
      $row = $user->getUserData();
      $userid = $row['id'];
    
    //Connect to the Database
    require_once("config.php");
    
    echo '<script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
     $(document).ready(function() {
     	 $("#responsecontainer").load("response.php");
       var refreshId = setInterval(function() {
          $("#responsecontainer").load("response.php");
       }, 5000);
       $.ajaxSetup({ cache: false });
    });
    </script>';
    
    //Begin Header
    include("header.php");
    echo '<center><h1>Current Projects</h1></center>';
    echo '<div class="workplace">
    <div class="newproject"><a href="' . $path . '/newproject.php"><img src="' . $path . '/images/newproject.png" width="75" height="76" /></a></br>New Project</div>
    	<div id="responsecontainer">
    	
    </div>';
    //Begin Footer
    include("footer.php");
    ?>
    Code (markup):
    It's refreshing the div "responsecontainer" every 5 seconds to look for new projects. The data that it gets from response.php is here:
    <? 
    /***************************************************************************************
    Purpose: 	Collects Data to Display on projects.php
    		
    Maintenance History:
    Date:		Name:			Action:	
    ----------------------------------------------------------------------------------------
    06/14/2012	Nathan             	Created
    ****************************************************************************************/
    
    //Is the user logged in?
    define("_VALID_PHP", true);
    require_once("init.php");
      if (!$user->logged_in)
          redirect_to("index.php");
      $row = $user->getUserData();
      $userid = $row['id'];
      
    //Connect to the Database
    require_once("config.php");
    $connect = mysql_connect($host,$username,$password);
    mysql_select_db($database, $connect);
    
    //Query the needed data
    $result = mysql_query("SELECT p.id,
    							userid,
    							title,
    							description,
    							date_format(createdate,'%M %D %Y') createdate1,
    							date_format(enddate,'%M %D %Y') enddate,
    							complete,
    							username,
    							(select count(id) from comments where projectid = p.id ) commentcount
    							FROM projects p 
    							join users u on p.userid = u.id  
    							where userid = " . $userid . " 
    							and Complete = 0 
    							order by createdate desc");
    //jQuery code to hide/show Comments
    echo '<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
            $(".slidingDiv").hide();
            $(".show_hide").show();
       $(".show_hide").click(function(){
       $(this).next(".slidingDiv").slideToggle();
    });
    });
    </script>';
    
    //Check to see if there are any open projects
    if (mysql_num_rows($result) == 0)
      echo 'You have not started any projects</br></br></br></br></br>';
    //If open projects list them
    while($row = mysql_fetch_array($result))
      {
    	if ($row['id'] > 0) echo '
    <div class="projectboxpreview">' . '
    	<div class="newprojectboxtitle">'	. '
    		<a href="' . $path . '/projects/' . $row['id'] . '.php">' . $row['title'] . '</a>' . ' 
    		<div class="pusername"> 
    			Created By: ' . $row['username'] . '
    		</div>' . '
    	</div>' . 
    $row['description'] . '</br>
    			<a href="#" class="show_hide">Comments</a>
    				<div class="slidingDiv">' . $row['commentcount'] . '
    				
    				</div>
    			
    </div>';
    }
     ?>
    Code (markup):
    On the page load the div that is hidden is "Comments" and works as expected. Though after the page refreshes the div, the "Comments" are all expanded and the hide/show no longer works.
     
    gallitin, Jun 15, 2012 IP