Обновить Div без обновления страницы

Я использую Laravel (который актуален только потому, что мне нужно обновить раздел содержимого), и мне в основном нужно обновить раздел содержимого страницы без обновления страницы.

Я попытался удалить div с помощью jQuery, а затем повторно отобразить представление, однако он все еще не работает.

Основная проблема заключается в том, что у меня есть скрипты jQuery, которые завернуты в форматирование Блейда If/Then/Else, но мне нужно изменить его без перезагрузки всей страницы (это предназначено для настройки мобильного телефона, и рендеринг страницы легче в сети, а затем перезагрузить его полностью, он также выглядит лучше.

Вот соответствующий код:

  @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 = "{{Auth::user()->getRiderLocs()}}";
        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("{{Auth::user()->getLoc()[0]}}"), parseFloat("{{Auth::user()->getLoc()[1]}}")]}, 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

Это своего рода uber-как-клон, но мне нужно, чтобы обновить jQuery, когда я обновляю его, поэтому я получаю различные сценарии.

Есть ли другой способ обновить раздел содержимого страницы без перезагрузки? Или что я могу сделать?

Может быть, просто воссоздать вид то же самое?

  • Зак

1 ответ

  1. Поместите скрипт jquery в Head и после добавления этого скрипта в head вызовите эту функцию js.

    <script type="text/javascript">
    function LoadMyJs(scriptName) {
    var docHeadObj = document.getElementsByTagName("head")[0];
    var dynamicScript = document.createElement("script");
    dynamicScript.type = "text/javascript";
    dynamicScript.src = scriptName;
    docHeadObj.appendChild(newScript);
    }
    </script>