Branching and Maintaining Position - javascript

In Oracle ApEx, I have 6 regions on one page. Within Region 5, I have a report with an edit button that branches to another page, where I can edit some details, hit the save button, which then returns me back to the original page, with the 6 regions.
On return though, it branches back to the top of the page, where region 1 is.
Is there anyway of branching back to region 5 from where I initially pressed the edit button instead of scrolling to the top of the page?
If so, how?
Thanks.

See this example page. It has 3 reports (all the same as it happens). Each report has a link that takes you to another page with a Cancel button. When you cancel, it returns to the first page and scrolls to the report you clicked from.
How it works:
In each of the report regions I added a named anchors in the HTML header like this:
<a name="REPORT1" />
In the links for each report I pass a value like "REPORT1" to an item called P18_RETURN_ANCHOR in the second page (I made this item visible just to help you follow what I have done; in reality you would probably use a hidden item).
In the second page's Cancel button I branch back to page 17. In the "with these values" property I put #&P18_RETURN_ANCHOR. This has the effect of adding a tag like #REPORT1 to the end of the URL, which means "scroll down to the anchor named REPORT1". (This is standard browser behaviour, not Apex-specific.)

Related

After redirecting to a php page with request parameters and processing them, how to I return to the same page without the parameters?

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,

Javascript - Go Back Page List

Current working code to go back one page:
onclick="location.href=document.referrer; return false;
This code allows me to go back by one page only. Are there any code snippets that would allow to go back multiple pages similar to a browser's back button?
I understand there is a go() method to use with window.history.go(-i) but that doesn't solve the need. I am hoping to show a list of pages visited for a user to click on the desired page. This is similar functionality to a browser's back button.
In essence, trying to go back sequentially instead of jumping back x number of pages.
Thanks in advance for all of your inputs.

How to scroll back to an element wherever it is when route changes?

I have a very long table. The first column of each one of the rows is an <a> tag. A click on an <a> tag does:
Update route and page reloads
Get data(list of objects) from server.
Display the data below the <a> tag
Hide data related to an another <a>tag.
The length of the data differs from each other. At a time, I only show data related to one of the <a> tags. For instance, a click on the first <a> displays data related to it just after of it. A click on the second <a> shows data related to it and hides data related to the first <a>.
How to scroll back to the <a> tag you clicked on when route changes and page reloads?
If you answer, please no jQuery.
Thanks in advance.
So what's inside your tables? Is it images?
And the "data from the server", is it data, like data from an api request? Or is it a new webpage?
If we're talking a dynamic web page here. I remember dealing with the same problem with an infinite scroll view where a user clicks an element, and then goes back and expects to return on the same position.
The problem with dynamic content is that it takes a while for the browser to render it. Depending on what it is it might take a few milliseconds to many seconds (poor 3G and a view with 1000 images for instance). And while this rendering is going on, you never really know where the scroll should end up. It is possible to solve by adding timeouts and adjusting the scroll until we're almost sure that the page is in the correct place. But it's usually a mess.
You say that the page reloads? Normally a page needs to "reload" if a user is changing route and similar. If the data you are loading is a new page, the I get why you have to reload. But if it's an api request for some other data; is it an option to not reload the page? If that's possible, then you could remove and add elements instead of reloading the entire page.

Is this tab navigation and if so how?

I am not sure if tab navigation is the right term, but here goes. As you know if you hit the tab button on your keyboard the focus of the element changes to the next element. So the first question is, is this called tab navigation or is tab navigation like moving from one tab to another changing the screen (two different web page one on each tab)? Second question is how do I control the flow of the the tab when it is moving, for instance I want it to move vertically to a certain point before it moves horizontally. I am not even sure how to tag this so if I tag something wrong please correct me.
First:
Both can and are called tab navigation. But the one referred to that way more, is the one you describe. Using the tab button to move from one element to the next.
Second:
Most of the time you shouldn't mess with the tab navigation. People see a form and expect the tab button to work a certain way, when it doesn't then they usually assume that tab is broken for your website. It's also very browser dependent which means head-aches galore when messing with it.
If you must have the tab work a certain way, then form elements have a tabindex attribute, and you can set this to a number. The tab should then follow the numbers, i.e. from 1 --> 2 --> 3.
More info can be found here.
Any element in html has a tab index <element tabindex="number">. Hitting the tab will traverse the elements on your page. The navigation part of your question is answered -- as you concluded in the first of two alternatives for interpretation -- nicely here: http://en.wikipedia.org/wiki/Tabbing_navigation

Conditional actions when an Oracle APEX navigation bar item is click

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.

Categories