Javascript not responding to HTML

bowersbros · Post by **bowersbros** » Sat Feb 25, 2012 5:16 pm

Okay, so i have it setup so i have a unordered list populate via the database based on something previously chosen.

The first step (where it is populated immediately) works, so when I click on it, it changes the content to the next page. But when i click on a link from there, it doesnt work. (as in, should progress forward again) but it doesnt.

I have tried to view source, but since it is added via jQuery, i dont think it shows up in the source code.

Any ideas how i can try to fix this?

Code:

HTML: [syntax=xhtml]<?php
mysql_connect('localhost','root','');
mysql_select_db('youtube-discover');
?><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>YouTube Discover | Beta</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="lib/tipTip.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="lib/jquery.cookie.js"></script>
<script src="lib/jquery.navigation.js"></script>
<script src="lib/jquery.filter.js"></script>
<script src="lib/jquery.highlight.js"></script>
<script>
$(document).ready(function(){

$('.step_2').hide();
$('.step_3').hide();
$('#right').hide();
$('.input').hide();

});
function showResults(){
$('#filters').fadeOut('slow',function(){
$('#results').fadeIn();

});
$('.step_3 p').fadeOut('slow',function(){
$('.step_3 p').html('On the right, you\'ll find the relevant results. If they aren\'t please use the feedback tool below.');
$('.step_3 p').fadeIn('slow');
});

}
function showSubCategories(category){
$.ajax({
type: "GET",
url: "lib/getSubCat.php?cname="+category,
dataType: "xml",
success: function(xml) {
var select = $('#sub-categories');
$(xml).find('CategoryItem').each(function(){
var value = $(this).find('sname').text();
var content = $(this).find('name').text();
select.append("<a href='#'><li name='"+value+"' class='click'>"+content+"</li></a>");
});
}
});
}
function resetPage(){

$('.step_2').hide();
$('.step_1').hide();
$('#sub-categories').empty();
$('.step_3').fadeOut('slow');

$('#right').fadeOut('slow',function(){
$('.step_1').fadeIn('slow');
});
}
</script>
</head>
<body>
<div id="container" style="height: 330px;">
<header class="group">
<a href="javascript: resetPage();" style="display: block; width: 170px;"><div id="logo">YouTube Discover</div></a>
<nav id="nav1"><string>Login will be added soon</strong> - <a href="#" class="tooltip" title="I will be adding moderation features in the future which will allow trusted users to help speed the process of acceptance along">Submit video</a> - <a class="tooltip" title="Coming Soon">Register</a></nav>
</header>
<div class="group">
<section id="left" class="step_1">
<h2>Categories</h2>
<ul id="categories">
<?php
$query = mysql_query('SELECT `name`,`cname` FROM `catlist` ORDER BY `id` ASC');
while($row = mysql_fetch_assoc($query)){
$array[$row['cname']] = $row['name'];
}

foreach($array as $key => $val){

echo '<a href="#"><li name="'.$key.'">'.$val.'</li></a>';

}
?>
</ul>
</section>
<section id="left" class="step_2">
<h2>Tutorials</h2>
<ul id="sub-categories">
</ul>
</section>
<section id="left" class="step_3">
<h2>Tutorials</h2>
<ul id="categories">
<a href="javascript: resetPage();"><li>Go Back</li></a>
</ul>
<p>Please choose your filters on the right, or make a search query. <br /><br />Then click Go</p>
</section>
<section id="right">
<div id="filters" class="scrollable">
<h2>Filters</h2>
<form method="post" id="filtering" action="javascript:showResults();">
<input name="search" id="search" type="text" placeholder="Search Query..."/>

<div class="group">

<div class="filter" name="Gender">
<div class="image" name="Either" style="background-position: 0px 0px"></div>
<div class="image" name="Male" style="background-position: 0px -70px"></div>
<div class="image" name="Female" style="background-position: 0px -140px"></div>
<div class="image" name="Neither" style="background-position: -70px 0px"></div>
<input type="text" class="input" id="gender_val" name="gender" value="" disabled="true" />
</div>
<div class="filter" name="Location">
<div class="image" name="Huh?" style="background-position: -70px -70px"></div>
<div class="image" name="Happy" style="background-position: -70px -140px"></div>
<div class="image" name="What!?" style="background-position: -140px 0px"></div>
<input type="text" class="input" id="location_val" name="location" value="" disabled="true" />
</div>
</div>
<input id="submit" type="submit" value="Go →" style="float: right;" />
</form>
</div>
<div id="results">
<div class="scrollable group">
<a href="play_video.html" title="Result 1" style="background: url('data/grass.jpg')"></a>
<a href="play_video.html" title="Result 2 which is a really cool result></a>
<a href="play_video.html" title="Result 3"></a>
<a href="play_video.html" title="Result 4"></a>
<a href="play_video.html" title="Result 5"></a>

<a href="play_video.html" title="Result 1"></a>
<a href="play_video.html" title="Result 2 which is a really cool result"></a>
<a href="play_video.html" title="Result 3"></a>
<a href="play_video.html" title="Result 4"></a>
<a href="play_video.html" title="Result 5"></a>

<a href="play_video.html" title="Result 1"></a>
<a href="play_video.html" title="Result 2 which is a really cool result"></a>
<a href="play_video.html" title="Result 3"></a>
<a href="play_video.html" title="Result 4"></a>
<a href="play_video.html" title="Result 5"></a>

<a href="play_video.html" title="Result 1"></a>
<a href="play_video.html" title="Result 2 which is a really cool result"></a>
<a href="play_video.html" title="Result 3"></a>
<a href="play_video.html" title="Result 4"></a>
<a href="play_video.html" title="Result 5"></a>

<a href="play_video.html" title="Result 1"></a>
<a href="play_video.html" title="Result 2 which is a really cool result"></a>
<a href="play_video.html" title="Result 3"></a>
<a href="play_video.html" title="Result 4"></a>
<a href="play_video.html" title="Result 5"></a>

<a href="play_video.html" title="Result 1"></a>
<a href="play_video.html" title="Result 2 which is a really cool result"></a>
<a href="play_video.html" title="Result 3"></a>
<a href="play_video.html" title="Result 4"></a>
<a href="play_video.html" title="Result 5"></a>

<a href="play_video.html" title="Result 1"></a>
<a href="play_video.html" title="Result 2 which is a really cool result"></a>
<a href="play_video.html" title="Result 3"></a>
<a href="play_video.html" title="Result 4"></a>
<a href="play_video.html" title="Result 5"></a>
</div>

</div>
</section>
</div>
</div>
<footer>
<span class="padded tooltip" title="Videos are copyright of their respective owners. My copyright is only to those videos that are of my creation, and to the code upon this website was created. Some code is from open source projects.">© Copyright 2011 Alex Bowers</span>
<span class="padded"><a href="http://gplus.to/bowersbros" class="tooltip" title="No anonymous submissions allowed incase I need to get more details. But private or public submissions allowed. For private, on my profle click on either Send Message or Send Email">Provide Feedback</a></span>
<span class="padded tooltip" title="I am in no way afflicated with Google Inc, YouTube and do not own any, or store any of the video content on my server. I am just a portal to discover YouTube Videos.">Read Me</span>
<span class="padded tooltip" title="I store details about your visit. I do not provide or sell this information to anybody else. Nor will I ever use this information for profit. The information stored is anonymous, but unique to you. To understand more about this, send me a message on Google Plus via the Feedback link.">Privacy</span>
</footer>

</body>
</html>[/syntax]

Then the javascript code relating to this:
[syntax=javascript]/*
* jQuery.navigation.js
*
* Author: Alex Bowers
* Version: 0.1 - Beta
* Created: Sat, Dec 24, 2011 18:24:15 GMT
* Last Modified: Fri, Feb 24, 2012 21:56:09 GMT
*
*/

$(document).ready(function(){
$("#categories li").click(function(){
var catChosen = $(this).attr('name');

$('.step_2 #sub-categories').attr('holder',catChosen);
$('.step_1').fadeOut('slow',function(){
$.cookie('step1',catChosen);
showSubCategories(catChosen);
$('.step_2').fadeIn('slow');
});

});

$('#sub-categories li.click').click(function(){
var catChosen = $(this).attr('holder');
var subCat = $('li').attr('name');

alert('yes');
$('.step_2').fadeOut('slow',function(){
$.cookie('step2',subCat);
$('.step_3').fadeIn('slow');
$('#right').fadeIn('slow');
});
});
});[/syntax]

Edit, the alert isnt showing which makes me think that somehow it isnt recognising the list item being clicked. thats why i added the .click to it, to specify it closer, but that still doesnt work.