navigating to next panel Angularjs - javascript

I am working in a Angular project,I have many panels ,in each panel I have some input fields and ends with a continue button.
problem: The user, who is logging to the site needs to click so many continue button to complete filling all the panels.
requirement: once all the input field are entered it should automatically navigate to the next panel without the user clicking on the continue button.
solution: trigger when the (form is valid && onblur of the last input field in the panel)
But I am not so convinced with this approach,Is there any better way of doing it.so kindly provide with some suggestion.
note: continue button will stay in the panel to use when user return backs to the previous panel if needed.

Related

How to find whether user can click a given button in html using js?

I developed a page with only one button.
If a valid user appears i will allow that user to click that button
manually or user can also press enter(i will click that button using
js in background).
If a invalid user appears i will display a freeze layer on top of
that button, so that user cannot click that button.
Problem is if invalid user appears and press enter. my js code will click that button.
So, my question is straight forward is there any option in js to find whether user can click that button
I can also make alternate flow but i need to know answer for above question.
if(<user_is_not_valid_(your own condition)>){
document.getElementById("id_of_button").disabled = true;
}
This is for making a button unable to click. You should solve how to determine if the user is allowed to click. Put your own condition instead of < user_is_not_valid_(your own condition) >.
The user is valid or not is based on API request fire onpage load $.get in success you make the if (user.type==true){ $('#btn').addattr('onclick',funcname);}else{ ('#btn').attr('readonly',true);}

Angular Page refresh is not working for $route.reload() and $state.go() and transitions

I have a credit card info iframe which runs on top of the angular web and selected based on the drop down and captured all the credit card information. After entering all the data when I'm clicking next it'll successfully navigate to the next page. But as per my design, when it enter any credit card data and press next it should populate in the drop down. Currently, this happens once I reload the page only.
I used:
$state.go('checkout', { reload: true }); /
$state.reload($state.current.name);
but it's not working, even the transition not working. is there any workaround for this.
I just want to click next and come back by clicking back button to see my drop down contain my credit card number.

How to navigate from one popup page to another using Jquery in struts2 application

I wish to navigate through multiple pages in a pop-up block. That is, my main page would be inactive when i navigate through pop-up flow as below
[[Main Page]]
[popup-page1]--Next--> [popup-page2]--Next--> [popup-submit page3] --Submit-->
[[Main Page]]
Each page has different set of attributes that are populated by user input such as radio buttons and text fields etc
for instance, below are some of the attributes that are filled on each page.
[page1]--> your name, DOB, country
[page2]--> your preference, your package, direction
[page3]--> email address and submit
How can i retain these values and submit as a form? Do I need to submit each popup page as a separate form or in one shot by retaining all these value till the end?
Note that my application is in strut2 and usually for page navigation I take the help of model driven arch. (putting the fields in one bean and keep a track of value changes using hidden attributes from one form to another)..How can this be achieved using pop-ups. I have limited knowledge about sj:dialog
EDIT
Use Jquery to simulate pop-up navigation by display none and block property. Then, for submit do an AJAX call, this will perform an async call in the background.
In order to navigate through multiple pages in a pop-up block.
I created multiple divs inside the parent div and on click of each continue button I took help of show and hide using Jquery.
At the end of the flow, submit the request to an URL using an AJAX call (GET request)pass values entered by user as params.

JQGrid Edit Form does not get focus on submit button

I have started to use JQGrid with version 4.6 since last few days. I have used jqgrid data form to insert and update data of the grid. In the form I have used several text-boxes. I get focus to next text-box by pressing tab key as usual. This works fine. But when last textbox is reached and press tab button, the focus should be transfer to the submit button as it is the next element in the form. But it doesn't. I have also observe this behavior on jqgrid demo site. It would be much better if focus is shifted to the submit button when tab key is pressed from the last element of the edit form of JQGrid.
Please help me out on this.
you can check the behaviour on http://trirand.com/blog/jqgrid/jqgrid.html and go to "New in version 3.5" -> Form Navigation.
Thanks & Regards,
Kartik Jajal

Setting tab order with javascript

I have a page which has multiple forms. I'm using Mootools sliding tabs so each of the buttons on the menu slide along to the next form. There are 3 forms which are technically on the same HTML page. See an example of the technique at http://creativepony.com/archive/demos/sliding-tabs/
My problem is when a user presses the tab key and tabs through to the last field I want the tab order so it goes back to the first field. This is so the user does not accidentally tab to the next form. The user would end up looping back around the same form fields. For the user to reach the next form they use the menu so I don't want them to be able to tab to the next form.
I am aware of setting tab order with 'tabindex' but this doesn't help me make the user return to the first field of that form.
Any ideas how to achieve this with javascript?
I would do this by making the fields in the forms that aren't visible disabled, so the browser knows to skip them, regardless of navigation mechanism (think accessibility aids).
You can do this via event listeners:
$$(".foo").addEvent("click", function(e) {
if (e.keyCode == 9) new Event(e).stop();
$("#myfield").focus();
});

Categories

Resources