I have a search bar that makes an API call to Yelp that sends back a list of clubs/bars in the area. My code then sends the data to a pug template and renders the next page. It then displays a page with a list of results with an “RSVP” button at the bottom of each result corresponding to the bar/restaurant you’re going to attend.
Now here is where I’m stuck. When you click a ‘RSVP’ button, I want a sub-window to pop up in front of the list of results. This sub-window would have a map (probably from the google maps api), the address, and a “confirm” button that when you press will officially indicate that you’re attending the club. You can then exit out of that sub-window and continue looking at the results.
I’ve been trying to send data to the pug template by basically making the sub-window a div with display:none, with each RSVP button having an onclick attribute that triggers a displayWindow function that changes display to inline and accepts two parameters from the pug template: the index of the current loop cycle, and the id of the current loop item.
Anyway, I’ve found that sending data this way seems really finnicky and unpredictable. It ends up sending me an HTML DOM object instead of the string id that I want. And I feel like I’m doing something really unorthodox and stupid.
Is there a common way to do what I want to do? My biggest issue is I don’t know how to work with the data from the yelp search after the result page is rendered in pug.