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>
Related
This may seem like a nit-picky detail, but I am wanting to disable to prompt that appears when I force a reload using the following code:
<script type="text/javascript">
function OpenCBox()
{
$.colorbox({ href: "NewMMR.aspx", iframe: true, width: "40%", height: "70%", transition: "elastic", onClosed: function () { parent.location.reload(true); } });
}
</script>
When the jQuery ColorBox closes, it fires the parent.location.reload() event which then prompts the page to ask if you want to resubmit previously given data.
MORE DETAIL:
I am trying to call a ColorBox, perform an INSERT into the database, and then close the colorbox and reload a GridView on the parent page. The browser is asking me to resubmit previously submitted data (which is a date range from two text boxes using a calendar extender).
I want to completely disable this prompt and I was wondering if there was some trick anyone knew of that could do this.
Thanks!
The parentpage was last requested with a POST, you will have avoid that if you want the prompt away, try loading with a GET instead or to reload the page with the following
window.location = window.location.href
See http://en.wikipedia.org/wiki/Post/Redirect/Get for more info about this.
I have an MVC3 app, and i need to add ajax loading image. I put this on my view
#using (Ajax.BeginForm(
"LogOn","Account",
new AjaxOptions { LoadingElementId = "div_loading" }))
This is my very simple div on the same view:
<div id="div_loading" style="display:none;">
<img src="#Url.Content("~/Content/Images/loading.gif")" alt="" />
</div>
When i click my submit button to post the form back, the loading.gif never appears. My code runs fine, but no loading indicator shows up. And the image is named correctly and in the right place. Does anyone have a clue why?
Update
Apparently, this has something to do with Telerik applications. If i create a regular MVC3 app, it works. When i create a Telerik MVC3 app, it doesnt work. Has anyone else encountered this with Telerik?
You could try this as well from: here
function AjaxBegin()
{
$('#div_loading').show();
}
function AjaxComplete()
{
$("#div_loading").hide();
}
function AjaxFailure(ajaxContext)
{
var response = ajaxContext.responseText;
alert("Error Code [" + ajaxContext.ErrorCode + "] " + response);
}
AjaxOptions:
OnFailure = "AjaxFailure";
OnBegin = "AjaxBegin";
OnComplete = "AjaxComplete";
I prefer to shy away from attaching a loading iamge to every ajax call I make.
The top answer here is a solution to display an ajax spinner (loading image) whenever ajax makes a send call:
Display spinner while waiting For ajax
It has the functionality you need. Just use javascript to attach the display of the image to the ajax calls.
It should be something like:
<script type="text/javascript">
$(document).ready(function () {
BindSpinner();
});
function BindSpinner() {
$("#div_loading").bind("ajaxSend", function () {
$(this).show();
}).bind("ajaxStop", function () {
$(this).hide();
}).bind("ajaxError", function () {
$(this).hide();
});
};
</script>
What this does is display the div on ajax send and hides it upon ajax stop or error for all calls on your page. If you place this script and the div in your _layout it will do this for every Ajax call on your site.
You might want to try this instead. I got it from the SO question here
<div id="div_loading" style="visibility:hidden;">
<img src="#Url.Content("~/Content/Images/loading.gif")" alt="" />
</div>
I had the same issue and was able to solve it changing the name of the element to be hidden/shown. I used camel-case format: "myDivToBeHidden"
The element needs the "display" property set to "none".
So I've been basically beating my head against the wall on this for a while now. Excuse me if I throw up too much code here, don't know a better way to explain it. I've got a Repeater with an ItemTemplate of:
<ItemTemplate>
<div id='FileFrame<%#Eval("Id")%>' class="view">
<userControl:ConfigFiles ID=<%#Eval("Id")%> runat="server" />
</div>
</ItemTemplate>
Some jQuery that sets up the dialog box for the div.
$(document).ready(function() {
$(".view").dialog({
autoOpen: false,
title: "Configuration Files",
buttons: {},
height: 600,
width: 800,
open: function (type, data) { $(this).parent().appendTo("form"); }
});
});
and some more jQuery that opens the dialog.
$("#FileFrame"+ConfigId).dialog('open');
Now the User Control has a bunch of checkboxes inside of it inside other repeaters along with a "Download Checked Boxes" button. The problem is that when I go through debugging and click the button, none of the checkboxes are ever read as checked unless I initially set the Checked="true" on the aspx page.
Here's the a snippet from the code behind where it's failing to do what I thought it should do.
foreach (RepeaterItem item in FilesRepeater.Items)
{
CheckBox box = item.FindControl("DownloadFileCheckBox") as CheckBox;
if (box.Checked) //<-- always false unless I set it to true in aspx,
// then it's always true
{/*do work here*/}
}
Any suggestions?
I had similar problem ( postback doesn't populate control values) sometime back. The problem was generated dialog was outside the form tag.
Use
$("#FileFrame"+ConfigId).parent().appendTo($("form:first"));
or similar code to move the dialog code inside of form
Hope this will help.
Ok, I'm not 100% sure what exactly happened (which is scary) but the code now works. My intuition says that something, somewhere, was wrong with a piece of JavaScript and causing the browser to just abandon the following JS. Bottom-line is that the solution that I posted in the question does work.
I think the main problem was that there was a JS function that I was calling that wasn't being loaded or wasn't within the scope of where the call was being made. If I find out more I'll be sure to post it here.
We have a web forms project and in it I want to use jQuery's colorbox plugin to pop up a small window with a submit button. Because we are using web forms, the form tag cannot be part of the colorbox. The problem is that when colorbox loads the element in the DOM into the colorbox, it actually moves it to the top of the body into an absolutely positioned element.
Normally this is fine, but it actually takes the contents out of the form tag. This makes it so that submit buttons within the colorbox no longer cause post backs.
Here is a fiddle representing the problem:
http://jsfiddle.net/Chevex/vbLFD/
If you click the submit changes button you will notice that the form posts to google and the window loads with google. However, if you click the link to load the DIV into colorbox and then click the submit button from within colorbox, nothing happens. The button was taken out of the form tag.
Is there an easy fix for this behavior?
Edit
I thought of submitting the form with jQuery as in this fiddle: http://jsfiddle.net/Chevex/vbLFD/6/
The problem with that is if the DIV contained other input elements, like text boxes, then they too would be removed from the form tag. So even if the form gets submitted with jQuery, the input values that were supposed to be posted with the form will not be included.
It would seem the only way to fix this would be to have colorbox stay within the form somehow.
We're using Colorbox v1.4.33, and applying the accepted answer did not solve the problem.
Colorbox creates two separate DIV elements, one with ID=colorbox and one with ID=cboxOverlay. You need to move both of these DIV elements in order for the Colorbox dialog to render correctly and the ASP.NET postback to trigger.
$(function () {
$("#btnBoligforholdAdd").colorbox({
inline: true,
href: "#modalDialog_Boligforhold",
width: "450px",
closeButton: false,
opacity: 0.5,
onOpen: function () {
$('#aspnetForm').append($('#cboxOverlay'));
$('#aspnetForm').append($('#colorbox'));
}
});
});
You can use a simple jQuery block to move it to the top of the main form.
$(document).ready(function() {
var colorbox = $("#colorbox");
colorbox.remove(); // Removes from dom
$('form#idOfForm').prepend(colorbox);
});
Now anything you load in there should be within the global form.
An alternative selector you can use is body > form for the global form, but it's not as fast as an id.
The below opens a colorbox of a 2 button form which allowsthe data to be saved back to the page behind function on the Save button.
1) The actual inline form
<div style="display: none;">
<div id="formcontent" class="form-horizontal padder">
<!--no <form> tag here as its inline content-->
</div>
</div>
2) Javascript
$(document).ready(function () {
$("#colorbox, #cboxOverlay").appendTo('form:first'); //required for colorbox forms!
$("#<%=cmdAdd.ClientID %>").colorbox({ inline: true, href: "#ColorBoxNewDiagram" });
$("#cmdNewDiagram").click(function () {
$.fn.colorbox.close();
});
$("#<%=cmdCancelAdd.ClientID%>").click(function () {
$.fn.colorbox.close();
return false;
});
});
Color box appends the hidden container to the < body> tag which is outside the asp < form > tag...
Solution is:
Append to < form > tag instead of the < body > tag
In the jquery.colorbox.js file, search for the following line:
$(document.body).append($overlay, $box.append($wrap, $loadingBay));
replace it with the following line:
$('form').prepend($overlay, $box.append($wrap, $loadingBay));
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" />