Not sure how to do what I want in the nightlife coordination app

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.

This is kind of hard to answer without posting any of your code but maybe I can offer some non-specific advice: you’ve listed a lot of issues you’re having here. Focus on them one at a time. Once you pick an issue to fix, break it into smaller sub problems. Something like:

  1. When I click a RSVP button I want a sub-window to pop up

    • Solution: have a sub-window render on the page with display: none. When the RSVP button is clicked, an event will fire which sets display:inline etc…
  2. I now have the sub-window displaying, but it contains no “confirm” button.

    • Solution : add the confirm button to the HTML
  3. I now have a sub-window with a confirm button, but no map. Do I have map data? No, i’ll have to fetch it from google maps. This likely means an AJAX call.

    • Solution: Fire an AJAX call to get googlemaps data when user initially clicks the “RSVP” button. Will have to format and display this data later.

Hopefully this kind of helps. I’m not sure what stack you’re using but I assume you are not using React. I really like React because it forces you to compartmentalize your site into small components - but you can still use this strategy even if you’re using Node/Express/Mongo/Pug or whatever. It also takes all of the “mess” of DOM manipulation away which is difficult to manage and annoying.

Another tip I would offer is always start thinking through your problems with a data-first perspective. Data is everything. Always start with the data. All websites do is move data around and display it. So it always helps to identify what data you have, what data you need to get, how you’re going to retrieve it, and how you’re going to display it.

Good luck and have fun!

2 Likes

That is great advice. I just dived into coding the app without thinking about the data much and now I am stuck. I think I might need to take some time to undo the tunnel vision I have got myself into now.