I’m attempting to pass JavaScript variables via FancyBox, so that I can access them in the window that appears. So far, I have the following code:
var s;
var e;
var fancyboxdata = new Array();
$(function(){
$( '#post_code' ).blur(function(){
s = $( '#post_code' ).val();
});
});
function map_routes(e){
if ((s.length !== 0) && (e.length !== 0)) {
document.getElementById('map_routes_button').style.visibility="visible";
fancyboxdata[s] = s;
fancyboxdata[e] = e;
} else {
document.getElementById('map_routes_button').style.visibility="hidden";
}
}
...
$(document).ready(function() {
$("a.iframe_maps").fancybox({
ajax: {
type: "POST",
data: fancyboxdata
},
'hideOnContentClick': true,
'height': 600,
'padding': 0,
'width': 700,
'type': 'iframe'
});
});
At this stage, I know the fancyboxdata array contains data, but I’m unsure about the Ajax parameter in the FancyBox function, which is supposed to pass the array variable.
The problem is that you are never going to be able to send a POST request using just an <a> element.
In its current state your code is always going to be firing a GET request.
Why is it not an option to pass the data as a URL parameter?
This would work as expected.
I’ve tried POST and GET and neither contain any data.
Because I’m using JavaScript, which is unreliable, and it would involve sending a GET request to a page, which wouldn’t work in the context of the framework.
I’m open to any recommendations of code alterations, to make this work.
I am by no means an expert in JavaScript, Ajax, or jQuery!
var myVar ="something";
$("#send").click(function(e){
e.preventDefault();
var Href = 'iframe.php?name=' + myVar;
$.fancybox.open({
href: Href,
type: 'iframe'
});
});
<a class="iframe_maps button-link" href="" title="Plan your journey" id="send">Journey Planner</a>
However, I have no experience of the framework you are using, so maybe this approach wouldn’t work for you.
Another idea would be to construct your content in your main document (you could fetch whatever you need via AJAX), then pass everything to FancyBox using its content parameter.
This way, you submit everything to test.php via AJAX.
In test.php you have access to the $_POST super-global in all its glory.
You can then manipulate your data as you wish, then pipe it back to display in FancyBox.
Okay, I’m nearly there. But there are a few problems:
I can’t remove the loading icon, even when I delete the $.fancybox.showLoading(); attribute;
I can only send one parameter, and data: ‘s=’ + s + ‘&’ + ‘e=’ + e doesn’t appear to work, in that only ‘s’ is carried forward, while ‘e’ appears to be undefined, even though data is present prior to submission;
also, Fancy Box only works once, and no subsequent attempts result in a window.
If I was you, I’d take a second to run the example I provide and see if your issues persist.
If so, then there is a glitch in the Matrix, if not, then we have narrowed the problem down to your script.
Either way, i would be interested to know how you get on.
Okay, there’s an error somewhere in my code, which is responsible for ‘e’ not being passed along to FancyBox.
As for the loading graphic, I don’t have anything else on the page that would do that; your code introduced that feature, and it’s something I don’t use anywhere in the application.
Also, your code relies on the newer version of FancyBox, which essentially disables every instance that uses code specific to the earlier version — of which there are many throughout the application.
Just to be clear, your examples work perfectly. It’s the integration with my application that’s causing the problems, especially with the error in my code.
If you don’t mind, I have to go, but I’ll be sure to try tomorrow.
No probs
It can be quite annoying when you’re looking for a solution to a complicated problem and you have to try and bring a stranger up to speed with your project.
Nonetheless, hopefully the last example I posted should help you implement the POST request correctly and route the response back to FancyBox.
Let me know how you got on.
It represents the “click” event.
As, in this example, the page to display in FancyBox is hard-coded into the “href” (i.e. test.php) we need to prevent the browser following that link.
That’s what this line does:
Okay, I Googled the preventDefault() function, so understand what that does.
However, I simply don’t know enough about JavaScript / jQuery (whatever it’s called) to fix the bug in my code, or how to implement your code and have it work (I can’t get Fancy Box to work reliably, other than using the code I’m using elsewhere, but won’t work here in this exercise).
Because of the time constraints, I may have to abandon this exercise, largely because I honestly don’t know what’s going on, and this needs to be maintainable in the future.
Thanks for the kind offer. It’s a commercial application, which requires sign in details, so I’ll send you a private message with details for the development version.
<div id="button-link"><a class="fancybox button-link" id="button-link" href="..." title="Plan your journey">Journey Planner</a></div>
This line is invalid as you have two elements with the same id.
I changed it as follows:
<div id="button-link"><a class="fancybox button-link" id="button-link1" href="test.php" title="Plan your journey">Journey Planner</a></div>
Notice I also changed the file to which the AJAX post request is sent to “test.php”.
In test.php I just have <?php print_r($_POST); ?>
You have this JavaScript at the top of the document.
var s;
var e;
var fancyboxdata = new Array();
$(function(){
$('#post_code').blur(function(){
s = $('#post_code').val();
});
});
function map_routes(e){
if ((s.length !== 0) && (e.length !== 0)) {
fancyboxdata[0] = s;
fancyboxdata[1] = e;
document.getElementById('map_routes_button').style.visibility="visible";
} else {
document.getElementById('map_routes_button').style.visibility="hidden";
}
}
$("#button-link").click(function(event) {
event.preventDefault();
_s = fancyboxdata[0];
_e = fancyboxdata[1];
$.fancybox(this, {
ajax: {
type : "POST",
data : 's=' + _s + '&e=' + _e
}
});
});
Move it to the bottom of your file and place it directly before the closing </body> tag.
This is also where the Google Analytics code should go (before the </body>, not after).
