Refresh Div without Refreshing Page

I'm using Laravel (Which is only relevant because I need to refresh the content section), and I basically need to refresh the content section of the page without refreshing the page.

I've tried deleting the div with jQuery and then re-rendering the view, however it still isn't working.

The main problem is I have jQuery scripts which are wrapped in an If/Then/Else with Blade Formatting, but I need it to change without reloading the entire page (It's meant for a mobile setting, and re-rendering the page is easier on the network then reloading it entirely, it also looks better.

Here's the relevant code:

  @if(Auth::check())
@if(Auth::user()->isRider() || Auth::user()->isDriver())
  <script>
    var watchid;
    var csrf_token = $('meta[name="csrf-token"]').attr('content');
    //User is already a rider/driver
    if (navigator.geolocation) {
        watchid = navigator.geolocation.watchPosition(setPos, fail, {
          enableHighAccuracy: true,
          maximumAge: 3600000,
          timeout: 20000
        });
    } else {
        alert("Geolocation is not supported by this browser.");
    }


    function setPos(pos) {
      var coords = [pos.coords.latitude, pos.coords.longitude];
      sendData('/updatePosition',
      {'latitude': coords[0], 'longitude': coords[1], '_token': csrf_token},
      function(msg) {
        //Success function
      },
      function(msg) {
        //Error function
      });
      $('#map').removeMarker('userLoc');
      $('#map').addMarker({
        coords: [coords[0], coords[1]], // GPS coords
        id: 'userLoc',
      })
      @if(Auth::user()->isDriver())
        var geocoder  = new google.maps.Geocoder();
        var address;
        var latlng = {lat: coords[0], lng: coords[1]};
        geocoder.geocode({'location': latlng}, function (results, status) {
          if(status == 'OK') {
            address = results[1].formatted_address;        // if address found, pass to processing function
            $('#map').addWay({
              start: address,
              end: [29.0644224,-110.9673875],
              route: 'way',
            });
          }
        });
      @endif
    }

    function fail() {
      console.log('Location failed.')
    }
  </script>
@else
  <script>
    var watchid;
    var csrf_token = $('meta[name="csrf-token"]').attr('content');

    $(document).on('click touchstart', '#getRide', function() {
      @if(Auth::user()->numDrivers() > 0)
        if (navigator.geolocation) {
          watchid=navigator.geolocation.watchPosition(setPos, fail, {
              enableHighAccuracy: true,
              maximumAge: 3600000,
              timeout: 20000
            });
        } else {
            alert("Geolocation is not supported by this browser.");
        }


        function setPos(pos) {
          var coords = [pos.coords.latitude, pos.coords.longitude];
          sendData('/getRide',
          {'latitude': pos.coords.latitude, 'longitude': pos.coords.longitude, '_token': csrf_token},
          function(msg) {
            $('#deleteThis').remove();
            $('#rideButtons').hide();
            $('#mainDiv').prepend(msg);
          },
          function(msg) {
            //Error function
            navigator.geolocation.clearWatch(watchid);
          });
          //Start updating the riders position
          sendData('/updatePosition',
          {'_token': csrf_token, 'latitude': coords[0], 'longitude': coords[1]},
          function(msg) {
            //Success
          },
          function(msg) {
            //Error
          });
        }

        function fail() {
          console.log('Location failed.')
        }
      @else
        toastr.error('No drivers available.', 'Request Failed');
      @endif
    });

    $(document).on('click touchstart', '#giveRide', function() {
      var watchid;

      if (navigator.geolocation) {
        watchid=navigator.geolocation.watchPosition(setPos, fail, {
            enableHighAccuracy: true,
            maximumAge: 3600000,
            timeout: 20000
          });
          $('#map').googleMap();
      } else {
          alert("Geolocation is not supported by this browser.");
      }


      function setPos(pos) {
        var markerPositions = "";
        var coords = [pos.coords.latitude, pos.coords.longitude];
        @if(!Auth::user()->isDriver())
          sendData('/addDriver',
          {'latitude': pos.coords.latitude, 'longitude': pos.coords.longitude, '_token': csrf_token},
          function(msg) {
            $('#deleteThis').remove();
            $('#rideButtons').hide();
            $('#mainDiv').prepend(msg);
          },
          function(msg) {
            //Error function
            toastr.error('Error! '+msg);
            navigator.geolocation.clearWatch(watchid);
          });
        @endif
        //Start updating the drivers position
        sendData('/updatePosition',
        {'_token': csrf_token, 'latitude': coords[0], 'longitude': coords[1]},
        function(msg) {
          //Success
        },
        function(msg) {
          //Error
        });
        var geocoder  = new google.maps.Geocoder();
        var address;
        geocoder.geocode({'latLng': [parseFloat(""), parseFloat("")]}, function (results, status) {
          if(status == google.maps.GeocoderStatus.OK) {           // if geocode success
            address = results[0].formatted_address;         // if address found, pass to processing function
          }
        });
        if(markerPositions.length) {
          $('#map').addWay({
            start: address,
            end: [29.0644224,-110.9673875],
            route: 'way',
            step: [markerPositions],
          });
        } else {
          $('#map').addWay({
            start: address,
            end: [29.0644224,-110.9673875],
            route: 'way',
          });
        }
        $('#deleteThis').remove();

      }

      function fail() {
        console.log('Location failed.')
      }
    });
  </script>
@endif
@else
<script>
  var watchid;

  if (navigator.geolocation) {
      watchid = navigator.geolocation.watchPosition(setPos, fail, {
        enableHighAccuracy: true,
        maximumAge: 3600000,
        timeout: 20000
      });
  } else {
      alert("Geolocation is not supported by this browser.");
  }


  function setPos(pos) {
    var coords = [pos.coords.latitude, pos.coords.longitude];
    /*$("#map").googleMap({
      zoom: 12, // Initial zoom level (optional)
      coords: [coords[0], coords[1]], // Map center (optional)
      type: "ROADMAP" // Map type (optional)
    });*/
    $('#map').removeMarker('userLoc');
    $('#map').addMarker({
      coords: [coords[0], coords[1]], // GPS coords
      id: 'userLoc',
    })
  }

  function fail() {
    console.log('Location failed.')
  }
</script>
@endif

It's sort of an uber-like-clone but I need it to refresh the jQuery when I refresh it so I get the different scripts.

Is there another way to refresh the content section of the page without reloading? Or what can I do?

• Zach

via Chebli Mohamed