I'm currently working on implementing a button that, when clicked, triggers a function sending a parameter to my server. Here is what I have so far:
<table class="table table-hover">
<thead>
<tr>
<th>Id</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="interview in $ctrl.pendingInterviews">
<td>{{ interview.id }}</td>
<td><a href="/#!/pending-interviews-list?interviewId={{interview.id}}"><input type="submit" name="Submit" id="submit" ng-click="$ctrl.addParticipant();"></a></td>
</tr>
</tbody>
</table>
In my angular component:
var participant={
username:"mama",
interviewId:$routeParams.interviewId
};
console.log(participant);
console.log(JSON.stringify(participant));
this.addParticipant = function saveParticipant() {
console.log("in partikip")
Interview.addParticipant(JSON.stringify(participant))
.then(
function (errResponse) {
console.error('Error while fetching pending interviews');
}
);
}
And in my angular service:
function addParticipant(participant) {
console.log("Im here too");
console.log(participant + "asdasdsda");
var deferred = $q.defer();
$http.post('http://localhost:8080/interviewsupdateparticipant', participant)
.then(
function (response) {
deferred.resolve(response.data);
},
function (errResponse) {
console.error('Error while adding participant');
console.error(''+ participant.username + participant.interviewId)
deferred.reject(errResponse);
}
);
return deferred.promise;
}
The issue arises when initially loading the page where the controller's participant object has the username set to 'mama' but the interviewId remains undefined. When clicking the submit button, it sends undefined as the interviewId and the hardcoded username. Why does it not automatically retrieve the interviewId?
Upon clicking Submit, the id remains undefined until clicking again. Any insights into what might be causing this problem?