I've just determined using Firebug that when Fancybox window is created it actually takes all of my ASP.NET controls (contained in DIV tag) and puts them outside FORM tag. So I guess this is the reason why then ASP.NET button doesn't do anything - it is placed outside form.
So, do you have any suggestions how I can prevent this (or make that ASP.NET button work), other than using completely different modal dialog?
EDIT: OK, people are reporting that some of the proposed fixes are working for them on certain versions. So, be sure to read all of the answers / scroll to the bottom for how to fix this issue on different Fancybox versions.
You need to change this (somewhere around line 719 of jquery.fancybox-1.3.1.js):
$('body').append(
tmp = $('<div id="fancybox-tmp"></div>'),
loading = $('<div id="fancybox-loading"><div></div></div>'),
overlay = $('<div id="fancybox-overlay"></div>'),
wrap = $('<div id="fancybox-wrap"></div>')
);
to
$('form').append(
tmp = $('<div id="fancybox-tmp"></div>'),
loading = $('<div id="fancybox-loading"><div></div></div>'),
overlay = $('<div id="fancybox-overlay"></div>'),
wrap = $('<div id="fancybox-wrap"></div>')
);
For anyone needing a simple answer to this problem using Fancybox version 2 theres a much easier way of doing it. All you have to do is add parent: "form:first" in the code eg
$(document).ready(function () {
$(".various").fancybox({
parent: "form:first",
fitToView: true,
width: '300px',
height: '100px',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none',
modal: false
});
});
then this will append the fancybox elements in the dom inside the form tag, rather than inside the body tag.
Fancybox Version 2.1.4
Change these 2 lines
Around Line 2069 :
document.all && !document.querySelector ? $('html') : $('body');
to
document.all && !document.querySelector ? $('html') : $('form:first');
and around Line 1960 :
this.overlay = $('<div class="fancybox-overlay"></div>').appendTo('body');
to
this.overlay = $('<div class="fancybox-overlay"></div>').prependTo('form');
You could also use appendTo but that's up to you. In my case I needed prependTo.
I've been trying to figure out this problem all week, I haven't really had any luck
I just came across this article
http://usmanshabbir.blogspot.com/2010/10/click-server-button-problem-in-jquery.html
That explains how to get postback working with the jQuery UI Dialog box.
If it's not 100% necessary to use fancy box then this method is definitely worth a try, it's saved me a lot of hassle today.
Without altering the FancyBox source, put this after the FancyBox script (outside any load events!!!):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/#.#/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-#.#.#.pack.js"></script>
<script type="text/javascript">
// Override $.fancybox.init to fix ASP.NET PostBack bug;
var fancyboxInitOld = $.fancybox.init;
$.fancybox.init = function () {
fancyboxInitOld.apply(arguments);
$("#fancybox-tmp, #fancybox-loading, #fancybox-overlay, #fancybox-wrap").appendTo("form:first");
};
// Your code ...
</script>
jquery.fancybox-1.3.4.js line 1040
//$('body').append(
$('form').append(
tmp = $('<div id="fancybox-tmp"></div>'),
loading = $('<div id="fancybox-loading"><div></div></div>'),
overlay = $('<div id="fancybox-overlay"></div>'),
wrap = $('<div id="fancybox-wrap"></div>')
);
Works (my asp:Button does postback) for me on FF and IE9, thanks for the solution
The above update didn't work for me, the fancybox was still added outside the form. I then commented out those 6 lines in jquery.fancybox-1.3.2.js and found they weren't being used at all in my code.
I did a search on 'body' in the fancybox js files and changed it to 'form' in:
jquery.fancybox-1.3.2.js (ln 484)
jquery.fancybox-1.3.2.pack.js (ln 27, ln 41)
The fancybox is now getting added to the form and the server controls are working.
Fancybox Version: 2.1.2
Line 1782 of jquery.fancybox.js
Change this:
this.el = document.all && !document.querySelector ? $('html') : $('body');
To this:
this.el = document.all && !document.querySelector ? $('html') : $('form:first');
I use Fancybox 1.3.4 to show an aspx page as a popup page in fancybox iframe. But button in the popup page does not cause postback. I did not change anything as you said before. Rather I did the following.
function check()
{
var validated = Page_ClientValidate();
if (validated) {
__doPostBack('<%=bur.ClientID%>','');
parent.$.fancybox.close();
return true;
}
else
{
return false;
}
}
<asp:Button ID="bur" runat="server" Text="ser"
OnClientClick="check()" />
protected void bur_Click(object sender,Eventargs e)
{ //put breakpoint here.
}
Fancybox 1.3.4 actually does postback.
But if is closed in OnClientClick that is before server side click event it wont postback .So The above is the solution to this problem.(Adding doPostBack in javascript function).
Normally Fancybox 1.3.4 does postback without any change in its .Js files. But to close it , need to write this line ScriptManager.RegisterClientScriptBlock(this, GetType(), "", "parent.$.fancybox.close();", true); in server side click event. Only then both serverside event gets called and fancybox also closes.
But Fancybox 2.1.3 (latest) does postback event after it is closed in OnClientClick.
If refreshing the parent is a solution which serves the purpose, you can refresh onClosed:
$(".fancybox").fancybox({
'onClosed': function() {
parent.location.reload(true);
}
});
Without any change in fancybox js library file, what works for me was below,
$('.your-selector').fancybox({
afterShow: function () {
$('.fancybox-overlay').appendTo('form');
}
});
I have moved the fancybox div inside the form tag, and now, server side button is working like a charm :)
All the best.. I hope this will work for you too. .:)
You don't need to change any code or any library... Just try this..
$('.fancybox').fancybox({
parent: "form:first", // jQuery selector
});
Heres the worst solution possible, however it worked for me. I needed faceybox and codebehind at the same time. Setup your fancy box to load when button clicked. Then onClosed pass values to another C# page and do the code behind on Page Load.
<script type="text/javascript">
$(document).ready(function () {
$(".fancy").fancybox({
onClosed: function () {
window.location.href = "worker_addcarrier.aspx?name=" + document.getElementById('<%=txt_carriername.ClientID%>').value +
"&password=" + document.getElementById('<%=txt_password.ClientID%>').value +
"&email=" + document.getElementById('<%=txt_email.ClientID%>').value;
}
});
});
and then just the "class=" thing here:
<asp:Button ID="Button1" href="logo.png" runat="server" class="fancy" Text="Create" Width="109px" BorderColor="#009933" OnClick="Button1_Click" />
Related
If I am scrolling my page and the update gets triggered by the timer the page/scrollposition slightly jumps/jitters/lags. I am using MaintainScrollPositionOnPostBackon my pages and it works fine if I am stationary somewhere on the page, no jump/jitter/lag on update then. Any ideas on how to fix it while scrolling too? Maybe pause the timer while scrolling if possible?
There is workaround for that issue.
You pass to controller element you had focus on and then on page load you focus back to that element.
Find focus:
var focusedElement = document.activeElement;
focusedElement you send to server (controller or whatever) via post/get or something.
Focus back on page load:
$(document).ready(function() {
$("#" + recivedFocusedElement).focus();
}
recivedFocusedElement you recive from server.
Found a solution over here. For lazy people:
<script type="text/javascript">
window.scrollTo = function( x,y )
{
return true;
}
</script>
Just put this in your .aspx file.
I'm fairly new to asp.net/c# and very new to jQuery so please forgive me if this is a newb question.
I have a jQuery fancybox installed which is defined by:
function pageLoad(sender, args) {
$("#ctl00_wpm_ShowProduct_ctl04_TestAddToCart").fancybox({
'width' : 600,
'height' : 620,
'type' : 'iframe' });
}
When I click the asp:HyperLink that renders as ctl00_wpn_ShowProduct_ctl04_TestAddToCart everything works (I realize if I move things on the page this could break but I need to make it work before I make it work well).
I have another asp:Button on that page that I want to do some processing and then open the target URL (calendar) in a fancybox. In the original the click on the link brought fancybox into play and opened the calendar URL. Now if I remove that, how do I get the same results from the button after it does its half-dozen other tasks? I won't have a link to which I can tie the jQuery activation.
I know that codebehind is server and jQuery is client, but if it can work from a link it should work from a button.
I would recommend using ClientID on the client side.
If you can do it exclusively through the front end, you could do something like this.
<asp:Button OnClientClick="LaunchTheFancyBox()" ID=""... />
<script>
function LaunchTheFancyBox(){
$('#<%=myControl.ClientID%>').fancybox({
'width' : 600,
'height' : 620,
'type' : 'iframe'
});
}
</script>
Note: If you need to send it from the server, you need to inject it through an control.
Here's a post with the same sort of question
http://www.eggheadcafe.com/community/csharp/2/10346901/open-jquery-fancybox-from-codebehind.aspx
If you want to run javascript on postback and:
you are using AJAX you can do this:
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ScriptKey", "myFunction();", true);
otherwise you can use this:
ClientScriptManager.RegisterClientScriptBlock(this.GetType(), "ButtonClickScript", "myFunction();", true);
References:
http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.registerstartupscript.aspx
http://msdn.microsoft.com/en-us/library/z9h4dk8y.aspx
In your button, use (you'll need to set your parameter values):
OnClientClick="pageLoad(sender, args)"
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.onclientclick.aspx
I have 6 thumbnail images as asp:imagebutton instances. These are treated as triggers for asp:updatepanel control on the page which contains an asp:image control.
When the user clicks on the thumbnail, the image in the asp:updatepanel's image control changes to the clicked thumbnail image.
The users are also allowed to again enlarge the image by clicking on the enlarge button (this runs the lightbox function). This works fine.
Question
The problem is that the enlargement works when the page loads, however when the user select a thumbnail and then tries. The method (lightbox) does not work.
I have had similar problems with javascript functions and the asp:updatepanel. Has anyone else faced similar issues? If so, how do I solve this issue?
A $ function (which is a DOM ready function) will be only be executed when the page loads for the first time.
Any further AJAX call (which is a partial loading/rendering) will not fire DOM ready function. Which is the reason, you were not able to get it working.
In you case, this function binds your anchor link (button) with the lighbox behavior the first time the page loads. so, it works. The next time when you refresh the update panel (which is a partial render) the button is not bound to lightbox again. Unless this binding is achieved it will not show up.
Normally a script control is used in such cases to fire the event every time the control is loaded.
If you are not bothered here about segregating related objects, the solution like pageLoad is still fine.
Following javascript was defalut one, it work fine without asp:UpdatePanel
<script type="text/javascript">
$(function()
{
$('#gallery a').lightBox();
});
</script>
but it is not working with asp:UpdatePanel so there is the need to call function on page load and it works fine.
<script type="text/javascript">
function pageLoad(sender, args)
{
$('#gallery a').lightBox();
}
</script>
Thanks guys for helping.
Solved:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<script src="../slimbox-2.05/slimbox2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function pageLoad() {
jQuery(function ($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */
}, null, function (el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
}
</script>
I have the following DIV markup:
<div id="dialog" title="Membership Renewal">
Your membership is going to expire.
</div>
I have the following javascript to execute the JQuery:
<script type="text/javascript">
function showjQueryDialog() {
$("#dialog").dialog("open");
//alert("Time to renew Membership!");
}
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: { "Renew Membership": function() { $(this).dialog("close"); } }
});
});
</script>
I have an asp:Button which is inside a control and the control is on a master page. The first thing I notice is that when the page is loaded, the div is displayed and then disappears when the page is done loading. When I click the button it executes the following:
if (timeSpan.Days >= 30)
{
//Show JQuery Dialog Here
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "showExpiration",
"showjQueryDialog()", true);
}
When I click the button, instead of a dialog popping up, the content of the div just becomes visible.
I know this is old now. However, Set your class to the jQuery UI built in ui-helper-hidden.
<div id="dialog" title="Membership Renewal" class="ui-helper-hidden">
Your membership is going to expire.
</div>
This will resolve your div's unwanted cameo behaviour.
I believe you have two related issues here.
The reason that the DIV is showing when you first load is because you haven't yet told it not to. The jQuery script that makes the DIV behave as a dialog doesn't run until the HTML DOM is loaded, and until then it will not hide the DIV. A simple solution is to hide the DIV by default using CSS.
<div id="dialog" title="Membership Renewal" style="display:none;">
Your membership is going to expire.
</div>
The button click problem is related: RegisterClientScriptBlock will output a script that runs as soon as it is encountered, so the jQuery code that turns it into a dialog hasn't had a chance to run yet. In order to give it a chance to do so, you can change the C# code to use RegisterStartupScript, which will delay execution of showjQueryDialog() until the page has finished loading and the jQuery code has had a chance to make the DIV into a dialog.
if (timeSpan.Days >= 30)
{
//Show JQuery Dialog Here
ScriptManager.RegisterStartupScript(this, typeof(Page),
"showExpiration", "showjQueryDialog()", true);
}
make sure you are specifying the correct doctype at the top of your page, this seems to be the cause of some issues that i've seen.
edit:
also, to keep it from flashing at the beginning you can have something like
#debug { display: none; }
somewhere before the element (most likely your stylesheet or in the head).
another thing that might help is if you put set:
OnClientClick="showjQueryDialog(); return false;";
in the page load or similar, that way you wont need a postback (asynchronous or otherwise).
The reason its not showing is because the document probably hasn't loaded yet. and document.ready hasn't been called, so dialog("open") is getting called before dialog({options}); so to fix this just add the code to in a doc.ready call.
Also, your only loading the dialog once, so you don't really need to initialize it as autoOpen:false, use the display:none then show it as John Boker said
function showjQueryDialog() {
$(document).ready(function() {
$("#dialog").dialog({
modal: true,
buttons: { "Renew Membership": function() { $(this).dialog("close"); } });
$("#dialog").show(); // sets display:block;
//alert("Time to renew Membership!");
});
}
<div id="dialog" style="display:none">
<!--..-->
</div>
I am wanting to use the Facebox plugin for JQuery but am having a few issues getting it running how I want. The div that houses the facebox content is created outside of the tag so even though I am loading up some web controls none of them are firing back to the server.
Has anyone dealt with this that can give me some pointers?
poking around the facebox.js I came across this line in the function init(settings)...
$('body').append($.facebox.settings.faceboxHtml)
I changed that to ...
$('#aspnetForm').append($.facebox.settings.faceboxHtml)
and it loads up in the form tag, not sure yet if there are any side effects
You can use this code to register the PostBack event:
btn.OnClientClick = string.Format("{0}; $.facebox.close();",ClientScript.GetPostBackEventReference(btn, null));
this will let the button fires a PostBack.
Even after the :
$('#aspnetForm').append($.facebox.settings.faceboxHtml)
change I found it problematic. When you look at the page source using firebug you see that all the html in the div assigned to be the facebox div is doubled up (repeated).
So all of those controls with supposed unique id's are doubled up on the page, that can't be good on the postback, i've decided putting asp.net web controls in a facebox is not a good idea.
I modified facbox.js to do this. Maybe there is a better solution but this works like a charm
Here what i did:
add two lines on top of facbox.js before '(function($)'
var willremove = '';
var willremovehtml = '';
find "reveal: function(data, klass) {" and add this lines before the first line of function.
willremove = data.attr('id')
willremovehtml = $('#'+willremove).html()
$('#'+willremove).html('')
find "close: function() {" and make it look like below.
close: function() {
$(document).trigger('close.facebox')
$('#'+willremove).html(willremovehtml)
willremovehtml = ''
willremove = ''
return false
}