Member Avatar for Marcus_3

Can someone assist me on how to do a mouse over on a hyperlink that shows what the user selected on the page they just left or saved. For example, the user clicks a link that says 'Add' and it opens a popup window where they select a list of items that have checkboxes, they check the items they want and then they click save to close the popup and they return to the original page. The user then hovers over another link that says 'Edit' and it shows them what they selected on the popup page. Can this be done and if so how?

  • 3 Contributors
  • 4 Replies
  • 246 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Laith_2

Dani AI

Generated

Short answer: yes — but use an explicit data channel (better than relying on document.referrer). For a same-origin popup the simplest, most reliable pattern is to have the popup call a function on the opener or post a message back; store the selection (sessionStorage/localStorage or server-side) and read that store when the Edit link is hovered. 's referrer idea only returns the previous page URL and is unreliable for passing selected items. 's AJAX suggestion is valid when server persistence is required.

Example (minimal, same-origin + fallback to localStorage):

// popup: collect checked values and send to opener (or save locally)
const selected = Array.from(document.querySelectorAll('input[type=checkbox]:checked'))
                      .map(cb => cb.value);
if (window.opener && !window.opener.closed && typeof window.opener.receiveSelection === 'function') {
  window.opener.receiveSelection(selected);
} else {
  sessionStorage.setItem('lastSelection', JSON.stringify(selected));
}
window.close();
// main page: receive selection, and show it on hover
function receiveSelection(items){
  sessionStorage.setItem('lastSelection', JSON.stringify(items));
  // optionally update inline UI immediately
}

const editLink = document.querySelector('#editLink');
editLink.addEventListener('mouseenter', () => {
  const items = JSON.parse(sessionStorage.getItem('lastSelection') || '[]');
  showTooltip(editLink, items.length ? items.join(', ') : 'No items selected');
});
editLink.addEventListener('mouseleave', () => hideTooltip());

Troubleshooting and best practices:

  • If popup is cross-origin use window.postMessage and validate e.origin on receipt. Never insert untrusted strings as HTML — use textContent to avoid XSS.
  • sessionStorage is per-tab; localStorage persists across tabs. Choose based on desired lifetime.
  • Modern links opened with rel="noopener" remove window.opener — open popups with window.open when opener access is needed.
  • For persistence across devices or long-term history, POST the selection to the server and fetch it on hover (AJAX), as suggested.
  • Add keyboard/focus handling so the same info is available on focus (accessibility).

This approach keeps UI responsive, avoids brittle referrer hacks, and matches common web security constraints.

Recommended Answers

All 4 Replies

Member Avatar for jkon

Hello Marcus_3,
Of course and it can be done through AJAX calls. Have you used AJAX in the past ?

Member Avatar for Marcus_3

No I haven't used AJAX. Do you have an example?

Member Avatar for jkon

http://google.com/#q=ajax

I don't even know what language you use server side , read some things first and make your own experiments and if you have any specific question here we are

Member Avatar for Laith_2

Ok i still have some issues with javascript and html but im sure that it can be something similer to this . 

<a href="" onmouseover="PrevURL()">last URL</a>
<div id="OldURL"></div>
<script>
function PrevURL()
{
    var prev = document.referrer;
    document.getElementById("OldURL").innerHTML = prev;
}
</script>

in the above code when you hover over Last URL it will call ( PrevURL function ) and what the function does is get the prev page url and save it inside a variable , that variable will be replaced in side the div OldURL . I know its not the right answer for your Q but i think that this will gives you an idea about how it can be work .

Edited by Laith_2
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.