Change route and update view on ajax request to node server
<p>I recently decided I'd like to use a Node server as a sort of proxy to make api calls to third-party public apis from my front end. I've successfully made the request to my Node endpoint and, then, to the third-party api and have received the response I was expecting, but now I can't for the life of me figure out why the url isn't changing and the views isn't being updated in the window.</p>

<p>Here's my button in <code>index.html</code> that starts the whole dealio:</p>

<pre><code>&lt;a id="coords" type="button" class="btn btn-lg btn-default" href="#"&gt;
Send coords to backend&lt;/a&gt;
</code></pre>

<p>Here's the click handler for the button:</p>

<pre><code>$(function() {
var latitude;
var longitude;
$('#coords').on('click', function(event) {
  event.preventDefault();
  if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(function(position) {
      latitude = position.coords.latitude;
      longitude = position.coords.longitude;

      $.ajax({
        url: "/venues",
        data: {
          latitude: latitude,
          longitude: longitude
        },
        success: function(data) {
        }
      });
    })
   }
 });
});
</code></pre>

<p>Here's my route definition:</p>

<pre><code>app.get('/venues', function(request, response) {
  var latitude = request.query.latitude;
  var longitude = request.query.longitude;

  foursquare.getNearbyVenues(latitude, longitude, returnData);

  function returnData(data) {
    response.render('venues', data);
  }
});
</code></pre>

<p>I have already verified that the data being passed into <code>returnData</code> is in fact the object I requested from the third-party api. </p>

<p>However, the page and url stay as they were before click and the HTML for <strong>the desired page (venues)</strong> is displayed as the response to the ajax call to <code>/venues</code> in the inspector.</p>

<p>What am I missing here?</p>