We have multiple pages in sites using angular JS. I added this recaptcha in first page, first page works fine, come back with success response and goes to second page. In the second page, I haven't added this recaptcha at all, but it says validation fails in the second page. When I debug, the form validation is set to false and it mentions the page cannot be saved. The problem is that we can't get into the next page from second page. We use angular JS 1.2.28
I have done server side validation using apex class, it does validate in first page and goes to second page. However, second page gets blocked by missing fields in the form. Here is the code I added in angular JS for first page if that helps. I have a screenshot of the form where it says invalid. I will try to attach that too. I am stuck with this issue for many days now.
<div class="container">
<div class="row">
<div class="col-xs-12 form-group">
<div vc-recaptcha ng-required="true" name="recaptcha" ng-model="applicant.myRecaptchaResponse" key="'xxxxxxx'">
</div>
<div ng-if="form.showAllErrors">
<p class="help-block text-danger" ng-if="form.recaptcha.$invalid">Please check this option.</p>
</div>
</div>
</div>
</div>
Related
I have used angularJS validations like ng-required and ng-minLength and show them if $touched and $invalid true. I have used UI-route to show different page in slides(using ngAnimate) on a single page. When we click the button to move on next slide it show the validation message pop-up of next page as shown in image. It shows the validation message popup on page load. I have used novalidate on form tag and formnovalidate on button but not working at all.
<input type="email" class="form-control" placeholder="Email" ng-model="registration.email"
name="email" ng-required="true" ng-class="{errorField: (personalInfoForm.email.$invalid
&& personalInfoForm.email.$touched) || isEmailError}" ng-blur="validateUserNameAvailability()"
ng-pattern ="emailPattern" />
<div class="errorTooltip" ng-show="isEmailError">{{emailError}}</div>
<div ng-show="personalInfoForm.email.$invalid && personalInfoForm.email.$touched && !isEmailError">
<div ng-show="personalInfoForm.email.$error.required" class="errorTooltip">
{!$Label.Text_You_Must_Enter_A_Value}
</div>
<div ng-show="personalInfoForm.email.$error.email || personalInfoForm.email.$error.pattern" class="errorTooltip">
{!$Label.Text_Please_Enter_Valid_Email}
</div>
</div>
Please post you complete code for the form but from your description of the issue i'm guessing the button type used on the "Next" button to go to the next slide must be
<input type="submit">Next</input>
change it to button.
<input type="button">Next</input>
You must have used a common form tag for all the slides and submit the form at the end of the last slide to save the data. But by using the button type as submit on the Next button the form is getting submitted at the end of each slide. Let me know if my analysis was correct.
I have found fix for this issue. Firefox load angularJS slow therefore it show all validation message on page load and later hide them.
I have added one css line in starting of page that added to ui-view.
<style>.first-page{ display: none; }</style>
I have removed this css in the end of page.
<script>$('.first-page').css('display','block');</script>
I have applied this class 'first-page' on main div of page.
This resolve my issue. Now all pages loaded in ui-view component perfectly.
Note: This also resolve the content override issue on slide animation. Firefox load angular animation slow. I have hide the page till its load completely. This resolve all firefox issues.
I am making a angularjs app and in this I have a list of users coming fromng-repeat. Now whenever I click on any user a new div box opens. But the problem is that there are multiple boxes opening for the same user and I want only one box for one user.
I tried using ng-if but failed.
I am sharing my code, please check it and provide solutions, thanks in advance.
Code from List of user are coming :
<div class="people">
<div ng-repeat="user in vm.otherUsers | filter : vm.search">
<div directive class="person" ng-click="vm.activateChat(user);bubble=true;" id="chat_{{user.id}}" ng-disabled="true">
<img alt="" />
<span class="name" >{{user.firstName}} {{user.lastName}}
<span ng-if="!bubble && user.counter>0" class="noti_bubble">{{user.counter}}</span>
</span>
</div>
</div>
</div>
and on click activateChat opens the new box for that user.
Code for the box is:
<div ng-repeat="chatUser in vm.multipleUsers">
<div class="msg_box" id="d_{{chatUser.id}}">
--box content--
</div>
</div>
Note: Only one box should open for a single user
You could keep a list of opened boxes per userId in your controller. Then add a function to your controller that you can use in an ng-if or ng-class to show a non-clickable version of your div. Use the same list to check if you should open a new modal in vm.activateChat()
I would like to have a div with class "dialog" so when user click on that div anywhere expert links inside it redirects him to one page. And "links" inside that div should redirect user to another page. And return on previous page browser button should return him on correct page. I saw some examples on javascript but they doesn't work for angular and I always get second page when return back.
I have following snippet of code.
<div ng-repeat="dialog in dialogs">
<div class="dialog row well well-sm">
<div class="col-xs-8">
...
<a class="msg-heading" href="#!/item/{{ dialog.adv_id }}">
{{ dialog.adv_name }}
</a>
....
</div>
</div>
</div>
Here is one way you could do it by passing the event object as argument of ng-click function and checking event.target
<div class="dialog row well well-sm" ng-click="doRedirect($event)">
Then in controller or directive:
$scope.doRedirect = function(event){
if(!angular.element(event.target).hasClass('msg-heading') ){
/* not the <a> tag so put your redirect code here */
}
}
I have applied with reCAPTCHA as follows: angularJS
<div class="captcha-box">
<div class="g-recaptcha" data-sitekey="<site-key>" g-recaptcha-response="gRecaptchaResponse" control="captchaControl"></div>
</div>
<div class="result"></div>
But I am confused what to do in the certified value reCAPTCHA To give handled through a directive.
How can that will send the results of the field in the result reCAPTCHA?
I have 2 CakePHP pages. Both of them use angularjs. Here's a snippet.
/items/items.ctp
<div id="ng-app" ng-app>`
<div ng-controller="ItemController">
Add
</div>
</div>
the function showAddPopup is defined as follows
$scope.showAddPopup = function() {
$.colorbox({href:'/items/add/' + $scope.order.id,open:true,close : "x", onClosed:function(){}});
}
/items/add.ctp
<div id="ng-app" ng-app>`
<div ng-controller="AddController">
<h2>{{order.label}}<h2>
</div>
</div>
Now, when I click on the add link from items view, I get a popup with the contents of add.ctp. But the problem is that instead of showing order label say 'My Order', the h2 tag is showing {{order.label}}
When I open add view from a page that doesn't use angularjs I get a proper result. What am I doing wrong. Please help. I have already wasted many days on this.
Maybe opening the colorbox with setting iframe could be the solution, if the problem is nested ng-apps.
$.colorbox({inline:false; iframe:true;href:'/items/add/'...});
If you are using bootstrap then angular-ui would be a great choice for above scenario