Member Avatar for istore221

please refer this link and click on Quick Links

the side elements (content area) changing without loading page

how do i archive this in my web site

i can create page for each and every Quick Link but i dont wannna do that i want to display that without loading whole page like above link please give me a simple coding how to archive this :(

  • 3 Contributors
  • 2 Replies
  • 114 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

— the example you pointed to behaves like a normal page load with a query string, which is what observed. It only looks like a side-panel swap because the server renders the same template with different content. is on the right track: a client-side fetch is the common way to change just a region without a full reload.

High-level approach to implement this cleanly:

  • Keep ordinary links as a progressive-enhancement fallback so the site still works with JS off.
  • Make a server endpoint that returns the fragment (HTML or JSON) when requested (use a query like ?partial=1 or an X-Requested-With header).
  • Intercept Quick Link clicks, fetch the fragment, replace the side container, and call history.pushState so back/forward and direct links work.
  • Manage focus and ARIA (move focus into the updated region or use aria-live) so screen readers notice the change.
  • Sanitize any injected HTML server-side or client-side to avoid XSS.

Minimal client-side pattern (conceptual; adapt selectors/endpoints to your project):

const container = document.getElementById('sidePanel');

async function loadFragment(eid, push = true) {
  const res = await fetch('/quick-content.php?eid=' + encodeURIComponent(eid) + '&partial=1');
  if (!res.ok) throw new Error(res.status);
  container.innerHTML = await res.text();
  if (push) history.pushState({eid}, '', '?eid=' + encodeURIComponent(eid));
  container.focus();
}

document.addEventListener('click', e => {
  const a = e.target.closest('a.quick-link');
  if (!a) return;
  e.preventDefault();
  loadFragment(a.dataset.eid);
});

window.addEventListener('popstate', e => {
  const eid = (e.state && e.state.eid) || new URL(location).searchParams.get('eid');
  if (eid) loadFragment(eid, false);
});

Troubleshooting/cautions: check console/network for CORS or 404, ensure server returns only the fragment on partial requests, handle failures by falling back to full navigation, and consider SEO—render full content at canonical URLs server-side so crawlers can index pages. Iframes work for some embed cases but bring accessibility, sizing, and history complications; prefer fragment fetching for native content.

Recommended Answers

All 2 Replies

Member Avatar for AleMonteiro

But the example posted does reload the whole page. It's a simple redirect to the same page with different parameters.

Member Avatar for JorgeM

the side elements (content area) changing without loading page.

The solution is either going to be using Ajax or an iframe element to display the target content without a full page reload.

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.