FancyBox the requested content cannot be loaded. please try again later

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?

@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 :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.