2017-04-18 3 views
0

J'ai un site Web qui ajoute des marqueurs à une carte en fonction de la soumission d'un formulaire. Après l'envoi du formulaire, le marqueur n'apparaît que lorsque l'utilisateur actualise la page. Par conséquent, j'essaie de faire en sorte que, en appuyant sur Envoyer, la page soit automatiquement actualisée. Il y a beaucoup de questions comme celle-ci mais toutes incluent php et je ne sais pas comment les appliquer à mon code. Voici ce que j'ai actuellement:Actualiser la page après l'envoi du formulaire

(1) lors de la présentation du dossier de forme

function mainController($scope, $http) { 
 
    $scope.formData = {}; 
 

 
    $http.get('/api/events') 
 
    .success(function(data) { 
 
     $scope.events = data; 
 
     initMap(data); 
 
     for(i = 0; i < data.length; i++){ 
 
     console.log(data[i].eventLocation); 
 
     } 
 
    }) 
 
    .error(function(data) { 
 
     console.log('Error: ' + data); 
 
    }); 
 

 
    // when submitting the add form, send the text to the node API 
 
    $scope.createEvent = function() { 
 
    $http.post('/api/events', $scope.formData) 
 
     .success(function(data) { 
 
     $scope.formData = {}; // clear the form so our user is ready to enter another 
 
     $scope.events = data; 
 
     console.log(data); 
 
     }) 
 
     .error(function(data) { 
 
     console.log('Error: ' + data); 
 
     }); 
 
    }; 
 

 
    $scope.validateForm = function() { 
 
    if (!$scope.formData.eventName) { 
 
     alert("Please give your event a name!"); 
 
     return false; 
 
    } 
 
    else if (!$scope.formData.eventType) { 
 
     alert("Please choose an event type!"); 
 
     return false; 
 
    } 
 
    else if (!$scope.formData.eventLocation) { 
 
     alert("Please choose a location!"); 
 
     return false; 
 
    } 
 
    else if (!$scope.formData.eventDetails) { 
 
     alert("Please include some details about your event!"); 
 
     return false; 
 
    } 
 
    return true; 
 
    } 
 
}

(2) Ma forme fichier html

<!-- Event form --> 
 
      <div class="col-lg-6"> 
 
       <!-- Validate form --> 
 
       <form name="myForm" ng-submit="validateForm()"> 
 
       <div class="form-group"> 
 
        <label>Event Name</label> 
 
        <input type="text" name="inputName" class="form-control" ng-model="formData.eventName" placeholder="Event name"> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label>Type</label> 
 
        <select class="form-control" id="inputType" ng-model="formData.eventType"> 
 
        <option>Option 1</option> 
 
        <option>Option 2</option> 
 
        <option>Option 3</option> 
 
        </select> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label>Location</label> 
 
        <select class="form-control" id="inputLocation" ng-model="formData.eventLocation"> 
 
        <option>Location 1</option> 
 
        <option>Location 2</option> 
 
        <option>Location 3</option> 
 
        </select> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label>Event Details</label> 
 
        <textarea class="form-control" name="inputDetails" ng-model="formData.eventDetails" rows="2" placeholder="Add details about your event"></textarea> 
 
       </div> 
 
       <div class="text-center"> 
 
        <button id="add-event"type="submit" class="btn btn-primary" ng-click="createEvent()">Submit</button> 
 
       </div> 
 
       </form>

+1

Pourquoi utilisez-vous Ajax au lieu d'une soumission de forme régulière? Le but d'Ajax est d'éviter de charger une nouvelle page. – Quentin

+0

window.location = window.location.href – MasNotsram

+0

@Quentin pourriez-vous donner une suggestion sur la façon de simplement recharger la carte google? – user2990

Répondre

0

La réponse de @MasNotsram était correcte. Dans le contrôleur de mon fichier HTML j'ai ajouté l'emplacement de la fenêtre de ligne, j'ai ajouté la ligne suivante après la fonction qui a géré les repères de publication sur une carte.

location.href = "http://__DESIRED_WEB_PAGE_REFRESH__";

Voici ce que le contrôleur a fini par ressembler à:

function mainController($scope, $http) { 
 
    $scope.formData = {}; 
 

 
    $http.get('/api/events') 
 
    .success(function(data) { 
 
     $scope.events = data; 
 
     initMap(data); 
 
     for(i = 0; i < data.length; i++){ 
 
     console.log(data[i].eventLocation); 
 
     //placeMarker(data[i]); 
 
     //test(data); 
 
     } 
 
     //placeMarker(data); 
 
    }) 
 
    .error(function(data) { 
 
     console.log('Error: ' + data); 
 
    }); 
 

 
    // when submitting the add form, send the text to the node API 
 
    $scope.createEvent = function() { 
 
    $http.post('/api/events', $scope.formData) 
 
     .success(function(data) { 
 
     $scope.formData = {}; // clear the form so our user is ready to enter another 
 
     $scope.events = data; 
 
     console.log(data); 
 
     }) 
 
     .error(function(data) { 
 
     console.log('Error: ' + data); 
 

 
     }); 
 
     // SOLUTION LINE 
 
     location.href = "http://__DESIRED_WEB_PAGE_REFRESH__"; 
 
    }; 
 

 
    $scope.validateForm = function() { 
 
    if (!$scope.formData.eventName) { 
 
     alert("Please give your event a name!"); 
 
     return false; 
 
    } 
 
    else if (!$scope.formData.eventType) { 
 
     alert("Please choose an event type!"); 
 
     return false; 
 
    } 
 
    else if (!$scope.formData.eventLocation) { 
 
     alert("Please choose a location!"); 
 
     return false; 
 
    } 
 
    else if (!$scope.formData.eventDetails) { 
 
     alert("Please include some details about your event!"); 
 
     return false; 
 
    } 
 
    return true; 
 
    } 
 
}