Rafraîchir Div sans actualiser la page

Question

J'utilise Laravel (ce qui n'est pertinent que parce que j'ai besoin d'actualiser la section de contenu), et j'ai besoin fondamentalement d'actualiser la section de contenu de la page sans actualiser la page.

J'ai essayé de supprimer la div avec jQuery, puis de rendre à nouveau la vue, mais cela ne fonctionne toujours pas. Le problème principal est que j'ai des scripts jQuery qui sont enveloppés dans un format If/Then/Else avec Blade, mais j'ai besoin de le changer sans recharger la page entière (il est destiné à un paramètre mobile, et re-rendre le la page est plus facile sur le réseau puis la recharger entièrement, il semble également mieux

Voici le code correspondant.

@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 

il est en quelque sorte d'un uber-like-clone mais je besoin de rafraîchir la jQuery quand Je le rafraîchis pour obtenir les différents scripts.Existe-t-il un autre moyen d'actualiser la section de contenu de la page sans recharger? Ou que puis-je faire?

Peut-être que recréer la vue est la même chose?

• Zach

Answer 1

script Put par jquery dans la tête et après avoir ajouté ce script dans la tête appeler cette fonction de 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>