Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Bill Dowd
Bill Dowd
7,681 Points

How do Treehouse anchor tag links work using <a data-filter-value="php">?

I'm building a Web app and attempting to use JQuery and AJAX instead of just PHP. On the Treehouse forum page, there are links all around, but none of them have an href="" property, rather they use a property of data-filter-value="". Would someone in the know, please share with me how that works? Is it a function call that determines which link was pressed and calls that page? This is very important to my project and I would greatly appreciate your detailed help.

Thanks,

Bill

1 Answer

Ethan Lowry
PLUS
Ethan Lowry
Courses Plus Student 7,323 Points
Ethan Lowry
Ethan Lowry
Courses Plus Student 7,323 Points

I would imagine it's a fairly typical Javascript / Ajax operation, something roughly like:

  • When any link with the 'filter-value' data attribute is clicked:
  • Get the value of that attribute i.e. the filter to be used
  • Send that filter value to some (probably PHP in your case) server side code using AJAX
  • Receive and process the response and re-arrange / update the page accordingly
Bill Dowd
Bill Dowd
7,681 Points

Hi Ethan, thanks. I believe I understand the second half of it, but I'm still just a beginner at JQuery and AJAX. I'm used to clicking a hyperlink and the href="" taking you to another page, place or location on the same page. The mystery for me is the missing href="", how is JavaScript controlling or "listening" for that click? Are you able to be specific using code examples?

I have watched the JQuery and AJAX sessions, but because I thought I knew enough about JavaScript from my past Web work, I skipped JavaScript Fundamentals. Well, now I think I'll watch that and re-re-watch JQuery and AJAX.

Thanks, Bill

Ethan Lowry
Ethan Lowry
Courses Plus Student 7,323 Points

That might be a good idea, but to give a brief summary, it might go something like this.

You listen for clicks on the elements of choice using something like:

$('a.some_class').click(function(event) { 
    event.preventDefault();
    alert("Im performing some javascript!");
 });

In this case, any time a link with the 'some_class' class is clicked, the code inside that function will be run. Notice the event parameter that gets passed in, and the preventDefault function that gets called on it - this is important, it prevents the browser from carrying out it's default behaviour, which in this case would be following the link's href, if it has one. This way the javascript can carry out other operations without getting interrupted.

(All this is covered quite nicely if you go through all the javascript / jQuery courses here I believe.)

Bill Dowd
Bill Dowd
7,681 Points

Thanks again Ethan. I will be doing just that.