jQuery on click not working with express to load a handlebars page

Question

jQuery on click function not working to work with express to route to a handlebars page to display passed information.

I've tried changing the get to post. Not using handlebars and just having in html file and using path.sendFile or chaning res.render to be res.send

Heres the on click function

$("#song").on("click", function(){
  var songArtist = $(this).text();

  $.get("/results/:" + songArtist);
});

Heres the express route

app.get("/results/:songArtist", function(req, res) {
    res.render("songResult");
    //res.sendFile(path.join(__dirname + "./../views/result.html"));
  });

I expect that when the divs with the song id is clicked to load to a new page.

score 0 · Answer 1 · answered Jul 13 '19 at 18:30

0

Get rid of the : in the $.get() in the front-end JS. The : is only used on the back-end to represent variable URL parameters.

So on the back-end, when you listen for get requests at "/results/:songArtist", whatever comes after "/results/" will now be referred to in the function as req.params.songArtist.

For example, if I send a get request to "/results/pinkfloyd", inside the listener function you provided above, req.params.songArtist === pinkfloyd.

answered Jul 13 '19 at 18:30

boc4life

941
5
10

Thanks! Removed the : but the routing still isn't working. – RoboWest Jul 13 '19 at 18:52
Try to focus in on where the issue is. Put console logs inside your listeners. What part of the action isn't working? – boc4life Jul 14 '19 at 03:25
The $.get("/results" + songArtist) is the part that isn't working. I've added a console log in there and it does log but the routing doesn't work. If I manually go to that route when I open a port for the site everything works fine. – RoboWest Jul 14 '19 at 14:18
I'm not sure if you're still working on this. But the problem appears to be that the jQuery get() method is used to retrieve data, and cannot be used to direct the browser. There are a few methods you can use to solve this. If you can create the song buttons with tags around them, that is probably the simplest solution. There are JavaScript methods for this task too, and I'd direct you to the link below to read about them. https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage – boc4life Jul 16 '19 at 14:10

jQuery on click not working with express to load a handlebars page

1 Answers1