I am in the process of developing a website dedicated to radio streams, and I was advised to utilize Jquery and AJAX for loading HTML files into a div upon button click. This way, users wouldn't have to load an entirely new page for each radio stream. However, being a novice in this language, I find myself a bit confused and uncertain about what I might be doing wrong.
My current setup involves an index.html page that loads individual divs containing all available radio stations within iframes linked to HTML files. These HTML files contain around 40 buttons, each designed to redirect users to a specific radio stream. On button press, my goal is to seamlessly load the selected stream into the 'radio player' div for a smooth transition.
In my attempts to troubleshoot, I came across JavaScript code like this:
$(function(){
$(".538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
Given that each button corresponds to its image file, I tried assigning the "538" class to each image source to help the JavaScript identify its target. Unfortunately, it appears that this approach isn't yielding any results, leaving me at a loss on how to proceed. Initially, I attempted organizing this in a separate index.js file without success, leading me to experiment with embedding the JavaScript directly within the HTML file itself – yet, this too failed to do the trick.
To summarize: I am working on loading HTML content into a div when an image button is clicked.
I have scoured the web in search of tutorials addressing this issue but found no relevant resources. If anyone can offer guidance or assistance in resolving this matter, I would be immensely grateful and forever appreciative.