jQuery [object Object] issue

[bowersbros]

Okay, so im trying to get the attribute of a clicked Li tag, and annoyingly, it keeps posting: [object Object] and I can't work out why.

Code:

[syntax=javascript]
$(document).ready(function(){
$("li").click(function(){
var catChosen = $("li").attr('name');
$('.step_2 #sub-category').attr('holder',catChosen);
var c1 = $('.step_2 #sub-category').attr('holder',catChosen);
$('.step_1').hide();
$('.step_2').show();
alert('Category: ' + c1);
});
});
[/syntax]

HTML structure (of relavent bit)
[syntax=xhtml]
<section id="left" class="step_1">
<h2>Categories</h2>
<ul id="categories">
<a href="#"><li name="c1">Tutorials</li></a>
<a href="#"><li name="c2">Blog</li></a>
<a href="#"><li name="c3">Unboxing</li></a>
<a href="#"><li name="c4">Showing Off</li></a>
<a href="#"><li name="c5">Music</li></a>
</ul>
</section>
<section id="left" class="step_2">
<h2>Tutorials</h2>
<ul id="sub-categories">
<a href="#"><li name="s1">Web</li></a>
<a href="#"><li name="s1">Web</li></a>
<a href="#"><li name="s1">Web</li></a>
</ul>
</section>
[/syntax]

[Tino]

In your JavaScript (or jQuery) every notion of #sub-category should be changed to #sub-categories. Hopefully that will fix your issue.

Using the wrong selector can cause a great deal of trouble

[bowersbros]

Heh. My bad

[bowersbros]

another issue now

Not really related, but didnt think it warranted making a new topic since its probably a stupid mistake again

[syntax=javascript]$('#submit').submit(function(){
var $inputs = $('#filtering :input');
var filterData = {};
$inputs.each(function() {
filterData[this.name] = $(this).val();
});
var request = $.ajax({
type: "POST",
url: "filters.php",
data: filterData,
dataType: 'text',
success: function(){
$('#filters').fadeOut(250);
$('#results').fadeIn(250);
}
});
request.done(function(msg){
alert(msg);
});
request.fail(function(){
alert('fail');
});
});[/syntax]
[syntax=xhtml] <section id="right">
<div id="filters" class="scrollable">
<h2>Filters</h2>
<form method="post" id="filtering">
<input name="search" id="search" type="text" placeholder="Search Query..."/>

<div class="group">
<!-- uses sprites for efficiency, but *could* use individual <img>'s iff absolutely necessary -->
<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="button" value="Go &rarr;" />
</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>
<input id="back" class="fl-left" type="button" value="&larr;" />
<div class="pagination fl-right">
<a href="#" class="disabled">&laquo; previous</a>
<a href="#" class="current">1</a>
<a href="#">2</a>
<a href="#">3</a>
<span class="ellip">&hellip;</span>
<a href="#">17</a>
<a href="#" >next &raquo;</a>
</div>
</div>
</section>[/syntax]

When i press the go button, nothing happens. Any ideas why? :/

[Tino]

What do you mean nothing happens? Nothing happens as in, you don't even get one of those alert boxes that you should be getting?

[bowersbros]

yes, Nothing. No alert. Nothing :/

[Tino]

Ah.

That so-called submit button is actually just a normal button, i.e. doesn't submit. So you either have to use the click method on that button, or change the button to a submit button.

[bowersbros]

I changed it to a submit and it just refreshed the page (with the # thing in the URL)..

So, im just going with PHP and normal form submission.. Much easier