The requested content cannot be loaded-fancybox - javascript

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'.
$(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');
});
});
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>
Does anyone have any idea instead of loading the content why it's throwing an error.

Related

How to prevent scrolling page up/ down when closing jQuery dialog?

I made a Shiny application and I'm using dialog (jQuery) for it.
The problem is that, when I close the dialog, the page goes to the top and I would like it to stay in the same position when I close the dialog.
The problem is that, when I close the dialog, the page goes up or down (as if it adjusted the screen position). I didn't want that to happen. I want the page to stay in the same position when I close the dialog.
When I open the dialog there are no problems, only when I close it.
My code:
<head>
<script src='https://code.jquery.com/ui/1.13.0/jquery-ui.js'></script>
<script>
$(function() {
$('#text1').hide();
$('#text1').dialog({
autoOpen: false
}, {
modal: true
}, {
title: 'Bird'
}, {
width: 50
}, {
resizable: false
}, {
show: 'explode',
hide: 'explode'
}, {
closeText: null
},
///background-color header
{
open: function() {
$('.ui-dialog-titlebar-close').hide();
}
}
).prev('.ui-dialog-titlebar').css({
'background-color': '#f8d40c',
'color': '#333333',
'text-align': 'center',
'display': 'block',
'margin': 'auto',
'border-radius': '5px',
'font-size': '25px'
});
///background-color body
$('#text1').css('background-color', '#e3d47f');
$('#click1').on('click', function() {
$('#text1').dialog('option', 'position', {
at: 'left top',
of: this // this refers to the cliked element
}).dialog('open');
return false;
});
$('body').on('click', '.ui-widget-overlay', function() {
$('#text1').dialog('close');
});
});
</script>
<style>
.class1 {
margin-bottom: 100px;
}
</style>
</head>
<body>
<p class='class1'>Point</p>
<p class='class1'>Point</p>
<p id="text1">Open dialog</p>
<p id="click1" class='class1' style='color:red'>Click here</p>
</body>
Shiny App is a SPA (Single Page Application).

jquery-ui: Dialog not opened at vertical center

I have a jquery ui dialog which is defined as this:
$('#processPosition').dialog({
autoOpen : false,
open: function ()
{
dialogProps.originalContent = $("#processPosition").html(),
dialogProps.type = $(this).data('type');
$('#' + dialogProps.type).appendTo($(this));
$('#rejectPosition').appendTo($(this));
$("#processPosition .template").removeClass("template");
},
show : "blind",
modal : true,
resizable : false,
scrollbar : false
});
This is how i open it:
$('#processOrderPosition').dialog({width: 800})
.dialog('option', 'position', 'center')
.dialog("open");
This is the only css of the template class:
.template
{
display: none;
}
Html template divs:
<div id="SAP-flst-Dialog" class="template">
<h4>Header</h4>
<div class="row">
<span>Some text</span>
</div>
</div>
<div id="rejectOrderPosition" class="template">
<h4>second Header</h4>
<span>Some more Text</span>
</div>
I also tried to set the position attribute after opening it, but with no effect. In the dev tools of my browser i can see, that a div is generated by jquery and this div has a wrong value for the css top attribute. The div has the following classes: ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable
What is causing the wrong top value?
https://jsfiddle.net/c85fo36u/6
$(document).ready(function(){
$('#processPosition').dialog({
autoOpen : false,
open: function ()
{
dialogProps.originalContent = $("#processPosition").html(),
dialogProps.type = $(this).data('type');
$('#' + dialogProps.type).appendTo($(this));
$('#rejectPosition').appendTo($(this));
$("#processPosition .template").removeClass("template");
},
show : "blind",
modal : true,
resizable : false,
scrollbar : false
});
$('#processPosition').dialog().dialog("open");
})
Look at this fiddle, i have added border to div to see that is centered.

jQuery Fancybox trigger not working properly

I am opening fancybox automatic when page load and for this, I am using trigger method with a hidden link inside the page, The problem is fancybox popup loading but its missing overlay, just that overlay is not opening.
I am using fancyBox v2.1.5
This is the code I am using
$(".login_signup_lb").fancybox({
maxWidth: 450,
autoSize: true,
fitToView: true,
openEffect: 'none',
closeEffect: 'none',
closeBtn: false,
helpers: {
overlay: {
css: {
'background': 'rgba(0, 0, 0, 0.6)'
}
}
}
}).trigger("click");
This is the html code which is hidden in the page
<a id="login_signup" class="login_signup_lb fancybox.ajax" href="fileurl.html" style="display:none;">
Lightbox
</a>
Try to trigger after creating fancybox
$(".fancybox.ajax").eq(0).trigger('click');
Here is jsfiddle

Sending the next element of the clicked button into jQuery UI dialog box

After trying to animate an element, when clicking on a button using this script:
$(document).ready(function()
{
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function()
{
// $(this).css('border', "solid 2px red");
// var divs = $("#div_one, #div_two, #div_three, #div_four, #div_five, #div_six, #div_seven, #div_eight, #div_nine, #dive_ten, #div_eleven, #div_twelve, #div_thirteen, #div_fourteen, #div_fifteen, #div_sixteen, #div_lone, #div_ltwo, #div_lthree, #div_lfour, #div_lfive, #div_lsix, #div_lseven, #div_leight, #div_lnine, #dive_lten, #div_leleven, #div_ltwelve, #div_lthirteen, #div_lfourteen, #div_lfifteen, #div_lsixteen");
// $(divs).siblings().slideToggle();
$(this).next().slideToggle();
$(this).siblings().slideToggle();
});
});
I've got some animation unwanted result. So I decided, instead of animating the next element of the clicked button, why I don't send the result into dialog bix using jQuery UI plugin. So I tried the following:
<script src="../include/jquery-1.12.1.min.js"></script>
<script src="../include/jquery-ui.min.js"></script>
<script src="../include/bootstrap.min.js" type="text/javascript"></script>
$(document).ready(function() {
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {
$(this).next().dialog({
autoOpen: false,
hide: "puff",
show: "slide",
width: 800,
modal: true
});
//$(this).dialog("open");
});
});
And here is the html code for only the first 2 buttons, because the cod is too long:
<div class="form-group col-md-12">
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button" />
<div id="div_one" class="collapse">3rd Molar:
<?php echo $resTeeth['one'] ?>
</div>
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="otwo" name="two" alt="button" />
<div id="div_two" class="collapse">
<?php echo $resTeeth['two'] ?>
</div>
So I had this error:
jquery-1.12.1.min.js:2 Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
How to fix this error, and is it possible to send the next() div element into dialog box using jQuery UI, or should I specify id for each div, and create a dialog script for each one of them ?
Your problem is, you're creating the dialog from the next div, but you're trying to open the dialog on the CURRENT div.
You can fix this pretty easy:
$(document).ready(function() {
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {
var dialog = $(this).next();
dialog.dialog({
autoOpen: false,
hide: "puff",
show: "slide",
width: 800,
modal: true
});
dialog.dialog("open");
});
});
I made the assumption you want the dialog to contain the contents of the next (following) div.
This would do that:
$(document).ready(function() {
var dialog = '<div class="mydialog" title="Basic dialog"><p class="dialogcontent">me</p></div>';
var newDiv = $(dialog);
newDiv.dialog({
autoOpen: false,
hide: "puff",
show: "slide",
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
$(".form-group").on('click', ".img1", function() {
var me = $(this);
newDiv.find('.dialogcontent').html(me.next('.collapse').html())
newDiv.dialog("open");
});
});
Example in action: https://jsfiddle.net/89pyhsuj/

Jquery Dialog - Reuseable on manyimages

I'm using the Jquery UI Dialog box to make a popup for images on my page.
Currently for each image, I'm using the following:
<script type="text/javascript">
$("#myImageInfo").dialog({
autoOpen: false,
draggable: false,
position: "center",
width: "300px",
modal: true,
title: "Image Title",
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$("#MyImageLink")
.click(function () {
$("#MyImageInfo").dialog("open");
});
</script>
My HTML,
<a id="MyImageLink" href="#">
<img src="blahblahblah.jpg"></a>
<div id="MyImage" title="Basic modal dialog">
<p><strong>Title Yah</strong></p>
<p>
<strong>Phone</strong>: ****<br />
<strong>Email</strong>:
</a>
</div>
My issue is I have about 10 of the pictures set up the same, each with thier uniqu ID's how can I use this script more efficiently so I only have to include it once? Thanks.
Id must be unique.But you can apply the same class name to more than one element.
You can give same class name to all those elements.and then use
$(".className").dialog({
autoOpen: false,
draggable: false,
position: "center",
width: "300px",
modal: true,
title: "Image Title",
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
Okay You must not put same id multiple elems at same page, ids must have to be unique either postfix some counter values like MyImageLink1, MyImageLink2, MyImageLink3 or better option is to change id to class this way:
<a class="MyImageLink" href="#"><img src="blahblahblah.jpg"></a>
<div class="MyImage" title="Basic modal dialog">
.......
</div>
Script:
<script type="text/javascript">
function dialg(e){
e.preventDefault();
$(".myImageInfo").dialog({
autoOpen: false,
draggable: false,
position: "center",
width: "300px",
modal: true,
title: "Image Title",
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
}
$(function(){
$(".MyImageLink").on('click', dialg);
});
</script>

Categories