jQuery [object Object] issue

JavaScript related questions should go here.
Post Reply
bowersbros
Posts: 534
Joined: Thu May 05, 2011 8:19 pm

jQuery [object Object] issue

Post by 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> 
I don't like to brag, but I wasn't circumcised. I was circumnavigated. ;)

Want to learn something new? Or maybe reinforce what you already know? Or just help out? Please subscribe to my videos: http://goo.gl/58pN9
Tino
Posts: 360
Joined: Thu May 05, 2011 8:55 pm
Location: The Netherlands

Re: jQuery [object Object] issue

Post by 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 :)
Please check out my CodeCanyon items.
bowersbros
Posts: 534
Joined: Thu May 05, 2011 8:19 pm

Re: jQuery [object Object] issue

Post by bowersbros »

Heh. My bad ;)
I don't like to brag, but I wasn't circumcised. I was circumnavigated. ;)

Want to learn something new? Or maybe reinforce what you already know? Or just help out? Please subscribe to my videos: http://goo.gl/58pN9
bowersbros
Posts: 534
Joined: Thu May 05, 2011 8:19 pm

Re: jQuery [object Object] issue

Post by bowersbros »

another issue now :P

Not really related, but didnt think it warranted making a new topic since its probably a stupid mistake again :P
$('#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? :/
I don't like to brag, but I wasn't circumcised. I was circumnavigated. ;)

Want to learn something new? Or maybe reinforce what you already know? Or just help out? Please subscribe to my videos: http://goo.gl/58pN9
Tino
Posts: 360
Joined: Thu May 05, 2011 8:55 pm
Location: The Netherlands

Re: jQuery [object Object] issue

Post by 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?
Please check out my CodeCanyon items.
bowersbros
Posts: 534
Joined: Thu May 05, 2011 8:19 pm

Re: jQuery [object Object] issue

Post by bowersbros »

yes, Nothing. No alert. Nothing :/
I don't like to brag, but I wasn't circumcised. I was circumnavigated. ;)

Want to learn something new? Or maybe reinforce what you already know? Or just help out? Please subscribe to my videos: http://goo.gl/58pN9
Tino
Posts: 360
Joined: Thu May 05, 2011 8:55 pm
Location: The Netherlands

Re: jQuery [object Object] issue

Post by 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.
Please check out my CodeCanyon items.
bowersbros
Posts: 534
Joined: Thu May 05, 2011 8:19 pm

Re: jQuery [object Object] issue

Post by 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 :P
I don't like to brag, but I wasn't circumcised. I was circumnavigated. ;)

Want to learn something new? Or maybe reinforce what you already know? Or just help out? Please subscribe to my videos: http://goo.gl/58pN9
Post Reply