Member Avatar for stevenpetersen

Hello my name is steve & im trying to use ajax to change the content in a div when you click on a nav button (6 buttons in nav)...... I build out side using a Ajax book and it did not work...... deleted the project and im trying to start over..... Please help me with the js. and setting up the divs right.....
Steve

  • 3 Contributors
  • 3 Replies
  • 320 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by stevenpetersen

Dani AI

Generated

As described, the goal is to click a nav item and swap the content of a target div without leaving the page. and pointed to tutorials; here is a concise, practical pattern that does the job: intercept the click, fetch the HTML (either a small fragment file or a full page), parse out the desired div, and replace the on-page container. Using anchors lets the site still work without JavaScript; history.pushState can be used to keep the URL meaningful.

<!-- example HTML -->
<nav id="mainNav">
  <a href="page1.html" data-fragment="#article">Page 1</a>
  <a href="page2.html" data-fragment="#article">Page 2</a>
</nav>

<div id="content">Initial content</div>

<script>
document.getElementById('mainNav').addEventListener('click', function(e) {
  const link = e.target.closest('a[data-fragment]');
  if (!link) return;
  e.preventDefault();
  fetch(link.href, { credentials: 'same-origin' })
    .then(res => { if (!res.ok) throw new Error(res.status); return res.text(); })
    .then(html => {
      const doc = new DOMParser().parseFromString(html, 'text/html');
      const fragment = doc.querySelector(link.dataset.fragment) || doc.body;
      document.getElementById('content').innerHTML = fragment.innerHTML;
      history.pushState({ ajax: true }, '', link.href); // optional
    })
    .catch(err => {
      document.getElementById('content').textContent = 'Load error: ' + err.message;
      console.error(err);
    });
});
</script>

Notes and troubleshooting: use small fragment files if possible to avoid parsing a full page. Same-origin or proper CORS headers are required for fetch to succeed. innerHTML will not execute script tags from the loaded HTML — scripts must be added programmatically or initialized after insertion. After replacing content, reinitialize any event handlers or widgets inside the injected HTML. If a nav click appears to do nothing, check the browser console and Network panel for 404s or CORS errors, verify the selector in data-fragment matches the source page, and confirm the server returns valid text/html.

Recommended Answers

All 3 Replies

Member Avatar for Airshow

Steven,

Rather than go into a lot of detail here, why not type "AJAX tutorial" into Alta Vista or Google. Or search Daniweb.

Plenty of advice already exists without the need to add to it here. I leaned all my AJAX from the web.

Airshow

Member Avatar for leviathan185

I agree I am currently learning AJAX and all you need to Google. a good site for the fundamentals is http://www.w3schools.com

Member Avatar for stevenpetersen

ok I looked at AJAX Examples that you both posted. they are based on making a form....not looking to make a form (but i looked it over)......... with the JS file they provide i need to now how to make a onclick event that retreives a div from a html page...

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.