Show/hide not working properly with jquery

**spyderfusion02** · 07-08-2009 10:15 PM

Hello,

I have a page with three rows of main information that all have a 'More Info' button attached, sort of like http://www.wefollow.com and their info button.

When the 'More Info' link is clicked a <tr> with a class of "mi" slides down above the main info.

The problem that I am getting is hiding the <tr> before the 'More Info' link is clicked. There is just a blank space where the <tr> is. The info in the <tr> is being hidden with jQuery (script below) and then displays when 'More Info' is clicked.

I tried hiding the "mi" with CSS but when the 'More Info' button is clicked, nothing happens.

here is a picture of the problem:
http://i645.photobucket.com/albums/u...1/Picture2.png

Any help would be awesome. Thanks.

Scripts:

index:

HTML Code:

<table>
    <tbody>

        <tr id="info-1"> </tr>
        <tr class="mi">
            <td>
                <div id="1" class="more-information" />
            </td>
        </tr>

        <tr class="">
            <td> </td>
            <td> </td>
            <td> <a id="1" class="more-info" href="#">More info</a> </td>

    </tbody>
</table>

listing.js:

Code:

$(function(){
$(".more-information").hide();
$(".more-info").click(function () {
var divname= this.id; $("#"+divname).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
return false;
});

**Jeff Mott** · 07-08-2009 10:55 PM

I see two problems in the markup. First, IDs must be unique. That means no two elements can have the same ID. And the second is that IDs cannot begin with a number. They must begin with a letter or underscore.

**spyderfusion02** · 07-09-2009 12:15 AM

Originally Posted by Jeff Mott

I see two problems in the markup. First, IDs must be unique. That means no two elements can have the same ID. And the second is that IDs cannot begin with a number. They must begin with a letter or underscore.

Alright, I changed all id's to something unique and none are starting with numbers but it is still not working properly.

**Jeff Mott** · 07-09-2009 10:24 AM

Can you link to or attach the full page you're working with now?

**spyderfusion02** · 07-09-2009 04:05 PM

The files are on the localhost so I will post the files here.

main file(function is called in the html page in an 'output-listings' div)
buy.function.php:

PHP Code:


<?php

function outputListingsTable()

{

    $mysql = new mysqli('localhost', 'root', 'root', 'ajax_demo') or die('you\'re dead');

    $result = $mysql->query("SELECT * FROM explore") or die($mysql->error);



    if($result) 

    {

        echo "<div class=\"main-info\"> \n";

            echo "<table class=\"listings\"> \n";

                echo "<tbody>";

        

                    while($row = $result->fetch_object()) 

                    {

                        $id = $row->id;

                        $siteName = $row->site_name;

                        $siteDescription = $row->site_description;

                        $siteURL = $row->site_url;

                        $sitePrice = $row->site_price;

        

            

                        echo "        <tr id=\"info-" .$id. "\"> \n";

                                        echo "<tr class=\"mi\"><td><div id=\"more-" .$id. "\" class=\"more-information\"> \n";

                                        echo "</div></td></tr> \n";

                        echo "         <td>" . $siteName . "</td> \n";

                        echo "        <td>" . $siteURL . "</td> \n";

                        echo "        <td><a id=\"" . $id . "\" class=\"more-info\" href=\"#\">More info</a></td> \n";    

                        echo "        </tr>";

                    }

        echo "</tbody>";

    echo "</table> \n";

echo "</div> \n";            



    }



}



?>

listing.js:

Code:

$(function(){
	$("tr").hover(function(){
		$(this).addClass("hover");
	}, function() {
		$(this).removeClass("hover");
	});
	$(function() {
	$("a.more-info").click(function() {
	$("#more-" + this.id).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
	return false;
	});
});


});

style.css:

Code:

tr.hover td { background: #FDFFE7; }
	table { border-collapse:collapse;
			color:#3F3F3F;
			font-family:arial,helvetica,sans-serif;
			border-top:1px solid #DFDFDF;
		  }
td.more-information { padding: 0px; }

div.more-information { display: none; }

**Jeff Mott** · 07-09-2009 04:51 PM

The PHP code doesn't do us any good because this issue is at the front-end. Can you view your page, then view the source and paste that source here in a code block?

**spyderfusion02** · 07-09-2009 08:50 PM

Here is the page source from the page.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Some Title</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="listing.js"></script>

</head>

<body>
	<div id="login-nav">
		<a href="login.php">Please Login!</a>	</div>
    <div id="top-nav">
	<a href=index.php>Home</a>
        <a href=sites.php>Sites</a>
        <a href=register.php>Sign-Up</a>
        <a href=login.php>Login</a>
        <a href=myac.php>My Account</a>
    </div>

<div id="page-wrap">

<div id="curve-container"></div>
<div id="main-content">
	<div id="article-area">

		<h1>Sites</h1>
	<div id="output-listings">
		<div class="main-info"> 
<table class="listings"> 
<tbody>		<tr id="info-1"> 
<tr class="mi"><td><div id="more-1" class="more-information"> 
</div></td></tr> 
	 	<td>Leftlane News</td> 
		<td>www.leftlanenews.com/</td> 
		<td><a id="1" class="more-info" href="#">More info</a></td> 
		</tr>		<tr id="info-2"> 

<tr class="mi"><td><div id="more-2" class="more-information"> 
</div></td></tr> 
	 	<td>Motor Authority</td> 
		<td>www.motorauthority.com/ </td> 
		<td><a id="2" class="more-info" href="#">More info</a></td> 
		</tr>		<tr id="info-3"> 
<tr class="mi"><td><div id="more-3" class="more-information"> 
</div></td></tr> 
	 	<td>Autoblog</td> 
		<td>http://www.autoblog.com/</td> 
		<td><a id="3" class="more-info" href="#">More info</a></td> 
		</tr></tbody></table> 

</div> 
	</div><!--end output-listings-->

	</div>
	<div class="clear"></div>
 </div>
<div id="footer"></div>

<div id="curve-container"></div>
<div id="features">
	<div id="p-header">
		<h1>Some header here</h1>

		<p>Some text here</p>
	</div>
 </div>
<div id="ft-bottom"></div>
<div id="text-footer"><p>Copyright &copy 2009 Business Name Inc. All rights reserved.</p></div>

</div>
</body>

</hmtl>

**Jeff Mott** · 07-10-2009 10:16 AM

Notice in the markup that there are a couple instances of trying to open two table rows, one right after the other:

Code:

<tr id="info-1"> <tr class="mi">

This is almost certainly a contributing factor to your problems. Fix that, and we'll go from there.

You should also consider using the W3C validator. It helps you catch errors like this one.

**Jeff Mott** · 07-10-2009 10:19 AM

Oh... and that markup you posted still has numerical and duplicated IDs.

**spyderfusion02** · 07-10-2009 05:03 PM

Alright, I cleaned it up a bit and validated it and fixed some errors. The only error now is the duplicated 'curve-container' div which isn't really a problem right now, its just for styling purposes.

Here is the new page source:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Title here</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="listing.js"></script>

</head>

<body>
	<div id="login-nav">
		<a href="login.php">Please Login!</a>	</div>
    <div id="top-nav">
	<a href="index.php">Home</a>
        <a href="buy.php">Sites</a>
        <a href="register.php">Sign-Up</a>
        <a href="login.php">Login</a>
        <a href="myac.php">My Account</a>
    </div>

<div id="page-wrap">

<div id="curve-container"></div>
<div id="main-content">
	<div id="article-area">

		<h1>Sites</h1>
	<div id="output-listings">
		<div class="main-info"> 
<table class="listings"> 
<tbody> 
	<tr id="more-info-1" class="mi-1"> 
	<td> 
		<div id="more-1" class="more-information"></div> 
	</td> 
	</tr> 
	<tr id="main-info-1"> 
	 	<td>Leftlane News</td> 
		<td>www.leftlanenews.com/</td> 
		<td><a id="link-1" class="more-info-link" href="#">More info</a></td> 
	</tr> 
	<tr id="more-info-2" class="mi-2"> 
	<td> 
		<div id="more-2" class="more-information"></div> 
	</td> 
	</tr> 
	<tr id="main-info-2"> 
	 	<td>Motor Authority</td> 
		<td>www.motorauthority.com/ </td> 
		<td><a id="link-2" class="more-info-link" href="#">More info</a></td> 
	</tr> 
	<tr id="more-info-3" class="mi-3"> 
	<td> 
		<div id="more-3" class="more-information"></div> 
	</td> 
	</tr> 
	<tr id="main-info-3"> 
	 	<td>Autoblog</td> 
		<td>http://www.autoblog.com/</td> 
		<td><a id="link-3" class="more-info-link" href="#">More info</a></td> 
	</tr> 

</tbody> 
</table> 
</div> 
	</div><!--end output-listings-->

	</div>
	<div class="clear"></div>
 </div>
<div id="footer"></div>

<div id="curve-container"></div>
<div id="features">
	<div id="p-header">

		<h1>Header here</h1>
		<p>Some text here</p>
	</div>
 </div>
<div id="ft-bottom"></div>
<div id="text-footer"><p>Copyright &copy; 2009 Business Name Inc. All rights reserved.</p></div>

</div>

</body>

</html>

**Jeff Mott** · 07-10-2009 05:38 PM

Can you check that your getinfo.php is actually returning content?

**spyderfusion02** · 07-10-2009 06:01 PM

Originally Posted by Jeff Mott

Can you check that your getinfo.php is actually returning content?

Yup it is, the three site descriptions in the database.

Heres the page source:

Code:

<span class="description">Leftlane News is a leading source for automotive industry and vehicle news. Read by driving enthusiasts, car shoppers, autoworkers, executives, and investors, it is updated throughout the day with the very latest auto news as it happens. No other site brings together the same degree of timeliness, thoroughness and accuracy as Leftlane News.</span> 
<span class="description">Motor Authority is a global news source specializing in automotive industry, product and motorsport news with a skew towards high-performance and luxury segments. Motor Authority is always at the forefront of cutting edge and breaking news and provides 24-hour coverage of all the events and happenings in the automotive world.</span> 
<span class="description">Autoblog.com is a web site that offers daily weblogs and podcast news and commentary about automobiles and the automotive industry. It is part of the Weblogs, Inc. network of media sites which is owned by AOL.</span>

Thread: Show/hide not working properly with jquery

Thread Tools

Display

Show/hide not working properly with jquery

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions