The next thing we're going to do is customize that Send Location button using a bit more jQuery. Now we're new to jQuery and this isn't really a jQuery course. The goal here is to change the button text and disable it while the process is occurring. When the process is complete, meaning that the location was either sent or not sent, we can return the button to its normal state, but while the geolocation call is happening we don't want someone spamming away.

To get that done we're going to make some tweaks to the final on listener we have inside of index.js, just next our on submit listener we have our on click listener. Here we're going to need to make some changes to the button, the locationButton variable we have defined. We're going to set an attribute that's going to disable the button.

To get that done we will reference the selector, locationButton, and we're going to call a jQuery method.

Now we're only going to disable it after we've confirmed they even have support for it, if they don't have support for the feature there's no reason to go ahead and disable it. Here locationButton.attr is going to let us set an attribute, we're going to set the disabled attribute equal to the value disabled. Now this disabled needs to be in quotes as well:

var locationButton = jQuery('#send-location');
locationButton.on('click', function () {
  if (!navigator.geolocation) {
    return alert('Geolocation not supported by your browser.');
  }
 
  locationButton.attr('disabled', 'disabled');

Now that we have disabled the button we can actually test this out, we never undisable it so it's going to be broken after clicking it once, but we can confirm that this line works. Over in the browser I'm going to give things a refresh, click Send Location and you can see right away that the button it does get disabled:

Now it is going to send off the location once but if I try to click it again the button is disabled and it's never going to refire the click event. The goal here is to only disable it while the process is actually occurring, once it's sent like it is here we want to re-enable it so someone can send an updated location.

To get that done over inside of Atom we're going to add a line of jQuery into both the success handler and the error handler. If things go well we're going to reference locationButton and we're going to remove the disabled attribute by using removeAttr. This takes just one argument, the name of the attribute, in this case we have that, it's a string, disabled:

locationButton.attr('disabled', 'disabled');

navigator.geolocation.getCurrentPosition(function (position) {
  locationButton.removeAttr('disabled');
  socket.emit('createLocationMessage', {
    latitude: position.coords.latitude,
    longitude: position.coords.longitude
  });

This is going to remove the disabled attribute we defined previously re-enabling the button. And we can do the exact same thing, literally copying and pasting the line next inside function. If for some reason we're not able to fetch the location, maybe the user denied the request for geolocation, we still want to disable that button so they can try again:

navigator.geolocation.getCurrentPosition(function (position){ 
  locationButton.removeAttr('disabled'); 
  socket.emit('createLocationMessage', { 
    latitude: position.coords.latitude, 
    longitude: position.coords.longitude 
  }); 
}, function(){ 
   locationButton.removeAttr('disabled');
   alert('Unable to fetch location'); 
}); 

Now that we have this set up we can test out that code by refreshing the browser and trying to send off our location. We should see the button is disabled for a little bit and then it gets re-enabled. We can click it to prove that it is working as expected, and the button was re-enabled, which means we can go ahead and click it at a later time sending our location once again.