Can't send data using AJAX

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">&nbsp;&nbsp;Berry</a>

it becomes this:

<a data-flavour="Berry" class="nav_link Berry"><img src="/images/site/filter_on.jpg" height="8" width="8">&nbsp;&nbsp;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">&nbsp;&nbsp;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! :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.