Parsley Validation - parsley.js

I'm using parlsey validation and all is good. The problem is that if you partially load the website or load the website and click on "send" before everything is loaded, then parsley validation does not work.
Its not working because it hasn't been loaded. However, the validation script for parsley is in the header of the document? Is there a way to load a script before the website is loaded at all?

No that's not possible. If you place the JavaScript src in the head of the HTML document that's moste likely the only thing you can do. But that's not a good idea at all. JavaScript has to be placed before the closing body tag - at least until all Browsers and Servers are using SPDY.
The problem you are facing is caused by the way parsley works. While loading the page it will "scan" the HTML markup and search for parsley validation informations and apply bindings to them. It seems that this is not fully done.
What you can do is trying to avoid hitting a submit or what you use for submitting a form before the domready event is available. You could eg. set a submitt button for the form to disabled ...

Related

how to debug form rendering issues when using angular-schema-form

i am using angular-schema-form to render some forms dynamically. the forms are rendering mostly as expected, but when i use tabs, only the tab names are getting rendered, but not the content of the tabs. i have tested the json schema and the form on the schemaform.io test page (http://schemaform.io/examples/bootstrap-example.html) where it renders correctly, but the same doesn't render the tab content in my application.
Note 1: it is worthwhile to note that i am using angular-schema-form within a larger application that is based on spring-boot + angularjs (the application itself is generated using JHipster (https://jhipster.github.io)
any pointers on where i need to start looking for debugging this issue? i looked at the google chrome developer tools but did not find anything useful to help debug.
Note 2: i am not using any custom decorators or validators. both the schema and form are generated from a YAML template which is more 'user friendly'

How to display my AngularJS correctly for GoogleBot and Optimizely?

I've a website called VoteCircle (www.votecircle.com), but i noted that it doesn't display well for Google Bot/Optimizely (used for A/B tests). It shows only the content that AREN'T in ng-view. All content in ng-view isn't displayed.
it was made in AngularJS and the content in ng-view isn't displayed for those bots/previews that i mentioned.
What's the best way to fix that?
Please, see attached screenshot.
Thanks.
There is a pretty easy fix for this. In your URL bar, click on the small key and enable mixed content. The browser blocks loading mixed content in the editor by default (HTTPS and HTTP resources combined). By enabling it you can load the rest of the page in the editor.

Angular and Google tag manager (GTM) gtm.click

I am running into a problem, and I cannot seem to find a fix for it. The situation is as follows the marketing department wants to integrate GTM. Which is fine as they want to have full control over the different third party providers they wish to integrate. But for this to happen they would like to have the ability to track all clicks on a page.
And they came back to me that currently no click events are being tracked with the current configuration within GTM. At first the thought was that events were not propagating (bubbling) upwards. But having tested this myself by binding a event listener to the document (click) (see below) all div, buttons etc. with an ng-click directives did reach this handler without problems.
document.addEventListener("click", function(event){
console.dir(event.target);
});
So my assumption was that there was something wrong with the configuration but after looking at the configuration (one I created myself which looks as follows):
I still could not get it to work. Buttons that already use angulartics - https://luisfarzati.github.io/angulartics/ to send an event to the GTM container work as expected:
Download
Only the catch all click events (or any filter on it like purely looking at button clicks) does not. Now after looking at it a little more it seems GTM expects the gtm.click _event to happen. But I can't figure out (gazing through the gtm.js file) how they bind to all click events within the document (there is a click binding on the document after initialization but I am unsure if this is GTM or something from angular). And even if so I have placed many breakpoints within this file which seemingly could be related to it but none of them triggered when something was clicked.
So my question is, has anybody got experience combining angularjs with angulartics and GTM while having it catch all click/touch/mousedown etc. events and send these to GTM?
Make sure that you pusblished GTM container after you made some changes. Use "Publish Now" or "Preview and Debug" buttons inside of GTM interface(top-right corner).
Because according to your tag config this tag should fire every time when user clicks something on the website.
Regarding to "gtm.click" - this GTM-event will fire every time, when user clicks something on the website.
On the screenshot you may see, how it looks like in GTM debug mode("Preview and Debug") when user clicking on somethig at web-page, when GTM click listener turned on(like in your tag).
May be some relevant articles from my website about tracking of buttons/links on GTM will help you too:
http://konygin.net/gtm/tracking-links-en/
http://konygin.net/gtm/tracking-buttons-en/
My problem turned out to be that the person (from marketing) who gave me the html GTM tags (noscript / script) did not copy it properly (or something went wrong when it was pasted within JIRA). And after I copied it directly (having gotten access to the GTM admin panel) it worked as I would expect it to work.
Seeing as I debugged it by trying to only have one index.html with purely a button in it. Even at that point the tracker did not work and I became suspicious why that was happening as there was no angular code any more that could cause the problems.
Lesson learned, next time copy code yourself when you need it to make sure it does not get corrupted along the way :/

AngularJS: Auto reload

What is the most conventional way to make an AngularJS single page app automatically reload in the browser every time I change its code?
In other words, if I have a code editor open editing the HTML for the AnguarJS single page app, and a browser at that app, side-by-side on the same screen, hitting Save in my editor should instantly trigger the browser to refresh.
Alternatively, same scenario as above except instead of hitting Save on my editor, I did a Commit in my VCS.
Use Grunjs watch task for this.
That is the work of your task runner like gulp or grunt to watch the changes over specified files and perform action. None of this is related to angularjs

mailto: links gobbled in a route

I'm using the jquery linkify plugin on a relatively simple Backbone view. Links to web pages outside this app work properly and using browser view source, I see the mailto links are properly generated. But clicking a mailto link appends /mailto:q#example.com to the current URL (e.g., http://example-acme.staging.myservername.com/mailto:q#example.com).
If I copy the generated HTML using Inspector and paste it into the source of arbitrary pages (not in this app), the mailto links function as expected, opening a new message window from my mail client. Problem is the same in Chrome and Firefox.
Have you seen and fixed this issue?
Just for closure: I added an event handler in the handler use window.location.assign(mailto) and that gets the job done. Not necessarily 'correct' but practical. #Brad, thanks for chiming in!

Resources