0

jQuery on the current page works.

I loaded a remote page to a div in my current page using:

<div class="row-fluid">
    <ul class="nav nav-tabs">
        <li><a data-toggle="tab" id="spotlight" href="#" data-hvalue="menu1">menu1</a></li>
        <li><a data-toggle="tab" id="spotlight" href="#" data-hvalue="menu2">menu2</a></li>
    </ul>
</div>
<div class="showroom" id="showroom"></div>
    <script>
        $('a#spotlight').click(function () {
        $(this).each(function (){
            if($(this).data('hvalue')=="menu1"){
                $.getScript( "http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.min.js", function() {
                     alert('Load was performed.');
                 });
            }
            var temp = $(this).data('hvalue') + " #page";
            $('#showroom').load(temp);
        });
    });
    </div>
</script>

The remote page has the following code:

<div class="container-fluid" id="page">
    <div class="row-fluid">
        <button id="DrawItem">Draw Item</button>
        <div id="canvases">
            <canvas width="640" height="480"></canvas>
        </div>
    </div>
</div>

At first, I put this snippet in the remote page: $(document).ready(function() { $('a#DrawItem').click(function(){ $("canvas").drawArc({ fillStyle: "black", x: 100, y: 100, radius: 50 }); }); }); But it wouldn't work. I put the canvas and the jcanvas.min.js script into the same page, and everything works. If I try to load the canvas from a remote page, it won't work.

CIA
  • 302
  • 1
  • 5
  • 16
  • First, you have duplicate IDs in there. Second, your `.js` file contains HTML?? – CodingIntrigue Oct 02 '13 at 13:29
  • You can use duplicate IDs if you intend to use them with $.each(); for example, in a menu structure. This allows you to re-use code/functions, as opposed to building new functions for each menu item. My .js file is just a .js file. I'm loading a div from a remote page, with javascript in it. The javascript is not working if it is loaded with the remote page. – CIA Oct 02 '13 at 13:42
  • 2
    You really shouldn't have duplicate IDs, despite the fact that you may be getting away with it. IDs *should* be unique - not all browsers will play as nicely as you've seen. If you want to identify a collection of elements it should be by class, container and type or some other data attribute, but not by duplicate IDs. – Reinstate Monica Cellio Oct 02 '13 at 13:46
  • That's true. I guess I've just gotten lazy with it. – CIA Oct 02 '13 at 13:58

1 Answers1

1

You can't assign the event handler to the element as you tried, as it doesn't exist at the time. Instead, you can attach it to a container element like this...

$(document).ready(function() {
    $("#showroom").on("click", "#DrawItem", function(){
        $("canvas").drawArc({
          fillStyle: "black",
          x: 100, y: 100,
          radius: 50
        });
    });
});

That will capture click events on #showroom and fire the event handler if the click originated from #DrawItem. This is event delegation and you can read more about it here...

http://api.jquery.com/on/

Reinstate Monica Cellio
  • 25,975
  • 6
  • 51
  • 67
  • Thanks! This works from the main page. Any idea why it won't work if it's on the remote page being loaded? – CIA Oct 02 '13 at 13:56
  • 1
    I'm assuming that on the remote page there's no element called `#showroom`, so no element to attach the event handler to. You could change it to `$(document)` instead. It's just better to attach the handler to the nearest static element. – Reinstate Monica Cellio Oct 02 '13 at 14:05