Angular page demo - javascript

I have an angular page that I want to use a plugin like intro.js to demo the different features of the page. However, the issue is that not the entire page is displayed on load. The user is presented with an input box at first that they have to fill out with an id and hit submit. Once they hit submit, the page makes an $http post call and then displays the rest of the page with the data and the other features.
So in this situation, what is the best way to demo this page when only a part of it is display at the beginning? I had 2 ideas
Use a static image of the full page and do a demo on the image
Have a demo button that presents the first part of the page and then when the user submits the id, provide a separate button that demos the rest of the page features
Are those the only 2 ways to do it? Is there any other way?

there are 2 ways
once initial demo is complete, add a hint button (it is feature in intro.js) and restart demo once user click hint
use programmatic way to add steps. first display 2 steps, let user submit the form and on load of controller. restart introjs again

Related

Multiple Forms on One Page, How to Handle Back Button Behavior?

So I have 3 forms all on one page, and I have buttons on all those forms to go show or hide previous/next forms. However the back button just takes you to the previous page entirely. Is there a way to have the back button to check if there is a previously completed form and go to that form?
Sorry for the open ended question but I'm at a loss.
Using a database to save your previous walk, will be better trying to,manipulate hiding button using styles and JavaScript will get you in cache mess someday ,,
Please paste your code here for we can see wat u have done,,

Best approach for On demand loading of tabs and form submission

I am developing an app using angularJS. This application has about 5 tabs and this is mainly a form and a single submit option for all tabs.(similar to employee data maintenance) The form is loaded with data of the user when the page gets loaded and user can edit and resubmit the form.
Since loading all the 5 tabs in the initial page load will effect the load time of the page , so i am planning to use on demand loading of contents and API.
1st approach:
One thing i can do is loading only 1st tab on initial load and load the other tabs based on click on the tab and using ng-include to include partial views. So in the end user can submit the form and client side validation can be done easily.In this case page will have DOM elements of all activated tabs.
2nd approach: By using routing (i am not much familiar with this). But from my understanding this logic will replace the DOM of a tab when user switches tab unlike 1st approach. So there is a need of using service or some other technique to save the data. But i want to retain the DOM of previous active tab even when tab is switched. So can it be done?
Finally, What is the best approach among above two OR is there any other good techniques to achieve same?
I think Option 2 would work best for you. AngularUI router (https://github.com/angular-ui/ui-router) would help with this above the standard ng-router.
Rather than save the DOM between tab switches, you could just save the data and re-bind when you switch tabs.

How to show/hide a page of a PDF Form by checking or unchecking a check box?

I have a form that I am trying to use page two as a continuation page that will only be shown when a user checks a box. I am using Adobe Acrobat DC cloud and I tried the following code.
if (this.rawValue == 0||this.rawValue ==""){
xfa.resolveNode("Page2").presence = "hidden";
}
else{
xfa.resolveNode("Page2").presence = "visible";
}
However every time I try this or a variation of this code the debugger says:
ReferenceError: xfa is not defined 4:AcroForm:ExtensionYes:Annot1:MouseUp:Action1" is there a step I am missing or can someone recommend a better way to accomplish this?
I ran across a very similar problem as this one.
The first step is that you need to define the page that you want to hide and show as a template. Make sure to uncheck that template to make it hidden by default.
Go to Tools > Organize Pages
Select the page that you want to convert to a template.
Go to More > Page Templates
Type a name for the template and click Add....
Uncheck the checkbox next to the name to make it a hidden template.
Using Javascript you will add a new page to the document from the template like this. Use this when you test if the checkbox has been checked.
// This creates a new page from the template called "Template-Name"
this.getTemplate("Template-Name").spawn();
To hide the page that has been added you need to delete the page. In my case, I added a range of pages so had to delete a number of pages. Specify the page numbers to delete. (Note that the count starts at 0).
// This would delete pages 3-4
this.deletePages({nStart: 2, nEnd: 3});
I found this resource helpful in doing this even though it is a bit old and does not touch on deleting the pages at all. https://forums.adobe.com/docs/DOC-4061
You can also check out the Acrobat Developer center for documentation: http://www.adobe.com/devnet/acrobat.html.
#JB11 You can use page templates which can be spawned (ie visible), hidden and deleted. This will acheive what you want Acroforms (Acrobat).
The manual on it is here : http://help.adobe.com/livedocs/acrobat_sdk/10/Acrobat10_HTMLHelp/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Acrobat10_SDK_HTMLHelp&file=JS_API_AcroJS.88.1207.html
Start by defining the page you want to show hide as a template page from Tools > Organise Pages > Template Page in Acrobat.

How to make pages progress stepwise on a popup?

Can someone please explain how can I go about creating the following page and what techniques should I adopt:
The user should be able to click on a button which should result in a popup.
The popup should have a static page with instructions and button to click which takes the user to the next step in the same popup.
At the next step the functionality should run to take input from the user and save it to the server.
The user should see a confirmation finally and on clicking finish, the popup should hide.
From what I understand, I should try the following:
use javascript onclick and fadeIn function to create the popup.
continue changing the same div using onclick and AJAX to create stepwise kind of a format and carry out the functionality.
use XMLHTTPRequest to upload data acquired and finally use fadeOut to hide the popup.
The reason why I am thinking in these lines is because I have had very little exposure to web designing and hence would love to get some expert views on if this is the right approach and if not then what should be a better way to do it. Is there is some existing literature/method which talks about it?
Any help would be much appreciated.
For first step
Use javascript onclick function. But before this keep your static content ready and than use jQuery UI to appear it as good Dialog Box. For example see this
For second step
The user will never know that you have changed the dialog. Just you can load new dialog with new content in it. When you click button on first page, make that first dialog box is closed.
For third step
Instead of static content make the response set to dialog, here you may use Ajax/post call.
Las step
Its not compulsion to use XMLHTTPRequest. You can even submit form in jQuery post/ajax. Than you can reload the page with confirmation message send in response from server or you may use jQuery to make the confirmation message appear.

Dynamic pages loading (without realoading whole page) in angular?

I decided to learn AngularJS, but I got stuck on my first project :/
I want to make menu like in first example here: http://tutorialzine.com/2013/08/learn-angularjs-5-examples/ So there are a few options: "home", "projects" etc. and if I click on one I get other part of site without reloading whole page.
What I want to accomplish:
dynamic data loading, when I click on link, refreshes only one part of page not all. I want to make page like this (click on any link - the menu bar sands still and isn't reloaded)
all parts of site are in separate files (I don't want to keep all page data in one html file, I want to break it into pieces)
adress of page (in browsers adress bar) is changing when I click on link
I know I could use AJAX or something like this, but the problem is: I want to make Google-friendly site and - as in know - Google have some problems with AJAX based sites.
Can you tell me what way should I choose and if angularJS actually qualify to this job?

Categories