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:

$(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);
	});
});

HTML structure (of relavent bit)

<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> 

[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

$('#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');
		});
    });

 <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 →" />
                </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="←" />
                <div class="pagination fl-right">
                    <a href="#" class="disabled">« previous</a>
                    <a href="#" class="current">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <span class="ellip">…</span>
                    <a href="#">17</a>
                    <a href="#" >next »</a>
                </div>
            </div>
        </section>

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