fancybox undefined in afterShow click event - javascript

I have the following code that I call on page load:
$('#postcodes-link').fancybox({
type: 'ajax',
minWidth: 800,
minHeight: 400,
afterShow: function () {
$('table.data-table > tbody > tr').on('click', function () {
$.fancybox.close();
});
}
});
Now this works fine to open the fancybox (fiddle example), but when I click on the row, it doesn't close the fancybox and just throws the following error:
Uncaught TypeError: Cannot read property 'close' of undefined
yet if I make the above into a jQuery function:
(function ($) {
$.fn.setUp = function () {
return $(this).each(function () {
$(this).fancybox({
type: 'ajax',
minWidth: 800,
minHeight: 400,
afterShow: function () {
$('table.data-table > tbody > tr').on('click', function () {
$.fancybox.close();
});
}
});
});
};
})(jQuery);
and call the following in the same place as I called the top code
$('#postcodes-link').setUp();
The fancybox will now close (fiddle example). My question is why does the first one not work whereas the second one does, and how can I make the first one work? I figure it is something to do with the scope of fancybox but then I would have expected the second one not to work as it is wrapped inside a further function
Please note I have tried various version of trying to close the fancybox:
$.fn.fancybox.close()
jQuery.fancybox.close()
parent.$.fn.fancybox.close()
$('.fancybox-close').trigger('click') //tried this one as a dirty hack but didn't work either

Ok, so I found out what the problem was when trying to get the fiddle to replicate the error:
On the table page, I was using the jQuery data-table plugin so I included all the scripts need to load that. As I was ajax loading the page into the modal, it meant jQuery was being loaded for a second time on the current page. This caused the error I was seeing.
Removing the jquery script made the fancybox work as I wanted or another workaround (if you want the target page to still work if it is not opened in a modal - eg if you have other links to that page) then you will have to use a fancybox iframe instead of the fancybox ajax modal

Related

JS plug-in breaks other scripts when not required on page

I'm using a plug-in for my responsive navigation (http://responsive-nav.com). The plug-in works great, the problem I'm having is there is not navigation on every page. When this is the case I've noticed other javascript doesn't load and I get an error in reference to "responsive-nav.js":
Uncaught Error: The nav element you are trying to select doesn't exist
Here's how I load the script in the main.js file.
$(function(){
var navigation = responsiveNav(".site-nav__list", {
customToggle: "#site-nav__toggle",
open: function(){
$("#site-nav__toggle").addClass('open');
},
close: function(){
$("#site-nav__toggle").removeClass('open');
}
});
});;
The file is called on each page (/js/responsive-nav.js) but removing it doesn't resolve the issue, commenting out the code I've typed above does - so I'm guessing it's something to do with that?
Hope someone can help, cheers!
After speaking with the author of the plug-in he advised I just wrap the script in an 'if statement'.
Here's what we ending up using:
$(function(){
if ($(".site-nav__list").length) {
var navigation = responsiveNav(".site-nav__list", {
customToggle: "#site-nav__toggle",
open: function(){
$("#site-nav__toggle").addClass('open');
},
close: function(){
$("#site-nav__toggle").removeClass('open');
}
});
}
});
Simple. Works like a charm :)

jQuery - bxSlider plugin reloadSlider issues

I'm using jQuery with the bxSlider plugin, here is the link to it just incase: http://bxslider.com/
I'm trying to reload the slider and my custom pager after I've removed certain slides from it.
Here is what I have tried:
$(function() {
var slider = $('#slider').bxSlider({
pagerCustom: '#bx-pager'
});
$('.list').on('click', '.delete', function() {
image = $(this).closest('li').find('[type="hidden"]');
// image.attr('id') contains a string: image-0, image-1, image-2, etc.
$('#slider, #bx-pager').find('.' + image.attr('id')).remove();
slider.reloadSlider({
pagerCustom: '#bx-pager'
}); // I have also tried: slider.reloadSlider();
});
});
It works partially. What happens is the slider gets reloaded just fine but it removes the pager completely when it runs the reload.
Thank you very much for any help.
As long as I see, this is a bug in bxSlider, in fact, when you call the reloadSlider method, internally are called the methods destroySlider and init.
In the destroySlider method the pagerEl element is destroyed, this is right if you are not using a custom one, because it is recreated programmatically in the init method, but if you are using a custom one it can't be recreated programmatically.
I ended up modifying the destroySlider method to check if a custom pager is used, in this case it must not be deleted.
Here is the before (line 1294):
if(slider.pagerEl) slider.pagerEl.remove();
And after:
if (slider.settings.pagerCustom === '') {
if(slider.pagerEl) slider.pagerEl.remove();
}
I'll post the bug on GitHub as soon as I have the time.

How do I put a jQuery datepicker in a SimpleModal dialog that its data comes from an ajax call?

I have a modal window appearing using SimpleModal with a jQuery datepicker attached to the textfield licenseExpiry. licenseExpiry is defined within the contents of the ajax call (SchoolDetails.php). However, when I click on the text box, nothing happens. I know that the callback is occurring because the console displays "opened", and the licenseExpiry object definitely exists in the DOM.
function SchoolDetails()
{
$.ajax({url:'SchoolDetails.php', success: function(data)
{
$('#admin-modal-content').html(data);
$('#admin-modal-content').modal({
onShow : function() {
console.log("opened");
$( "#licenseExpiry" ).datepicker();
},
containerCss: {
width: 500,
height: 400
}});
}});
return false;
}
What am I doing wrong?
EDIT: I tried putting the function in the onShow callback in an onOpen callback and in SchoolDetails.php, that also doesn't work.
Changing the version of jquery-ui I was using from 1.9.2 to 1.10.3 fixed the issue for me. I left the rest of the code as is.

Form Has No Javascript Functionality When Displayed In Colorbox

I have a form with drop-down hierarchical fields with functionality derived from a JavaScript plugin called mcDropdown jQuery Plug-in.
The actual form is on a secondary page (Test.php) and set up to display on the main page through a Colorbox popup with the results also displayed in the Colorbox upon form submission.
The form submits and displays correctly in the Colorbox in its native HTML format when the JavaScript is removed (i.e. just using plain drop-down boxes).
However, when the Javascript is implemented in the form allowing the hierarchial drop-down structure of the fields there is no JS functionality when rendered through Colorbox.
Since the actual page that the form is on (Test.php) works fine by itself with the Javascript, there appears to be some issue rendering the JS through the Colorbox.
My research has indicated that this may be due to trying to access an element before it has been loaded into the document.
The Colorbox website states that this can be resolved by moving the JavaScript into ColorBox's onComplete callback; however, even with the example given, I cannot figure out how to do this correctly as I am a complete novice when it comes to JS.
Here is the drop-down script on the secondary page that has the form and ties into the external plugin (note that there are three fields in this form that use this JS hierarchical configuration):
<script type="text/javascript">
$(document).ready(function (){
$("#category").mcDropdown("#categorymenu",
{
targetColumnSize: 3,
}
);
$("#category1").mcDropdown("#categorymenu1",
{
targetColumnSize: 3,
}
);
$("#category2").mcDropdown("#categorymenu2",
{
targetColumnSize: 3,
}
);
});
</script>
Here is the Colorbox script on the main page that opens the secondary page in the Colorbox window:
<script type="text/javascript"> <!--<Check-Out Colorbox Script>-->
jQuery(function(){
jQuery('#link_content').colorbox({opacity:0.3, height:"100%", scrolling: false, onComplete: function(){
link_content_submit();
}});
});
function link_content_submit()
{
jQuery("#pre-process").submit(function(){
jQuery.post(
jQuery(this).attr('action'),
jQuery(this).serialize(),
function(data){
jQuery().colorbox({html: data, onComplete: function(){
link_content_submit();
}});
}
);
return false;
});
}
</script>
The three external files are: jquery.mcdropdown.js, jquery-1.2.6.min.js and jquery.bgiframe.js.
How can this Colorbox script on the main page be modified so the JS functionality of the form is preserved when displayed through Colorbox?
Thank you in advance for any detailed answers for this beginner.
Here is the answer:
<script type="text/javascript"> <!--<Check-Out Colorbox Script>-->
jQuery(function(){
jQuery('#link_content').colorbox({opacity:0.3, height:"100%", scrolling: false, onComplete: function(){
link_content_submit(), $('#category').mcDropdown('#categorymenu'),$('#category1').mcDropdown('#categorymenu1'),$('#category2').mcDropdown('#categorymenu2');
}});
});
function link_content_submit()
{
jQuery("#pre-process").submit(function(){
jQuery.post(
jQuery(this).attr('action'),
jQuery(this).serialize(),
function(data){
jQuery().colorbox({html: data, onComplete: function(){
link_content_submit();
}});
}
);
return false;
});
}
</script>
The respective JavaScript functions for each drop-down box in the JS form are integrated into the Colorbox onComplete: function() so each of these form elements is loaded before it is accessed through Colorbox.

ColorBox Onclose function not working

I am trying to open a new colorbox window when one is closed.
I'm using this code:
$(".inline").colorbox({
inline: true,
width: "50%",
escKey: false,
onClose: function() {
$('#newWindow').show();
}
If there anything wrong with this code?
Description
Assuming your using jack moore's colorbox jQuery plugin you have to change onClose to onClosed and use open:true.
And you always have to close the function.
Check out the jsFiddle Demonstration.
Sample
Html
<div class="firstColorBox">first</div>
<div class="secondColorBox">second</div>
jQuery
$(".firstColorBox").colorbox({
inline:true,
width:"50%",
escKey:false,
onClosed:function(){
// open the other colorBox
$(".secondColorBox").colorbox({
inline:true,
width:"50%",
escKey:false,
open:true
});
}
});
More Information
jsFiddle Demonstration
jack moore's colorbox jQuery plugin
Update
'onClose' should be 'onClosed'
See the reference here: http://jacklmoore.com/colorbox/
I recommend use the event handlers that come with colorbox:
$(document).one('cbox_closed', function () {
$(".secondColorBox").colorbox({...});
}
This will allow the javascript on the page to run. I was having issues running tags on the second popup and this solved the issue.
The function one will only trigger the event once so you can close the second popup.

Categories

Resources