Fancybox works just once - javascript

I working in code where they use fancybox to bring up a form.
It works just as it should at first time, in second time, the background site dispose ( because of the applied theme ), but the Fancybox does not load.
This code is used to initialize the Fancybox.
$(document).ready(function() {
$(".fancybox").fancybox({
type: 'ajax',
onCleanup: function() {
var myContent = this.href;
$(myContent).unwrap();
console.log("Element was clean");
}
});
});
I did add this console.log to check when onCleanup is been called, but it never does.

Related

Jquery LazyLoad not working on ajax generated images and outputted in tabs

I am using http://www.appelsiini.net/projects/lazyload but it is not working for an image result tabs that is generated by php loop and outputted using jquery ajax serializearray on bootstrap tabs. So I tried to put these codes in ajax success function and together with the output as but nothing worked.
$("#container").one("click", function() {
$("#container").load("images.html", function(response, status, xhr) {
$("img.lazy").lazyload();
});
});
Source: http://www.appelsiini.net/projects/lazyload/enabled_ajax.html
$("img.lazy").lazyload({
effect: "fadeIn"
}).removeClass("lazy");
$(document).ajaxStop(function(){
$("img.lazy").lazyload({
effect: "fadeIn"
}).removeClass("lazy");
});
Source: Binding image lazy loading to new images inserted after ajax request
Thanks for the help!
Update
Part of the problem is found by setting the container. This code is added in ajax success function.
$("img.lazy").lazyload({
threshold : 100,
effect : "fadeIn",
container: $(".resulttab, .resulttab2")
});
$('.resulttab, .resulttab2').trigger('scroll');
Then this one is added in document ready function.
$(document).ready(function(){
$("img.lazy").lazyload({
effect: "fadeIn"
}).removeClass("lazy");
})
Now the remaining problem is, the images in the other tab. The images don't load unless I scroll the page. I tried to trigger scroll when the tab is clicked but it didn't work. This is what I tried but both didn't work.
//Attempt one
$( "#display" ).on( "tabsbeforeload", function( event, ui ) {
$('.resulttab').trigger('scroll');
})
//Attempt two
function triggerscroll() {
$('.resulttab').trigger('scroll');
}

jQuery Mobile page loads, but buttons doesn't works

I've solved my last issue in this topic: jQuery on second click doesn't work - mobile
I have two pages, index.php and add.php.
From index.php I call the page add.php this way:
$(document).on('pagebeforeshow', '#page-index', function(){
$('#openAdd').bind('click',function(){
$.mobile.changePage('add.php');
});
});
I have several buttons on the page add.php that work, but if I hit the button "openAdd" from the page Index which opens the page add, every single button on the page add stops working. I get no errors, no messages, nothing, simply it doesn't perform any action.
If I type in the browser the URL directly to mywebsite.com/add.php they work.
This is what I've tried so far without any success:
<input type="button" id="clients-btn" value="Clients" data-role="none"/>
$("clients-btn").on("click", function(){
console.log("hit!!!!");
});
$(document).on('pagebeforeshow', '#page-add', function(){
$('#clients-btn').bind('click',function(){
console.log("hit!!!!");
});
});
Solved.
All you have to do is, on the second page (in my case add.php), put the following:
$('#page-add').on("pageinit", function () {
$('#clients-btn').one('click', function () {
console.log('button clicked!!');
});
});
Edit: actually not working.
Wrap your whole code in pagecreate
$( document ).on( "pagecreate", "#page-add", function( event ) {
$('#page-add').on("pageinit", function () {
$('#clients-btn').bind('click',function(){
console.log("hit!!!!");
});
});
});
And try adding code called at the end of page

How to open a magnific popup on page load?

I'm using Magnific Popup and I would like to have a video come up as soon as the page loads in a popup.
I got the plugin to work fine, but I have no idea on how to get it to pop up as soon as the page loads, without clicking on the thumbnail.
I looked around for a solution, but I did not manage to get it to work.
If you're using jQuery you could just listen for the window load event and then call the open method for your Magnific Popup like so:
(function($) {
$(window).load(function () {
// retrieved this line of code from http://dimsemenov.com/plugins/magnific-popup/documentation.html#api
$.magnificPopup.open({
items: {
src: 'someimage.jpg'
},
type: 'image'
// You may add options here, they're exactly the same as for $.fn.magnificPopup call
// Note that some settings that rely on click event (like disableOn or midClick) will not work here
}, 0);
});
})(jQuery);
I was able to get a timed modal working using jquery's setTimeout function, Just wrap .magificpopup in the settimeout function to set a delay. Change the value of 5000 (5 seconds) to whatever value you want.
See below:
$(document).ready(function () {
setTimeout(function() {
if ($('#myModal').length) {
$.magnificPopup.open({
items: {
src: '#myModal'
},
type: 'inline'
});
}
}, 5000);
});

jQuery Mobile $.mobile.changePage()

I have a problem regarding $.mobile.changePage(); I have this select control that serves as a Jump To Page controller. The code is written below:
$( document ).one( "pagechange", function() {
$("#jumptopage").bind("change", function(){
var val = $(this).val();
$.mobile.changePage( "http://localhost/mchild/dashboard/videos/all/20/" + val, {reloadPage : "true",transition: "fade", allowSamePageTransition : "true"} );
return false;
});
});
Now this code works the first time; but as I jump to another page it causes jQuery Mobile to jitter back and forth to current page and previous page that was loaded before, or in other cases the bind() wont work anymore.
I tried to log the activity by adding
console.log('i was triggered')
inside the $( document ).one().... right after the bind statement and it still fires except for the bind.
I'm not sure if I did something wrong... please help...

jQuery inside fancy box ajax not working -- init problems

This is my code to open a Fancybox that loads a page via ajax:
$('tr.record').click(function() {
var record_id = $(this).attr("id");
var link = 'http://' + window.location.hostname + '/expenses/expenses_edit/' + record_id;
$.fancybox({
'transitionIn': 'fade',
'transitionOut': 'none',
'type': 'ajax',
'href': link,
'onClosed': function() {
parent.location.reload(true);
}
});
$.bind("submit", function() {
$.fancybox.showActivity();
$.ajax({
type: "POST",
cache: false,
data: $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});
return false;
});
});
The page inside the fancybox has a form including a text field with char counter:
<form>
...
<textarea name="exp_det" cols="90" rows="12" id="exp_det"></textarea>
<span id="charLeft">150</span> characters left
</form>
The parent page loads this via header:
$('#ext_det').keyup(function() {
var len = this.value.length;
if (len >= 150) {
this.value = this.value.substring(0, 150);
}
$('#charLeft').text(150 - len);
});
So the issue is that this char counter (and other jQuery stuff like validation, datepicker) don't work inside the Fancybox. They do work if the page is loaded without Fancybox, or if it is loaded via Fancybox as inline.
I understand this seems to be a reasonably common question, but I tried all solutions and none worked for me.
I've tried
using diferent IDs for the ajax page
placing the char count script at the end of ajax page (it didn't even show
on Firebug)
placing the char count script as a function within success
other crazy iterations
The problem seems related to re-init'ing the jQuery functions after the ajax page has loaded, since these elements were not there when the parent page was loaded.
Any suggestions?
You need to either rebind your event handlers once you have loaded content inside the fancy box or use the JQuery.live event binding mechansim. Your problem is occuring because your event handlers are trying to bind to DOM nodes that are not yet loaded, so what you need to do is either use the JQuery.live, which will bind events to elements even when they have not yet loaded OR use a callback function when your content of your fancybox has loaded to bind the event handlers.
$(document).ready(function() {
$('#ext_det').live('keyup', function() {
// code to execute on keyup for element with id #ext_det
});
});

Categories