I have a Fancybox (or more accurately) a number of fancy boxes on an asp.net page.
My Fancybox (jquery plugin) works fine until a postback occurs on the page then it refuses to work.
Any thoughts? Anyone experienced similar behaviour?
UPDATE : Some Code..
I have a databound repeater with a fancybox on each repeating item.
They are instanciated by (outside the repeater)
$(document).ready(function() {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
});
The anchor tag is repeated..
href="#watchvideo_<%#Eval("VideoId")%>"
As is a div with
id="watchvideo_<%#Eval("VideoId") %>
As is a script element that instanciates the flash movies
Yes the VideoIds are being output the the page.
UPDATE : It's not a problem with the flash..
It is not a problem with the flash as i've tried it without the flash, it wont even pop a window with a simple message in.
UPDATE : I wonder if it is the updatepanel.
Rebinding events in jQuery after Ajax update (updatepanel)
-- lee
The problem is in using $(document).ready() to bind the fancybox. This code is only executed once, when the page is originally loaded. If you want the fancybox functionality on every postback, synchronous or asynchronous, replace the $(document).ready() with pageLoad(sender, args). i.e.
function pageLoad(sender, args) {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
}
see this answer for more info
Could it be that the instantiating code is being inserted at a piece of code which is not run after a postback?
It was the Update panel as described
here.. Rebinding events in jQuery after Ajax update (updatepanel)
As suggested I simply replaced
$(document).ready(function() {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
});
with
function pageLoad(sender, args)
{
if(args.get_isPartialLoad())
{
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
}
}
and it worked!
-- Lee
This might help someone else, but FancyBox appends it's code to the <body> element... which is all fine and well, but resides OUTSIDE the asp.net <form> element. My postback problems went away when I modified FancyBox to append its dom objects to the <form> element:
$('body form:first').append( ... );
I had a similar problem with a paged grid-view. The first page of the grid was launching the fancybox while the remaing did not.
I thought it could be an issue related to the UpdatePanel which refreshes only a portion of the screen.
I solved the issue replacing this:
<script>
$(document).ready(function () {
$("a.small").fancybox();
});
</script>
with this:
<script>
function pageLoad(sender, args) {
$("a.small").fancybox();
};
</script>
Related
I am using a jQuery pop-up script Magnific Popup. It works well in a WooCommerce store but when I filter products using an Ajax Filter Plugin (YITH) it stops triggering. I understand this is because Ajax has changed the page and so the event is no longer bound to the link class in the page but not sure how to solve it.
From what I have read I can use on but I am unsure how this applies to the way I am triggering the Magnific Popup script which is below.
jQuery('.product').magnificPopup({
type:'inline',
midClick: true,
gallery:{
enabled:false
},
delegate: 'a.wpb_wl_preview',
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: false,
});
Thank you all. I have found there is a jQuery function to detect when Ajax has been executed which is below. Not sure if this is the best method, so interested to see other answers but this works.
jQuery(document).ajaxSuccess(function() {
//code to trigger here
});
In given below link when we refresh our page it briefly shows the expanded version before it collapses on its own. Is there a way to have it immediately be collapsed?
http://new.cgwealth.com/staff
Below are JS Code links:
http://new.cgwealth.com/pages/js/jquery-1.7.2.min.js
http://new.cgwealth.com/pages/js/accordion-jquery-ui.min.js
<script type="text/Javascript">
$(document).ready(function () {
$(".accordion").accordion({
autoHeight: false,
navigation: false,
collapsible: true,
clearStyle: true
});
});
</script>
CSS link: http://new.cgwealth.com/pages/pages/css/accordion.css
So i want to hide all the data until my accordion functionality works.
Thanks in advance
i had the same question in my last project, but i have no idea about that. Then i use a very ugly method to fix this. When i load data from my server, i add class named 'hidden'(css:display:none), and it had a effort that all data, just like text or images, all hide. And after all data loaded, i call jquery function accordion and remove class 'hidden'.
So i use this method to fix. Maybe it is valid for you.
You have to hide the content through css, and then enable the content to be show via javascript. Here is one working copy
http://jsfiddle.net/aneeshrajvj/FcHEC/
I've searched high and low through this forum and thus far I don't see an answer. And, I think I beginning to lose my mind.
Could be I'm just missing it as I am NOT a programmer.
I am a visual designer that can usually install pre written code without to much
difficulty. And, indeed I have installed FancyBox and have it working well
except for one small problem which I desperately need help with.
I am working with a dynamically generated page written in ColdFusion.
Three divs on the page contain FancyBox links that open editing screens.
Once editing is complete and the user closes the FancyBox modal the changes
need to be reflected on the parent page.
Right, so I was able to find a solution that refreshes the entire page
'onClosed': function() {
parent.location.reload(true); }
});
How, oh how can I get just a single div to refresh "onClosed" as
apposed to the entire page??????
There a a couple of ways to do that.
One way is to get the content of the div with a function. This function will preform an ajax-call to get the content, say the function is called getcontent(); your syntax will be something like onClosed': function() { getcontent(); }
A better way to do this is to get the edited content and push this in the div. say you set a variable text with the content after the save of the editor, after that you can push this variable into the div with onClosed': function() { $('#divid').html(yourvar); }
I must say both ways are not easy to implement. Maybe if you show the code you currently having we can help you some more.
Right on Tim, well Fancybox uses jquery and loads it's own "library".
Each link that invokes fancybox has an id which is referred to like thus
<script type="text/javascript">
$(document).ready(function() {
$("#link1").fancybox({
'titleShow' : false,
'width' : '80%',
'height' : '80%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe',
'onClosed': function() {
parent.location.reload(true); }
});
});
</script>
This my javascript :-
<script type ="text/javascript">
$(function()
{
$("#tabs").tabs({ cache: true ,fx: { opacity: 'toggle' }});
});
</script>
And this is my html which loads php file using ajax :-
<ul>
<li>General</li>
<li>Messages</li>
<li>Pics</li>
<li>Facilities</li>
</ul>
The question i want to know is when Messages.php is loaded does the javascript onload event fire? I want to know because i want to take my textarea and convert it into editor. However i am not able to capture window.onload event :-
window.onload = function(){
alert('hello');
}
and further if i write something in :-
$(function(){
}
It works in Opera and IE but sometimes doesn't work sometimes. To sum, how do i capture window.onload in the above situation?
EDIT
Looks like $(function(){ } seems to be working, the problem is with fx: { opacity: 'toggle' }. When i remove effect, it works fine.
Thanks in advance :)
The window.onload event will not fire, in the document you're loading into it already fired earlier.
You should be able to use document.ready, e.g. $(function() { }); in the page you're fetching and it work, provided you're on at least jQuery 1.4.2+. Several issues were fixed with events in the 1.4.2 release, including one around this being inconsistent, if you're using 1.4.1 or below, I can't promise it being 100% consistent.
Alternatively, you can have the code in the main page instead of inside Messages.php and run the code in the load event of the tabs, like this:
$("#tabs").bind("tabsload", function(event, ui) {
$('.myEditorClass', ui.panel).myEditorPlugin();
});
I've noticed in some browsers that if you use display:none it won't render anything inside that tag, it just ignores whatever's in there because it's not being displayed. I'm not sure if that fx setting is using .hide(), but that could part of the issue.
Also why not set up a function on the loaded pages called "init", then have ajax do a callback to trigger it?
Hi all i want to be able to close fancyBox when it is open from within.
I have tried the following but to no avail:
function closeFancyBox(html){
var re = /.*Element insert complete!.*/gi;
if( html.search( re ) == 0 ){
$.fancybox.close();
//alert("foo");
}
}
foo will open in dialog but will not close down. any hints?
Try this:
parent.$.fancybox.close();
See Fancybox API documentation.
According to http://fancybox.net/faq
How can I close FancyBox from other element? ?
Just call $.fn.fancybox.close() on
your onClick event
So you should just be able to add in the fn.
If you just want to close the fancy box it is sufficient to close it.
$('#inline').click(function(){
$.fancybox.close();
});
It is no use putting the .fn, it will reffers to the prototype.
What you need to do is $.fancybox.close();
The thing is that you are maybe experiencing another error from js.
There are any errors on screen?
Is your fancybox and jquery the latest releases?
jquery is currently in 1.4.1 and fb in 1.3 something
Experiment putting a link inside the fancybox and put that function in it.
You probably had read that, but in any case,
http://fancybox.net/api
One thing that you probably might need to do is isolate each part in order to realize what it is.
You can even close fancybox by get close button id and call click event on that id.
<input type='button' value='Cancel' onclick='javascript:document.getElementById("fancybox-close").click();' />
It works for me!
i had the same issues a longtime then i got the solution by the below code.
please use
parent.jQuery.fancybox.close()
Bit of an old thread but ...
Actually, I suspect that the answer to the original question about how to close the window from within the window has more to do with the fact that the click event is not attached to the element. If the click event is attached in document.ready the event will not be attached when fancybox creates the new window.
You need to re-apply the click event once the new window . Probably the easiest way to do this is to use onComplete feature.
This works for me:
$(".popup").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 400,
'overlayShow' : true,
'overlayColor' : '#000022',
'overlayOpacity' : 0.8,
'onComplete' : function(){$('.closer').click(function(){parent.$.fancybox.close();})}
});
Actually, after a bit of thought 'live' rather than 'click' or 'bind' might work just as well.
Use this to close it instead:
$.fn.fancybox.close();
Judging from the fancybox source code, that is how they handle closing it internally.
After struggling myself with this I found a solution that works just replace the $ with jQueryjQuery.fancybox.close() and I made it an inline script on an onClick. Going to check if i can call it from the parent
For those who spent hours like me to find out the solution for inline type: window.setTimeout(function(){$.fancybox.close()},10);
I ended up using:
<script>parent.$("#fancy_close").click();</script>
I guess the version of fancybox we have doesn't have a $.fancybox.close() function for me to call :(
FYI, I just wanted the page to close the fancybox, as it had finished its processing in PHP.
Add $.fancybox.close() to where ever you want it to be trigged, in a function or a callback, end of an ajax call!
Woohoo.
Within an iframe use - parent.$.fancybox.close();
to close fancybox by funciton its necessary to make setTimtout to the function that will close the fancybox
Fancybox needs some time to acept the close function
If you call the function directly will not work
function close_fancybox(){
$.fancybox.close();
}
setTimeout(close_fancybox, 50);
yes in Virtuemart its must be button CLOSe-continue shopping, not element, because after click you can redirect..
i found this redirect bug on my ajax website.
If anyone is looking for how to close all instances in Fancybox 4 you can just use Fancybox.close();
To close ajax fancybox window, use this:
onclick event -> $.fancybox.close();
return false;