Nightlife coordination app:how to not refresh page after clicking the "going" button?

1

Hi all

I have a working version of the app (that can be found here ), implemented with express, plain jquery and bootstrap.
when the user hits the “going” button, a post request is sent the server which updates necessary data and then re-render the page. This is not very practical as the user generally needs to scroll down again to see that the “going” count has been updated.

my question is how to update the “going” count without refreshing the page.
n.b: I did not use react.

Thanks in advance

2

You could use jQuery to make the request asynchronously.

3

Thanks. It is still vague for me. You mean I use jQuery to submit? but then what shall I do for the server response ? (for now I do a res.render())

any further explanation is welcome.

4

Ah, I see.

What I meant is doing something like this:

// function that gets executed onsubmit
onSubmit(e){
  e.preventDefault(); // don't post or get anything

  // Not sure what the actual syntax is, but the idea is to send the user id and bar the user 
  // wants to go to. The server than processes that request and returns if it succeeded.
  $.post("http://server.com/api/going", {user_id: ..., goingTo: bar.id}, function(){
   if(data.success){
     // server correctly processed the going event
     // update UI, indicating that you are set to "going"
   }
  });
}
5

Thank you, this makes sense. I replaced res.render() by res.send() and handled the sent json in the ajax callback. This must wok(I tested in another application).
For this application, I still need to make other adjustments to post urls and routes to have everything done in the same page.

Best,