0
私は、フォーム提出に従ってマップにマーカーを追加するウェブサイトを持っています。フォームを送信した後、ユーザーがページを更新するまでマーカーは表示されません。したがって、私は提出を打つと、ページが自動的に更新されるようにしようとしています。このように多くの質問がありますが、すべてがPHPを含んでおり、私は自分のコードにそれらをどのように適用するのか分かりません。ここで私は、現在持っているものです。フォームを送信した後にページを更新する
(1)フォームのjsファイルを提出
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)マイフォームの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>
:ここ
は、コントローラは次のように見てしまった何ですか? Ajaxのポイントは、新しいページの読み込みを避けることです。 – Quentin
window.location = window.location.href – MasNotsram
@QuentinはGoogleマップを簡単に読み込む方法を提案できますか? – user2990