Whenever I click on a button within a form, the comment should appear alongside the email and a small avatar. However, I'm facing an issue where I have to click the button twice for it to work as expected. This problem is rooted in some complications with the options request. To mitigate this, I'm utilizing a CORS plugin to run the application since the JSON file resides on a different domain. At present, the request's type is POST, yet it necessitates two clicks to function properly.
Below is the snippet of code from the controller. The corresponding view houses an input type=submit element with ng-click embedded within.
$scope.envoyer_comment = function() {
$scope.c = $scope.commentaire;
$scope.e = $scope.email;
var comment = {
article_id: $scope.article.Article.id,
titre: $scope.article.Article.titre,
content: $scope.article.Article.content,
commentaire: $scope.commentaire,
email: $scope.email
}
if ($scope.flag == 0) {
$.ajax({
type: "POST",
url: "https://www.yabiladi.com/newsapi/post.json",
data: comment,
datatype: "json",
success: function(res) {
$scope.d = 0;
},
error: function() {
console.log("Erreur");
}
})
}The segment in the view that employs the aforementioned function:
<div ng-if="flag==0">
<label for="field2"><span style="margin-left:18px;">Commentaire:</span><textarea ng-trim="false" ng-model="$parent.commentaire" class="textarea-field outer" ng-maxlength="3000" required>Hello</textarea></label>
<span style="margin-right:130px;">{{3000 - text.length}} caractères restants</span>
<br/>
<label for="field3"><span style="margin-left:18px;">email:</span><input type="text" class="input-field outer" ng-model="$parent.email" style="width:50%" required></label>
<br/>
<label><input type="checkbox" class="input-checkbox" name="checkbox1" style="margin-left:18px;">
Je souhaite recevoir un email à chaque commentaire<br/>      sur cet article
</label>
<br/>
<label><span> </span><input type="submit" data-ng-click="envoyer_comment()" value="Envoyer" style="margin-left:-20%" ng-disabled="commentaire_article.$invalid"/></label>
<br/>
<br/>
<br/>
<div ng-hide="d">
<ion-item style="border:0px;font-size:10px;margin-left:-50px;margin-top:-30px" class="item-text-wrap">
<div class="form-style-2-heading" style="background-color: #fbf8f7;color:black;height:47px;margin-bottom:6px;margin-top:6px">
<div style="margin-left:-240px;padding-top:5px"><img ng-src="img/sans titre.png" height="41" width="35" style="margin-left:-85px;margin-bottom:12px" style="border:0px">
<div style="margin-left:45px;margin-top:-50px">{{e}}</div><br/>
<div style="margin-left:90px;margin-top:-10px"> Date:{{timeNow|date:"d/m/y à HH:mm":"UTC"}}</div>
</div>
</div>
<div style="padding-right: 50px;margin-bottom:30px" align="left">{{c}}</div>
</ion-item>
</div>
<ion-list ng-repeat="article2 in article1.comments">
<ion-item style="border:0px;font-size:10px;margin-left:-50px;margin-top:-30px" class="item-text-wrap">
<div class="form-style-2-heading" style="background-color: #fbf8f7;color:black;height:47px;margin-bottom:6px;margin-top:6px">
<div style="margin-left:-240px;padding-top:5px"><img ng-src="{{article2.avatar}}" height="41" width="35" style="margin-left:-85px;margin-bottom:12px" style="border:0px">
<div style="margin-left:45px;margin-top:-50px">{{article2.PhorumMessage.author}}</div><br/>
<div style="margin-left:90px;margin-top:-10px"> Date:{{article2.PhorumMessage.datestamp * 1000|date:"d/m/y à HH:mm":"UTC+0100"}}</div>
</div>
</div>
<div style="padding-right: 50px;margin-bottom:30px" align="left">{{article2.PhorumMessage.body}}</div>
</ion-item>
</ion-list>
</div>The variable flag is responsible for language selection while d indicates the display status of new comments.
Screenshot captured from dev tools: ss dev tools