CODEWITHSUNDEEP
javascriptjqueryhtmlcssfadeout
ghaschel
ghaschel

Reputation: 1355

Jquery syntax and variables

I'm trying to make a FadeOut effect after clicking a link. But my syntax seems to be wrong. When i click, it fadeout, and go to a "~~nothing~~.html" page, it just dont get the value to compose the variable. the id boo is attached to the tag (body id="boo") and in the css stylesheet the id #boo is set to display:none; I'm using jquery-1.7.2.min

<script type="text/javascript">
    $(document).ready(function(){
        $('#go').click(function(e) { //When something with the id 'go' is clicked, 
            e.preventDefault(); //Prevent default action (?)
            var url = $('#go').val() + ".html"; //set url as "Clicked 'go' value + .html" (374.html"
            $('#boo').fadeOut(600, function() { window.location.href = url; }); //fadeOut what is with the 'boo' id (body), and load the created address as a new page (?)
        });
    });
</script>
<a id="go" value="374" href="#">Go to page 374</a>

the 374.html page is in the same folder. If possible, please explain what have i done wrong, and make it step by step. I'm new to jquery.

Thank you!

Upvotes: 0

Views: 137

Answers (4)

ipr101
ipr101

Reputation: 24236

Try:

var url = $('#go').attr("value") + ".html";

instead of

var url = $('#go').val() + ".html";

From the jQuery docs -

The .val() method is primarily used to get the values of form elements such as input, select and textarea. In the case of elements, the .val() method returns an array containing each selected option; if no option is selected, it returns null.

There's an example here - http://jsfiddle.net/A8ArH/

Upvotes: 1

Lord Spectre
Lord Spectre

Reputation: 781

The a tag doesn't support the attribute value, you should do like this:

set the anchor like this

<a id="go" data-page="374" href="#">...

(data-xxx are custom attributes)

and get its value with

$('#go').data('page')

In this way it will work and you will respect the HTML standard (since the anchor shouldn't have the value attribute)

Upvotes: 1

Jamiec
Jamiec

Reputation: 136094

the .val() method only applies to fields, just putting a value attribute on any element will not be read with the val() method.

Instead use .attr('value').

Or, its better practice to use data-* attributes and use the data() method:

<script type="text/javascript">
    $(document).ready(function(){
        $('#go').click(function(e) { //When something with the id 'go' is clicked, 
            e.preventDefault(); //Prevent default action (?)
            var url = $('#go').data('value') + ".html"; //set url as "Clicked 'go' value + .html" (374.html"
            $('#boo').fadeOut(600, function() { window.location.href = url; }); //fadeOut what is with the 'boo' id (body), and load the created address as a new page (?)
        });
    });
</script>
<a id="go" data-value="374" href="#">Go to page 374</a>

Upvotes: 3

Shyju
Shyju

Reputation: 218722

The val() function won't give you that value from an anchor tag, use attr("value") to get the valuue of the a tag 

$(document).ready(function(){
    $('#go').click(function(e) { 
        e.preventDefault(); 
        var url = $('#go').attr("value") + ".html"; 
        alert(url)
        $('#boo').fadeOut(600, function() {
                 window.location.href = url; 
        });
    });
});​

Alternatively, you can use HTML 5 data attribute to store such kind of value

<a id="go" data-someValue="374" href="#">Go to page 374</a>

And you can access it in javascript like

var someVal=$("#go").data("someValue");

sample http://jsfiddle.net/LyPZB/1/

Upvotes: 1

Related Questions