I am frustrated with this and can't get the data to pass. Firebug has been showing me
letter=
I have tried
data: {letter: alpha},
AND
data:"letter=" + alpha,
with no success.
Script below:
$(document).ready(function(){
$('#alphaFilter a').click(function(e){
e.preventDefault();
var alpha = $(this).val();
$.ajax({
type: "POST",
data: {letter: alpha},
url: "includes/filterPlants.php",
success: function(update){
$('#plants').html(update);
}
});
});
})
My HTML element below (basically I want to filter the data set without page refresh):
<div id="alphaFilter">
<a href="#" value="All">All</a>
<a href="#" value="A">A</a>
<a href="#" value="B">B</a>
<a href="#" value="C">C</a>
<a href="#" value="D">D</a>
<a href="#" value="E">E</a>
<a href="#" value="F">F</a>
<a href="#" value="G">G</a>
<a href="#" value="H">H</a>
<a href="#" value="I">I</a>
<a href="#" value="J">J</a>
<a href="#" value="K">K</a>
<a href="#" value="L">L</a>
<a href="#" value="M">M</a>
<a href="#" value="N">N</a>
<a href="#" value="O">O</a>
<a href="#" value="P">P</a>
<a href="#" value="Q">Q</a>
<a href="#" value="R">R</a>
<a href="#" value="S">S</a>
<a href="#" value="T">T</a>
<a href="#" value="U">U</a>
<a href="#" value="V">V</a>
<a href="#" value="W">W</a>
<a href="#" value="X">X</a>
<a href="#" value="Y">Y</a>
<a href="#" value="Z">Z</a>
</div>
Thanks in advance, I'm sure this is a pretty easy one for you guys.
value
attributes and jQuery's .val()
are only really meant for <form>
elements like <input>
s.
For other element types, you can use data-*
attributes to store custom information:
<a href="#" data-value="A">A</a>
And retrieve their values with jQuery's .data()
:
var alpha = $(this).data('value');
I believe your HTML is invalid (I don't believe the anchor tag supports a value attribute). In addition, the jQuery val method won't grab the contents of the value attribute inside your anchor tag.
If you want, you can use the HMLT5 data-* attribute:
<a href="#" data-value="A">A</a>
$(function(){
$('#alphaFilter a').click(function(e){
e.preventDefault();
var alpha = $(this).attr('data-value');
$.ajax({
type: "POST",
data: {letter: alpha},
url: "includes/filterPlants.php",
success: function(update){
$('#plants').html(update);
}
});
});
})
EDIT
As it has been pointed out in the comments, the jQuery .data() method will work for this purpose as well. Both of these will grab the value of "data-value":
$(this).data("value");
//or
$(this).attr("data-value");
var alpha = $(this).attr("value")
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.