How to keep html file state the same when changing through files - javascript

I made 2 html files, one is mainly using javascript,(the index). And another that is for the info. So in the index.html file when opened it displays a main menu and a button called books and when clicked on it displays a list of book titles and etc. and when chosen one of them it will send you to the 2nd html file, the info.html file. I made a button on the info.html file where it will send you back to the index.html file, but when i click on it goes back to the main menu screen and not the books list screen.
Is there anyway to have the current state of the previous html file stay the same?
(I made the mainmenu dissapear and books tab reappear using javascript.)

When user navigated from Page 2 (info.html) to Page 1 (index.html) using back button, you need some identifier to trigger same functionality which you are triggering on Books button click to displays a list of book titles and etc.
So technically, you need to add a query string identifier on link of Back button
i.e Back
Now, read value of query string identifier in javascript of index.html and conditionally trigger the same functionality which your are triggering when user click on Books button.

Related

Change the URL after creating a new page via JS

I have a main page and in it there is an "add" button that adds an image on the screen with each click (like cards).
Each image has an id and a name and they are arranged in an array in order.
Every time the "add" button is pressed I execute the command
var newDoc = createHTMLDocument("image name")
I want to change the default url (about:blank) to something else, for example the name of the image (of course without spaces) so that I can put this URL in the onclick of the image and by clicking on the image, its page will open. I want to change the URL because I had many pages (1 for each image I create).
You have to remember that my main page will have a lot of clickable pictures (cards) and each one has to open its own page.
My main problem right now is that I can't change the URL.
I'm not sure accessing the URL and changing it is the right way to do it, but that's what I thought was needed. (I would love to hear more suggestions if any).
Right now it just generates HTML documents with a default URL that I don't even know how to get to.
In addition, I work on a computer locally that is not connected to any network at all and there is no server. Everything locally!
Many thanks to the helpers

Oracle Apex - Link to same page with values from selection lists

I'm trying to build up a link that includes three values from the choices of selection lists. It should point to the same page and reload it (page 11) while transferring the said values. By this, a chart is loaded which gets its data via pl sql query which is completed with the variables from the link. This works when having the link pointing to page 11 on another page (page 3). The values here are coming from an interactive report and the link ist generated via the link builder. When trying to reload the same page, it doesn't get the values from the choices of the selection lists. I guess it reads the values when the page is loaded and not dynamically, therefore they always stay empty. Is there an easy solution for this (perhaps using javascript)?
This is how the working link from Page3 to Page11 looks like:
/apex/f?p=&APP_ID.:11:'||:APP_SESSION||'::NO::CLASS,OBJECT,ATTRIBUTE:'||:P3_CLASS||','||:P3_OBJECT||','||:P3_ATTRIBUTE||'
It should be as simple as creating a button with action "Submit Page". This will submit the page and pick up the selected values.

Insert image or text into div on a static webpage by clicking on bootstrap dropdown menu

I am trying to create a table in bootstrap that can be edited online by users without using a database backend.
Please see a preview of my page at https://preview.c9users.io/tomheaps/whiteboard/index.html?_c9_id=livepreview3&_c9_host=https://ide.c9.io#
You will see that I have managed to insert a dropdown menu which appears if you click on the table cell directly under the 'Diet' column header. Is there any way using jquery that you can click on an item from the menu list to insert a specific image or text into the div from which the dropdown originates (i.e. into the table cell that you clicked on).
Ideally I want the text or image that the user has inserted to remain in that div until it is changed, even if somebody views the page on a different computer - not sure if this is possible in a static webpage without using a database back end.
My javascript skills are non-existent and can't find anything similar after hours of trawling the web so any scripts to enable this would be very gratefully received.
You need a database to show any data which needs to appear in a new computer.
Anything you insert by js in your current DOM document shows just for the current user.
You have to store the data in a remote server in order to allow new users to see its.

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.

Branching and Maintaining Position

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.)

Categories