I'm currently creating a web app in Angular (beginner) and I'm a little deep into it. I potentially want to alter my design and get input on other possible designs of my app. There are two routes, first route is the main page which shows a table full of links. When I click on one of these links, it will send me to my second route (I pass in key data to the URLs for the second route from the first one). The second route is a tabulated view of some information.
One reason I wanted to alter the design was so I could only have one route (with tabs). The first tab will show my table full of links (first route) and the rest of the tabs will show the information (second route) therefore compiling it into one route. Is it possible to click on the link (first route) and it will lead to me to the next tab with key information I can use to populate that tab or is it better to separate it out?
example (current design):
first route (table):
person_1, person2, person3
person_4, person5, person6
second route (pretend I clicked person1):
tab, tab, tab. Information about that person in each tab (Using parameters passed in through url).
If you want to show something in a different tab you could just hide the tab using jquery or ng-hide.
So when the link is clicked instead of navigating to another route simply call a function to show the hidden tab after loading the info for that tab
Related
I have one PHP page that tests $_REQUEST['delete'] to see if it exists.
If it does, then I delete the item number that it references from a list and redirect to a different tab. The tab switch is done by hiding and exposing different divs.
However, the URL displayed in the browser URL field still has the URL ?delete=nn in it. This can lead to a second delete if I inadvertently submit again without changing the shown URL.
How can I remove the parameters when I shift tabs? Or equivalently, can I switch to the new tab via my URL, e.g. URL ?tab=2.
It's a lot of code to show, so I am looking for some suggestions about how to structure. Right now, I create a 'page' with three divs, one for each 'tab' with one being the default.
After handling the delete, the page is reconstructed and the default tab is presented.
The URL isn't modified, of course, since I used it to create the page. Here is the 'pseudo-code':
<?php
... head stuff
... definition of tabs with onClicks for switching to named tab
... create content of div for 1st tab
... start creating content of div for 2nd tab
... examine $_REQUEST for 'delete'
... if it exists then
... alter contents of data to eliminate item nn from list
... then
... continue content of div for 2nd tab using altered data
... then create content of div for 3rd tab
... add content for javascript that manages tab switching, login, etc.
... echo the entire contents of the page for presentation.
... the javascript switches to the default tab on load.
I would like to have the url in the browsers url field NOT have the parameters when the page gets loaded.
I believe I stated the question poorly. I did look at the 'Funk Doc' suggestion, and it does work by putting a new entry on the History stack, but as I examined it, I realized that what I actually wanted was the refresh button of the browser to refresh the screen without using any of the Post or Get variables that might have been present when the screen was drawn originally. I realized this, when I changed to be sure that I was Posting the form variables, and upon hitting refresh, it asked about re-sending the form. The 'pushState' seemed to still retain the Post variables. I tried setting them to different values, but it didn't seem to affect anything.
The issue was that I delete a value in a list by line number, which deletes it from a file. If I use the refresh button, then the line number in the request is again deleted in the altered file. I want the user to have to click on the link to cause the delete, not have a delete happen if they refresh the page.
Suggestions or comments still invited, but I will consider withdrawing the question since it was stated poorly.
Thanks,
I need to keep controllers' state in angular ,for improving some user experiences, during user is visiting different pages.
For instance I have a list, which is created via a directive, and it has a pagination section, so imagine when a user go to page 20 and choose an item, they'll be redirected to the detail page, but when they click back button and return to the previous page they see the first page of the list which is not convenient and they expect to be on page 20 again.
I've come up with several options:
Using a dialog to display second page (item detail), so they can close that modal and return to the previous form without any change.
Redirecting users to the second page with a parameter in URL and then return them with that parameter to understand what page number they have been before.
Keeping some crucial variable globally to store controller state and using them when user comes back.
But I think there should be better ideas like keeping controllers' state during redirection.
Any idea would be appreciated.
Redirecting users to the second page with a parameter in URL and then return them with that parameter to understand what page number they have been before.
I prefer this because you get the added benefit of staying on page 20 when you do a page refresh. Options 1 and 3 do not give you this added benefit. Path params are also bookmark friendly.
Another alternative for you to look into that is almost as good is localstorage
or cookies. I dont think these options are better than your 2 though.
I'm using the Polymer core-animated-pages to switch between my websites main pages.
I select which page needs to be shown by the id of that <section>. You can see a sample in action here. Now, the issue I'm having is that at loading of the page, the page that should be selected gets loaded from the url, eg www.example.com/home shows the home page, www.example.com/activities shows the activities page (code left out of example since not really relevant).
But what should I do when the id provided in the link doesn't exist? Is there an option to show a default core-animated-pages-page with a 404 message? Or do I have to check every link if it's in an array of all my pages, if so load the error page manually and else show the correct page?
Again, here's the example: jsbin.
Edit: To show the way my page handles linking, here's an update example: jsbin. Linking is essentially www.example.com/#home, etcetera
Something I'm missing from reviewing your example is how you're handling routing. In a typical site, if a user navigates to example.com/foo or example.com/#foo my expectation would be (using your current setup) that that would take you to the corresponding core-animated-pages page with the ID foo or a section which corresponds to that route.
Using routing (maybe the Polymer flatiron-director element), a basic solution might query the DOM in your element to see if a section of ID notsupportedURL can be found. If not, default to taking the user to your core-animated-pages 404 page, which doesn't have to be any more complex than what you have in place now.
There are a couple of things you could do here.
In the simplest case, you could just validate the value in the pageChanged handler. If the page doesn't exist, update it:
pageChanged: function(){
var foundPage = this.$.pages.querySelector('#' + this.page);
if (! foundPage) {
this.page = 'error'
}
...
See: http://jsbin.com/xequvone/14/edit
If you don't bind the core-menu directly to the core-animated-pages, you can add whatever logic you want. The following version does exactly the same thing as the previous one, but uses a separate variable for the selected page:
http://jsbin.com/xequvone/12/edit
I think you'd want a router if your URL scheme was more complex. For example, if the hash includes multiple levels and parameters, such as #people, #/people/search or #/people/edit/12343.
Trying to piece together js knowledge as I go here. But I have a website that will be relying on a tabbed (just 2) concept to flip between the companies two services.
So when navigating to the page, they user will be directed to Company1 and I would like to have a tab of Company 2 on the right. It will be the same domain, just domain.com#company2.
When they navigate to Company 2 directly (via domain.com#company2) I would like the tab on the right to link to Company 1.
So basically, it looks like js is the only way to do this. Something that could read the active id and style the tab accordingly.
The main function would be based on click. So if you click the tab, it switches to the non-active companies tab.
The tab itself will remain the same, all I need to change is the href.
Thanks in advance guys!
I think you could use CSS float :
$("#tab1_id").click(function(){
$(".2tabs_class").css("float","left)
})
$("#tab2_id").click(function(){
$(".2tabs_class").css("float","right)
})
Make sure 2 tabs are inside a div
The application has a Home item in the navigation bar (the item is in all the pages). I would like that when the home item is clicked, based upon the page number a warning box is shown to the user warning them, that all unsaved work will be lost. If the user presses yes, he or she will be taken to the application home page and nothing will be saved. If they press no, he or she will stay in the page.
Currently this dialog box shows up in every page. In Oracle Application Express, shared components > navigation bar > target area, these are my settings:
Target type = url
URL target =
javascript:if(confirm('All unsaved work will be lost?'))
{window.location.href ='f?p=&APP_ID.:1:&SESSION.:&APP_PAGE_ID.';}
I would like this behavior to only occur in a select number of pages. When a user clicks on the pages not included in this list, the warning box should not be shown and the user is taken to the application home page.
What you'd want is a dynamic action which targets the navigation bar entries. However, there is simply no easy way to selectively enable or disable this action on select items save for testing the text of the anchor tag. That would mean you'd be hardcoding values in your dynamic action to test the links, which i will not recommend.
There are no classes that can be assigned, and no onclick events.
You could use the code you posted, and have a javascript function which takes a page id as input parameter and then checks the page id against a list of pages which allow the action, but again complicated. It could be made dynamic with some ajax, but since you're unfamiliar with javascript it's better to first get accustomed with it before tackling that.
So, instead of inventing something like this, take a look at this save before exit plugin. It will check for unsaved changes, and you can add this just to the pages you want it on.