0

So I am making a website for radio streams and was told I should use Jquery and AJAX to load the HTML files into a div on button click so that I wouldn't have to make the user load a completely new HTML page for each radio stream. But I am a bit lost since I am new to this language and I am not entirely sure what I am doing wrong.

Currently I have a index.html page that loads each individual div and loads all the available radio stations in an iframe linking to an HTML file. In this HTML file there are around 40 buttons that each have to link to their own radio stream. On a button press I want said stream to load into the 'radio player' div for a smooth transition.

After trying to google the problem I was told to do this with the following JavaScript code:

$(function(){
  $(".538").click(function(){
    $("#div3").load("/includes/about-info.html");
  });
 });

Since each button is also showing its own image file, I tried to add class="538 to each image source so the JavaScript knows what is targeted. Unfortunately it doesn't seem to work at all and I have no clue what to do. I tried to do this in a separate index.js file which unfortunately didn't work, so I tried to use the JavaScript code in the HTML file itself, and this didn't seem to do the trick either.

TL/DR: trying to load HTML code in a div when an image button is clicked.

Is there perhaps a tutorial for this available? I tried to search the web but couldn't find anything at all. If anyone is able to help me out with this problem I'd love you forever.

Rob
  • 14,746
  • 28
  • 47
  • 65
Proxzor
  • 23
  • 5

4 Answers4

0

I think what's happening is that you're working with dynamic elements. More importantly you should never use numbers to start off either a class name or id.

Unless you post a bit more code it's hard to figure out exactly what you're wanting to do.

If you work with dynamic html the click event won't work, because well you need do dynamically bind the event listener.

For that you can use

$('#dynamicElement').on('click', function() {
   $(this).find('#elementYouWantToLoadInto').load('/includes/about-info.html');
});

The above code works if the element is nested in the button. If it's an external element then use.

$('#dynamicElement').on('click',function() { 

     $('#elementYouWantToLoadInto').load('/includes/abount-info.html');
});
user3928517
  • 1
  • 1
  • I think that still won't work if `#dynamicElement` is added after the DOM loads. You'll need to bind the event listener to a static ancestor of the dynamic element. See [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements). – showdev Jun 24 '16 at 18:18
0

You mentioned that this language is a bit new to you; If you're open to a bit of refactoring:

Your main page should have 2 sections:

<div id='myButtons'>
    <input type='radio' data-url='/includes/about-info.html' />
    <...>
</div>
<div id='myContent'></div>

<script>
   $(function() {  //jquery syntax - waits for the page to load before running
       $('#myButtons').on('click', 'input', function() {  // jquery: any click from an input inside of myButtons will be caught)
           var button = $(this),
               url = button.data('url'),
               content = $('#myContent');
           content.load(url);
       });
</script>

Jquery: http://api.jquery.com/

rkw
  • 7,287
  • 4
  • 26
  • 39
  • But how do I make the connection of the button image source and the input type? I have 40 buttons that need to be linked to .html pages, how do I target one button individually and give it an individual html source to go to? – Proxzor Aug 11 '14 at 08:48
  • @user3859693: notice on that example button, there is a data-url property? That lets you specify the .html page. Look in the javascript function: the first parameter is `button = $(this)`, that grabs the button that did the clicking; the second parameter is `url = button.data('url')`, that grabs the `data-url` specified – rkw Aug 11 '14 at 09:40
  • also, if you go to http://www.jsfiddle.com, you can create a prototype and people can see live examples of what you are talking about – rkw Aug 11 '14 at 09:43
  • I think I get it now, somehow I am however getting an error message on the last line }); "SyntaxError: Missing } after function body" – Proxzor Aug 11 '14 at 09:49
-1

you can try this

$('#myButtons').on('click', 'input', function() {  
 $.get("about-info.html", function(data) {
  $("#div3").html(data);
});
 });

or

$(document).ready(function(){
$(function(){
  $(".radio538").click(function(){
    $("#div3").load("/includes/about-info.html");
  });
 });    

})
Sumit Pathak
  • 671
  • 1
  • 6
  • 25
  • 1
    It would help if you explained how your code works / what was wrong. Just a snippet is not a good answer in most cases. – Xan Aug 11 '14 at 08:53
  • that is function in which the html content is getting by $.get and store it into data variable and then whole data store into div which is user want...@Xan – Sumit Pathak Aug 11 '14 at 08:55
  • Not yet, I think I know the problem why nothing is working, but I am still working out how to fix it. Basically I am using img sources as 'buttons', but theres nothing with these image sources that links them to their own unique id/name/whateveryoucallit, so that I can link them to do the above. How to do this? – Proxzor Aug 11 '14 at 09:02
  • have you use document.ready above your function ? @user3859693 – Sumit Pathak Aug 11 '14 at 09:06
  • doesn't work, but I think it has something to do because i'm doing something wrong with targetting the buttons. I am completely lost on this right now lol. – Proxzor Aug 11 '14 at 09:21
  • Currenty I use as one button, how do I target it so your above code works? – Proxzor Aug 11 '14 at 09:21
  • have you getting any console error when you click on img ? @user3859693 – Sumit Pathak Aug 11 '14 at 09:25
  • what program do you all use to view console errors? Im trying to do this in dreamweaver and I have no clue how to check for errors. – Proxzor Aug 11 '14 at 09:27
  • just run this in your browser and press f12 and then click on console.....@user3859693 – Sumit Pathak Aug 11 '14 at 09:29
  • doesnt say anything, like I said how is it linked with my image button since I dont think it is linked at all? – Proxzor Aug 11 '14 at 09:37
  • i dont understand what u want to say ...!! just set id in your img and then try to call click event with img id like this $("#imgid").click(function(){ @user3859693 – Sumit Pathak Aug 11 '14 at 09:42
-2
$(document).ready(function(){
    $('#radio1').on('click',function(){
        #('#loadradiohere').load('/includes/about-info.html');
     });
});

Try that code in your .js file. I am still working for a similar project man.

jhuguz
  • 81
  • 1
  • 4