I’ve got a link that is sent using AJAX but no results are being sent. The link is:
<a href="javascript:void(0);" data-flavour="Berry" class="nav_link Berry">Berry</a>
While the AJAX is:
<script type="text/javascript">
$('.nav_link').on('click', function(){
event.preventDefault();
var flavour = $(this).data('flavour');
$.get('/filter/?search=' + $(flavour).val(),{flavour:flavour}).done(function(data){
if(!$('#container').hasClass('is-loaded')) {
$('#container').addClass('is-loaded');
$('#container').html(data);
} else {
$('#container').append(data);
}
});
}
);</script>
When I get the filter page is says the search value is undefined. If I go directly to the page with what should be sent via AJAX (filter/?search=Berry) then I get all of the relevant results
Any errors in the console?
Unfortunately no there’s nothing in the console. I don’t get any errors at all
What is:
$(flavour).val()
Clicking the link with your initial script sends the following request:
http://localhost/filter/?search=undefined&flavour=Berry
I changed your script like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ajax test</title>
</head>
<body>
<a href="#" data-flavour="Berry" class="nav_link Berry">Berry</a>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$('.nav_link').on('click', function(event){
event.preventDefault();
var flavour = $(this).data('flavour');
$.get(
'/filter/?search=' + flavour,
{
flavour: flavour
}
)
.done(function(data){
console.log(data);
});
});
</script>
</body>
</html>
And now when I click the link a request is fired to:
http://localhost/filter/?search=Berry&flavour=Berry
Which I presume is correct.
Thank you, it looks like it should work but where do I add this bit:
{
if(!$('#container').hasClass('is-loaded')) {
$('#container').addClass('is-loaded');
$('#container').html(data);
} else {
$('#container').append(data);
}
}
Every time I try I get a syntax error.
Also the output should actually be http://localhost/filter/?search=Berry was I trying to get http://localhost/filter/?search=Berry&flavour=Berry ? I’m pretty new to this so am still learning as I go
what is the error message?
There’s no error message, Dreamweaver just tells me there’s a syntax error.
I changed it to this and it now works but is there a way I can change the link after I’ve clicked? So instead of being:
<a href="javascript:void(0);" data-flavour="Berry" class="nav_link Berry"><img src="/images/site/filter_off.jpg" height="8" width="8"> Berry</a>
it becomes this:
<a data-flavour="Berry" class="nav_link Berry"><img src="/images/site/filter_on.jpg" height="8" width="8"> Berry</a>
You can manipulate DOM elements in this way, sure, but it probably isn’t the best idea.
Let me summarize what you’re trying to do (to see if I understood everything), then maybe we can find a solution.
You have a link:
<a href="#" data-flavour="Berry" class="nav_link Berry">Berry</a>
When that link is clicked, a get request should be made to a remote PHP script, passing it the data-flavour
attribute of the link, as a “search” query string parameter (?search=Berry
).
Whatever is returned by the PHP script, should then be appended to a div with the id of container
Did I get that right?
Yep that’s exactly right, that part if it is now working but I also want to change the link after somebody clicks it so that it can’t be clicked again and the image (filter_off.jpg) is changed (to filter_on.jpg).
You could use one()
so that the handler is only executed once.
http://api.jquery.com/one/
$('.nav_link').one('click', function(event){
...
});
Given:
<a data-flavour="Berry" class="nav_link Berry"><img src="/images/site/filter_on.jpg" height="8" width="8"> Berry</a>
You could do:
$('.nav_link').one('click', function(event){
var img = $(this).find("img")[0];
img.src = img.src.replace("on", "off")
});
Untested (but you get the idea).
I might be doing something wrong but I’ve now got this:
<script type="text/javascript">
$('.nav_link').on('click', function(){
event.preventDefault();
var flavour = $(this).data('flavour');
$.get('/filter/?search=' + flavour).done(function(data){
if(!$('#container').hasClass('is-loaded')) {
$('#container').addClass('is-loaded');
$('#container').html(data);
} else {
$('#container').append(data);
}
});
}
);
$('.nav_link').one('click', function(event){
var img = $(this).find("img")[0];
img.src = img.src.replace("on", "off")
});
</script>
but I can still click the link multiple times and the image doesn’t change
Try this:
$('.nav_link').one('click', function(){
event.preventDefault();
var img = $(this).find("img")[0],
flavour = $(this).data('flavour');
img.src = img.src.replace("on", "off")
$.get('/filter/?search=' + flavour).done(function(data){
if(!$('#container').hasClass('is-loaded')) {
$('#container').addClass('is-loaded');
$('#container').html(data);
} else {
$('#container').append(data);
}
});
});
Works for me : )
Thank you, that works perfectly!
system
Closed
October 6, 2015, 8:18pm
14
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.