CODEWITHSUNDEEP
javascriptjquery
mToce
mToce

Reputation: 302

.load() is not pulling in content from html file

I have been using the jQuery Docs and I am trying to set up a situation where the content of a modal is filled from a separate html file. All files are on the same domain, same folder. So far, the modal will launch on click, but no content is being pulled in from the html file. I'm using Zurb reveal for modal.

jQuery:

$('.video-btn').click(function (e) {
    e.preventDefault();
    var modalUrl = $(this).attr('href');
    $('#myModal').load('modalUrl #vidModal').reveal({
        animationspeed: 500,
        animation: 'fadeAndPop',
        dismissmodalclass: 'close-reveal-modal'
    });

    //$('.video-wrapper').children().show();
});

The Link

<a href="modal1.html" class="info-btn video-btn">
     <h2>Video</h2>
     <p>Cambridge at a glance</p>
</a>

/*Outer modal hidden on page*/
<div id="myModal" class="reveal-modal"></div>/*Content that is in a file named modal1.html*/
<div id="vidModal" class="reveal-modal">
    <div class="inner-modal">
        <div class="modal-head">
            <h2>Video</h2>
            <p>Cambridge at a glance</p>
            <a class="close-reveal-modal"></a>
        </div>
        <div class="modal-share-btns"></div>
        <div class="video-wrapper">
            <iframe id="vid" src="http://player.vimeo.com/video/20800836?api=1" width="700" height="400" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
        </div>
    </div>
    <!-- /inner-modal -->
</div>

Upvotes: 0

Views: 161

Answers (2)

t.niese
t.niese

Reputation: 40842

your code should look like this:

$('#myModal').load(modalUrl+ ' #vidModal')

in your code you load the url modalUrl #vidModal and not the url stored in modalUrl concatenated with #vidModal

(Updated base on comments)

Upvotes: 2

Kenny Ki
Kenny Ki

Reputation: 3430

The problem:

$('#myModal').load('modalUrl #vidModal')

modalURl is being included as part of the string literal.

You should do:

$('#myModal').load(modalUrl + ' #vidModal')

Upvotes: 1

Related Questions