fancybox not loading external URL
Question
I'm trying fancybox for the first time, I want to load the contents from an external html file. What happens though, is the ajax call ends up loading my entire index.html file into the fancybox window, not the much smaller html table I want to see loaded. Here's the html where I set it up:
<div class="card bg-light">
<img class="card-img img-fluid" src="/assets/O-Ride-Entry.jpg" alt="Card image">
<div class="card-body">
<h5 class="card-title text-center" >Cadet Programs</h5>
<p>blah blah blah
</p>
</div>
<div id="cadetPgmContainer"></div>
<div class="card-footer bg-transparent ">
<a href="#" class="btn btn-primary" id="cadetPgmsCard">Learn More</a>
</div>
</div> <!-- card -->
and here is the javascript that is called when the user clicks 'Learn More':
$('#cadetPgmsCard').click( function() {
var href= '/static/cadetPgms.html';
console.log('going to open fancybox with ', href);
$.fancybox.open({
width: 400,
height: 400,
autosize: true,
href: href,
type: 'ajax'
});
console.log('back from fancybox');
});
I've even simplified the html file to:
<p>this is from cadetPgms.html</p>
But here is a screen shot of what actually happens:
It reloads the entire main page back into the fancybox. I stepped thru into the debugger right where ajax is called in fancybox.js, and the right URL is there in the options. What else can I try?
Thanks...
2 answers
solution1
0 2018-04-18 05:27:00
It looks like you are loading entire webpage into fancybox, and most likely the responsone of your .html file contains superfluous tags including <html> , <head> , etc. And that is not correct. ,
In such case, you have two options:
1) Filter your content using filter option so that only the content is displayed
2) Load file that contains plain data or use preprocessor like PHP to return correct content when loaded using ajax
solution2
0 2018-05-12 22:08:00
I ended up not using js to load the fancybox content, and set it up in the main html file and invoked fancybox from there instead. Then I got everything to work fine.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.