CODEWITHSUNDEEP
javascriptjquerydocument-ready
Ionko Gueorguiev
Ionko Gueorguiev

Reputation: 312

calling an external script and .load jquery conflict

I'm pretty sure this is another DOH! facepalm questions but as designer and not a programmer I need some help getting it right.

What I have is an index file calling local .html files via jQuery .load. Just like this: (some tabs functionality not relative here - thus the link target call)

<a href="#lightbox">Lightbox</a></li>

<div id=lightbox">
   <div class="load">
        <script type="text/javascript">
            $('.load').load('examples/lightbox.html');
        </script>
   </div>
</div>

I also have an external .js file that has a bunch of functions that handles some lightboxes among other things. Standard <script src="js/typography.js" type="text/javascript"></script> Which contains:

$(document).ready(function(){
    $(".open-lightbox").on("click", function(){
        $('.lightbox').css('display','block');
    });
    $('.close-lightbox').click(function(){
        $('.lightbox').css('display','none');
    });
});

My problem is that if the externally called .html file has any elements dependent on the .js file ie. the lightbox popup it doesn't work.

something like :

<a href="#" class="open-lightbox">LightBox Link</a>

<div class="lightbox">
   lightbox content
   <a href="#" class="close-lightbox">Close</a>
</div>

If i move the html code right to the index page instead of the .load, no problem, same if I moved the JS as an inline <script>...</script> rather than calling it extrenally. Works fine in both cases.

My spidey sense tells me this has something to do with my function and .load not executing in the order I need them to, but my javascript copy/paste skills only go this far.

Can anyone tell me if I can make this combination work? I'd really appreciate it.

EDIT

Maybe I explained my self poorly so let me try and post a better example. If my index code is as followed everything works: My lightbox pops up as intended.

<li><a href="#thistabid">Link to open Tab Content</a></li>

<div id="thistabid">
    <--Tab Content below-->
        <div class="somehtmlpage-load">
            <a href="#" class="open-lightbox">LightBox Link</a>

            <div class="lightbox">
                lightbox content
                <a href="#" class="close-lightbox">Close</a>
            </div>
        </div>
    <--End Tab Content-->   
</div>

When the said tab is clicked the content inside "thistabid" show up. Whatever that content may be.

Now if i do :

<li><a href="#thistabid">Link to open Tab Content</a></li>

<div id="thistabid">
    <--Tab Content below-->
        <div class="somehtmlpage-load">
            <script type="text/javascript">
                $('.somehtmlpage-load').load('examples/lightbox.html');
            </script>
        </div>
    <--End Tab Content-->   
</div>

The lightbox doesn't work. The content of lightbox.html is

<a href="#" class="open-lightbox">LightBox Link</a>

<div class="lightbox">
    lightbox content
    <a href="#" class="close-lightbox">Close</a>
</div>

Same as the html in the 1st example where everything works. The only difference it's being jQuery loaded rather than hard coded.

What I mean by "if the externally called .html file has any elements dependent on the .js file ie. the lightbox popup" is that if the html is part of the externally called file then the lightbox function isn't working. If it's hard coded it pops up like intended.

On 1st glance the .on seems like should be the solution but most likley my implementation of it is off the mark :/

Upvotes: 1

Views: 1540

Answers (3)

Ionko Gueorguiev
Ionko Gueorguiev

Reputation: 312

Using a SSI solved my problem. I was trying to keep it all Local Drive friendly but it seemed to be causing more problems than anticipated.

Pick your favorite dev environment...I didn't run into any conflicts on either.

ASP - <!--#include file = "examples/lightbox.html" -->

PHP - <?php include 'examples/lightbox.html';?>

Just in case someone else runs into a similar problem.

Upvotes: 0

Christophe
Christophe

Reputation: 28114

There seems to be a race condition between your load() and document ready.

To address this you'll need to:

  • either wait for the load() to complete before you attach the click events
  • or attach the click to the container of your load() step and use event delegation.

See this page and this other one for more information on how to use on() for delegation.

The code would look like this:

$(".somehtmlpage-load").on("click", ".open-lightbox", function(){
 $('.lightbox').css('display','block');
});

Upvotes: 1

walmik
walmik

Reputation: 1452

The 'on' or the 'live' function needs to be applied through an element that exists on the page. Generally some parent of the actual element is used. Can you try something on the following lines with the correct references to the elements on your page:

<li><a href="#thistabid">Link to open Tab Content</a></li>
<div id="thistabid">
  <--Tab Content below-->
  <div class="somehtmlpage-load">
       <!--leave tab empty for now -->          
   </div>
   <--End Tab Content-->   
</div>

<script>
(function(){
  $('.somehtmlpage-load').load('examples/lightbox.html');

  //live or on needs to be applied to an element that exists on th page
  $('#thistabid').on('click', '.open-lightbox', function(){
     $('.lightbox').css('display','block');
  });

  $('#thistabid').on('click', '.close-lightbox', function(){
     $('.lightbox').css('display','none');
  });
})();
</script>

Upvotes: 1

Related Questions