We Keep Coding

Refresh the whole page after submit (Fancybox)

I have a page where the user will click the button then a fancybox popup will appear and in there is a php file that has all the fields you can update. What I want to happen is that after I press the update button the whole page will refresh and will close the popup. But what's happening is that after I press update only the popup refreshes. How could I do that?
in this page is where I echo all of the user info
emp_refer.php
<a id="various5" href="http://i-refer.elitebpocareers.com/refer/updateInfo.php">
<button class="button">Edit Personal Information</button>
</a>
<SCRIPT TYPE = "text/javascript">
$("#various5").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
</SCRIPT>
Then in the page 2 after the update I do this code and the popup only refreshes
echo "<meta http-equiv='refresh' content='0; url=emp_refer.php'>";

What you could do is :
In page 2, after the update run the fancybox.close() method instead of the meta tag like :
echo "<script>parent.jQuery.fancybox.close();</script>";
Then, in your fancybox initialization script (emp_refer.php page) add the onClosed callback to your API options and run location.reload() within it like :
$("#various5").fancybox({
'width': '75%',
'height': '75%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
'onClosed': function () {
location.reload();
return;
}
});
NOTE: if you are using fancybox v2.x use the afterClose callback

Javascript and Jquery Conflict

Im having a problem, when i delete this code below, the video player popup player works but my contact form doesnt.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
I have added the Script for no conflict but its still now working, here are my JS and Jquery codes which are in the head tag. Any help would be appreciate it.
<script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
var j = jQuery.noConflict();
</script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.3"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.2" media="screen" />
<script src="http://jwpsrv.com/library/WDP87vS0EeKnIhIxOUCPzg.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
openEffect : 'none',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
/*
* Open manually
*/
$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'conscious-video.html',
type : 'iframe',
padding : 5
});
});
$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
<!------Autoresponder---->
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
var close_note = $("#note");
close_note.click(function () {
j("#note").slideUp(1000, function () {
j(this).hide();
});
});
$("#ajax-contact-form").submit(function() {
$('#load').append('<center><img src="images/ajax-loader.gif" alt="Currently Loading" id="loading" /></center>');
var fem = $(this).serialize(),
note = $('#note');
$.ajax({
type: "POST",
url: "contact.php",
data: fem,
success: function(msg) {
if ( note.height() ) {
note.slideUp(1000, function() {
$(this).hide();
});
}
else note.hide();
$('#loading').fadeOut(300, function() {
$(this).remove();
if(msg === 'OK') {
$('input').val("");
$('textarea').val("");
}
// Message Sent? Show the 'Thank You' message and hide the form
result = (msg === 'OK') ? '<div class="success">Your message has been sent. Thank you!</div>' : msg;
var i = setInterval(function() {
if ( !note.is(':visible') ) {
note.html(result).slideDown(1000);
clearInterval(i);
}
}, 40);
}); // end loading image fadeOut
}
});
return false;
});
});
/* ]]> */
</script>

Do not use two versions of jQuery inside of the same page (not recommended).
jQuery.noConflict()
Is supposed to be used when you are using two different libraries fighting for the $ (which is an alias for jQuery).
Many JavaScript libraries use $ as a function or variable name, just
as jQuery does. In jQuery's case, $ is just an alias for jQuery, so
all functionality is available without using $. If you need to use
another JavaScript library alongside jQuery, return control of $ back
to the other library with a call to $.noConflict(). Old references of
$ are saved during jQuery initialization; noConflict() simply restores
them.
But... in your case... docs says:
If for some reason two versions of jQuery are loaded (which is not
recommended), calling $.noConflict( true ) from the second version
will return the globally scoped jQuery variables to those of the first
version.
More info: http://api.jquery.com/jquery.noconflict/
Good luck.

Open fancybox popup with iframe from a function

I have searched enough in the Stackoverflow and i could not able to find a thread to answer my question.
Below is my scenario,
function openVideo(videoid,urlid){
var videourl = 'http://localhost/ptchoice-local/welcome/video/'+videoid+'/'+urlid;
$("a#video_link").fancybox({
'type': 'iframe',
'width' : 1000,
'height' : 600,
'autoDimensions' : false,
'autoScale' : false,
'href' : videourl
});
$("a#video_link").trigger('click');
return false;
}
Show video
So, i would like to set href value when i click the "openVideo" function not in the anchor tag itself.
Fancybox version: jquery.fancybox-1.3.4.pack.js
Please suggest on this.

If I understood your question correctly this should work for you:
Need to add an ID to the anchor:
Show video
The jQuery:
$("#showVideo").click(function () {
var videourl = 'http://localhost/ptchoice-local/welcome/video/2134sdf234532sdfs324234/1';
$("#video_link").fancybox({
'type': 'iframe',
'width' : 1000,
'height' : 600,
'autoDimensions' : false,
'autoScale' : false,
'href' : videourl
});
$("#video_link").trigger('click');
});
Since the videoid and urlid were hard coded in your example, I did the same here. They can be variables if they need be -- just set them the same way.

You can do it this way.
function openVideo(videoid,urlid) {
var videourl = 'http://localhost/ptchoice-local/welcome/video/'+videoid+'/'+urlid;
$.fancybox.open({
href: videourl,
type: 'iframe',
padding: 0
});
}

How do I make fancybox href dynamic?

I have the following fancybox code:
$('.fancybox').fancybox({
'autoScale' : false,
'href' : $('.fancybox').attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
the problem is I have twenty different A tag id's on the page and I want the fancybox href attribute to take the id of the clicked element, ie the one that triggered the event.
I have tried several things, none of them have worked!
'href' : $(this).attr('id'),
'href' : $(this.element).attr('id'),
This seems so simple but anytime I plug in 'this' or similar nothing works.

Without each() or click() simply add the beforeLoad callback to your script like this
$(".fancybox").fancybox({
autoScale: false,
// href : $('.fancybox').attr('id'), // don't need this
type: 'iframe',
padding: 0,
closeClick: false,
// other options
beforeLoad: function () {
var url = $(this.element).attr("id");
this.href = url
}
}); // fancybox
NOTE: this is for fancybox v2.0.6+
On the other hand, a more elegant solution is to use (HTML5) data-* attribute to set the href (it would look weird to set id="images/01.jpg" otherwise) so you could do :
<a href="#" id="id01" data-href="images/01.jpg" ...
and your callback
beforeLoad: function(){
var url= $(this.element).data("href");
this.href = url
}
and use the id attribute for what is meant for.
EDIT : The best is to use the special data-fancybox-href attribute in your anchor like :
<a id="item01" data-fancybox-href="http://jsfiddle.net" class="fancybox" rel="gallery" href="javascript:;">jsfiddle</a>
and use a simple script without callback like
$(".fancybox").fancybox({
// API options
autoScale: false,
type: 'iframe',
padding: 0,
closeClick: false
});
See JSFIDDLE

You can iterate over your collection of .fancybox items and grab the id.
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : $(this).attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});

Try this:
$(".fancybox").click(function(){
var url = $(this).attr('id');
$.fancybox({
'autoScale' : false,
'href' : url ,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
})

Try this
$('.fancybox').each( function() {
var elem = jQuery(this);
elem.fancybox({
'autoScale' : false,
'href' : elem.attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
});
}
);

Have you tried this?
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : this.id,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});

Start php program with fancybox

I am trying to start a PHP program in an overlay fancybox window. The fancybox window flashes, but won't come into focus. Can I start PHP program through fancybox?
Here is code:
jQuery(document).ready(function(){
$("a.php-overlay").fancybox(
{
'width' : 600,
'height' : 500,
'type' : 'iframe',
'scrolling' : 'yes',
'hideOnContentClick' : false,
'href' : 'http://example.com'
});
});
$('#hiddenclicker').trigger('click');

Shouldn't you trigger
$('a.php-overlay').trigger('click')
?

I believe what you may be trying to do is this:
HTML:
<a class="php-overlay" href="http://example.com">Open example.com in FancyBox</a>
JavaScript:
$("a.php-overlay").fancybox(
'width' : 600,
'height' : 500,
'type': 'iframe'
});
Fancybox will automatically attach an onClick event listener for you.