koder
June 30, 2016, 9:24am
1
I have radio button code below, when i clicked on that need to open fancybox modal window but while clicking it is saying ‘the requested content cannot be loaded’.
Radio button code:
<div class="" id="clickncollect_form">
<input type="radio" id="cncstoreloc" name="cncstoreloc">
<label for="cncstoreloc">Test</label>
<span id="radio_check" class="check"></span>
</div>
Content div to load in fancybox modal window:
<div style="display:none">
<div class="main-container" id="cnc">
<h1>CLICK & COLLECT</h1>
</div>
</div>
js
<script>
$(document).ready(function(){
$("#cncstoreloc").fancybox({
target: this,
href: '#cnc',
width: 1080,
height: 400,
autoSize: false,
autoCenter: true,
scrolling: 'auto',
titleShow: false,
title: null,
centerOnScroll: true,
margin: 0,
padding: 30,
//type: 'iframe'
afterShow: function(){
$('#quicksearch').on('click', function(){
$('#cncstorepane').css('display','block');
});
},
afterClose: function(){
$('#radio_check').removeClass('radio_chk');
}
}).on("click", function (evt) { $('#radio_check').addClass('radio_chk'); });
});
</script>
Does anyone have any idea instead of loading the content it’s throwing error.
Let’s load it up quickly in to jsfiddle, using jQuery and the fancybox CDN .
It seems to work at this jsfiddle test page .
let’s try locally instead.
<!DOCTYPE html>
<html>
<head>
<title>fancybox test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css">
</head>
<body>
<div class="" id="clickncollect_form">
<input type="radio" id="cncstoreloc" name="cncstoreloc">
<label for="cncstoreloc">Test</label>
<span id="radio_check" class="check"></span>
</div>
<div style="display:none">
<div class="main-container" id="cnc">
<h1>CLICK & COLLECT</h1>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<script>
$(document).ready(function () {
$("#cncstoreloc").fancybox({
target: this,
href: '#cnc',
width: 1080,
height: 400,
autoSize: false,
autoCenter: true,
scrolling: 'auto',
titleShow: false,
title: null,
centerOnScroll: true,
margin: 0,
padding: 30,
//type: 'iframe'
afterShow: function () {
$('#quicksearch').on('click', function () {
$('#cncstorepane').css('display', 'block');
});
},
afterClose: function () {
$('#radio_check').removeClass('radio_chk');
}
}).on("click", function (evt) {
$('#radio_check').addClass('radio_chk');
});
});
</script>
</body>
</html>
Yes, that works perfectly fine too.
The question from here is, what is it that you are doing wrong instead?
koder
July 1, 2016, 4:51am
4
@Paul_Wilkins : Thanks for reply.
After integrating the code into jsp, it’s not properly working, facing these types of problems and at the same time I have found one more workaround where i found it in blog while trying to load the div id in href attribute we should mention type:‘inline’ in fancybox js I am not sure whether it is correct or not but it’s worked for me
system
Closed
September 30, 2016, 11:51am
5
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.