Member Avatar for alihuta2002

I know this may be a question that we see often, but I couldn't see any similar to my case or maybe just I don't understand the right concept of AJAX.

I'm kinda new to AJAX and trying to accomplish with one of my new project.

I've been told that using AJAX is better than using php to replace div content on the page.

I use to use php elseif echo to replace content but in this project I'm asking to use AJAX instead.

so what I'm having now is that a set of icons in the `index.php` page

for an example `[icon1][icon2][icon3][icon4][icon5][icon6]`

when the client click on any of the icon in this page there will be three div contents to be load which I've set them as `div id="player"` `div id="image"` `div id="title"`

and I understand that I can call the content from other file which I named them `contentone.html` and so on

in the `contentone.html` will contain three `div id` as well which I want when the client click on the icon then AJAX will load the content from this file and show them in the `index.php` page.

I know this shouldn't be ask but if anyone of you could guide me where to read or anything can help me to achieve this project will be so much appreciated

  • 2 Contributors
  • 1 Reply
  • 187 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by rv1990

Dani AI

Generated

A short practical plan and two safe ways to do it (HTML fragments vs. server JSON). had the right idea: clicking an icon should trigger an asynchronous fetch and update the three targets #player, #image, #title. is also correct that a PHP endpoint is the right move when content must be generated server‑side (DB lookups, permissions, etc.). For static fragments it’s simpler to fetch HTML directly.

Fetch and extract three divs from a static file (no PHP needed). Icons carry the fragment filename in a data- attribute, an event handler fetches the file, parses it with DOMParser, and copies the innerHTML for each id:

document.querySelectorAll('.icon').forEach(icon => {
  icon.addEventListener('click', () => {
    const src = icon.dataset.src; // e.g. "contentone.html"
    fetch(src)
      .then(r => r.text())
      .then(html => {
        const doc = new DOMParser().parseFromString(html, 'text/html');
        document.getElementById('player').innerHTML = (doc.getElementById('player') || {}).innerHTML || '';
        document.getElementById('image').innerHTML  = (doc.getElementById('image')  || {}).innerHTML || '';
        document.getElementById('title').innerHTML  = (doc.getElementById('title')  || {}).innerHTML || '';
      })
      .catch(err => console.error('Load failed:', err));
  });
});

If the content must be dynamic, have a PHP endpoint return JSON (fields player, image, title) and insert those values. Client code then uses response.json() and updates the three divs — this avoids parsing HTML and is safer when data comes from a DB.

Troubleshooting notes: watch same‑origin/CORS, use relative paths carefully, avoid inserting whole pages with duplicate IDs (extract fragment first), scripts inside fetched HTML don’t execute automatically, and add a non‑JS fallback (links or server rendering) if SEO or no‑JS access matters. Add error handling and an ARIA live region or focus management for accessibility.

Member Avatar for rv1990

I feel you are thinking on right path and carry forward your project. I am there for any kind of help.
For the above problem you must make a php file. When mouse click on any of those icon the data goes asynchronously to the php where it will find out the solution for the request and will display on the 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.