How to load php page with fancybox? [closed] - php

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I searched a lot but I can't find an answer.
In my contact.php I have this code:
<a class="mailform" href="submit.php">Click</a>
I have this script, but it doesn't work:
$('.mailform').click(function() {
$.fancybox(
{
'autoDimensions' : false,
'width' : 350,
'height' : 'auto',
'transitionIn' : 'none',
'transitionOut' : 'none',
'ajax' : {
cache : false,
url : this.href
}
}
);
});
Can you help me please?

Answer 1

You need to return false to stop the link from following through
$('.mailform').click(function() {
var myUrl = $(this).attr('href');
$.fancybox(
{
'autoDimensions' : false,
'width' : 350,
'height' : 'auto',
'transitionIn' : 'none',
'transitionOut' : 'none',
'ajax' : {
cache : false,
url : myUrl
}
}
);
return false;
});

Answer 2

I suspect your problem here is related to the scope of the magic this variable. In your code, this is referring to the object literal that you have assigned to 'ajax':. In order to do what I think you are trying to do, you will need another temporary variable. By convention, we call the variable that. You also need to return false from your click handler, stop stop the browser from following the link in the main window.
$('.mailform').click(function() {
// Here, `this` refers to the <a> DOM element, so we create a copy of it
// and store it in `that`
var that = this;
$.fancybox({
// Now `this` refers to the object you are passing to fancybox()
'autoDimensions': false,
'width' : 350,
'height' : 'auto',
'transitionIn' : 'none',
'transitionOut' : 'none',
'ajax' : {
// Now `this` refers to the object you are assigning to 'ajax':
cache : false,
url : that.href // Use `that` instead of `this`
}
});
// We also need to return false, to stop the browser following the link
return false;
});