How to display content from the current page on a new page - javascript

I have a webpage where a dynamic table is generated when the user specifies certain things. I want to display the results in a different format (in a report style) without running the queries again (to maintain consistent results).
I checked this question and related ones, but they pull content from a page, where as what I want is to push the content to a new page.
Basically what I want is to display #my-table on a new tab when the button is clicked.

You can store your data in localStorage or sessionStorage. later on, you can access same data on another page.

Related

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.

Store and load JavaScript variables via Json

I need to store some dynamic variables in a Json file (i was told this would work) to be able to load them in multiple pages. Per example a customer should be able to select one thing in one page (a highlighted div) and then go to another page, select some items there and be able to go pack to the other page and that div is still selected. (Variables remembered) Now i tried to google and search here but found nothing matching my description. Please help me!
Try using localstorage, store selected values by user in localstorage and check this at page ready or load if it exists in loacalstorage show that value or div with highlight as per your functionality and if localstorage doesn't had a value then consider it as first time user come to this page.
but be careful using localstorage as you have to clear it when you done with it, it may cause memory leakage problem.

Javascript: Reusing a dynamically created DOM object on next page loads

I have 20K+ values to display in a Combox Box. The HTML was getting huge so in order to reduce the HTML load time, I stored all the values in an array in localStorage. Next, I used javascript and dynamically added all options to that Combo Box. Till here every thing is fine, however now I want to even avoid the step of populating the combo box on every page load. What I want is to store the populated Combo Box DOM object somewhere and on every page load reuse that object. I have already tried localStorage but it's failing, probably because the list is too big (RnD to figure that out is going in parallel).
Is there any thing else I can utilize to cache dynamically formed DOM objects so that they can be used all across application on different pages with repeated re-loads without going through the pain of dynamically populating them over and over again.
Create a partial template html for the combobox,and precompile it. (Handlebars/Moustache)
Load the file dynamically on the first page
For the other pages, you can use this cached partial html

Multiple pages requiring auto refresh with different options saved on each

I am currently working on a project where the user lands on a page to build custom looping maps. When the user picks the type of map, a new browser tab (this is directed to happen, I have no say in the matter) opens with that particular map looper. There are controls for speed, start and stop times, and a checkbox to enable a 15 minute auto refresh. Currently, I use JQuery to capture the dropdowns and checkbox, save the values to a cookie, and then load those back when the page refreshes.
This obviously works fine, except that in meteorology, I may need two maps open and looping. Sometimes even more. If I use cookies, that second map will use the values as the first. If I change the options for the second map, the first one will refresh with those options. This is not ideal.
I see sessions and cookies the same. If I am opening tabs, those values will persist through each map looper. My other option is maybe use a hashtag on the URL and keep the values selected there and parse that back in on the refresh. Am I missing something? I would rather not use hashtags because it seems messy, but I cannot figure out how to have multiple tabs using different values within the cookie. What if the user has 10 tabs open? My question is, for this application, which is the best solution to implement?
We utilize javascript/JQuery and php within the pages. Our product must be compatible with Chrome, Firefox, and IE.
Prepend a unique id to the cookie data that matches an individual map. So option1 on map2 becomes map2option1
By tab you mean webbrowser tab or just div on the same page?
If your tabs are elements on one page just decorate them with uniq data
<div class="mytab" data-session="1">
//tab data
</div>
<div class="mytab" data-session="2">
//tab data
</div>
when you refreash data:
$('.mytab[data-session]').each(function(){
$.post('/refres', { sessionId : $(this).data('session')}, function(html){
$(this).html(html);
})
});
If you use new tabs on every tab create hidden session key
<input type="hidden" value="#Guid.NewGuid().ToString()" id="sessionKey" />
on refresh and save pass it to controller. It is hidden for user

Categories