On buttonSave click after saving the record successfully ,I want to show “Save successfully “ message on a label on a page for few seconds and then reload the page.
Thanks in Advance
You can add a META refresh tag:
<meta http-equiv="refresh" content="5;url=SomeURL">
You can do this using the 'meta' tag. This will reload the page after 3 seconds:
<meta http-equiv="refresh" content="3">
To do this in code, you can do something like this in your submit event (C# syntax but it should be easy enough to understand):
HtmlMeta meta = new HtmlMeta()
{
HttpEquiv = "refresh",
Content = "3"
};
Page.Header.Controls.Add(meta);
For this to work, you need to have a <head runat="server"> on the page.
You can show a nice overlay busy message.
The Mark-up part:
$(function() { // when document has loaded
($.unblockUI); //unlock UI
//Show busy message on click event and disable UI
$('#btnHelloWorld').click(function() {
$.blockUI({ message: '<h4><img src="busy.gif" />Please wait...</h4>' });
});
});
<asp:Button ID="btnHelloWorld" runat="server" Text="Hello World" /><br/>
The Code behind:
Protected Sub btnHelloWorld_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnHelloWorld.Click
Label1.Text = "Hello World"
Threading.Thread.Sleep(5000)
End Sub
Check out jQuery BlockUI Plugin
I don't know about ASP, yet I'll tell you a simple idea, you can use timers, and add a trigger to the timer as when the timer is out, the trigger is fired. Hope I have helped you ...
Related
I have this page where you can "edit" the data of the users... I want to send a message like "Edited Successfully" AND update the page as well, with the new content ( DropDownLists AND TextBoxes).
I'm using this for the messages:
ScriptManager.RegisterStartupScript(this, typeof(Page), "alert", "alert('Edited Successfully !');", true);
And to update the page, I tried: Response.Redirect(Request.RawURl) and even a simple Response.Redirect(~/page.aspx) didnt work either...
If I try this way, it do update the page, but then it DOES NOT show the alert... ;\
All of this data (that fills the DropDownLists, Textboxes etc..) Is called on the Page_Load. I tried to call this same method after sending the message, but then it does not update =\
Any Idea?
The problem you're facing occurs because you are reloading the page, so the script you register gets lost.
An approach I've used in cases like this, involves the use of jQuery and jQuery UI Dialog:
In your page, put a div that will be the message container. It's hidden initially and will be shown after complete the database request:
<div id="modal" title="Alert" style="display: none;">
</div>
Write a javascript function that will display the dialog:
function showConfirmation(text){
$("#modal").html(text).dialog({
modal: true, // show the dialog as modal
buttons: {
Ok: function() {
location.reload();
}
}, // add a button that refreshes the page when clicked
closeOnEscape: false, // avoid the dialog close when ESC is pressed
dialogClass: 'no-close' // adds a CSS class that hides the default close button
});
}
The dialog function is responsible for showing the dialog, using the jQuery UI library. The buttons parameter displays a button that refreshes the page when pressed.
All you have to do is register the dialog script, with the RegisterStartupScript method:
ScriptManager.RegisterStartupScript(this, typeof(Page), "alert", "showConfirmation('Edited Successfully !');", true);
If you are not using jQuery and/or jQuery UI, all you have to do is add the references in head tag. If you don't want to use the CDN's, download the files to your local site.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
You can see a working example of the client side behavior this fiddle
I have a popup in my page which I am trying to show on dropdownlist selected index changed event.
Here is register statement
ClientScript.RegisterClientScriptBlock(GetType(),"id", "ShowApplicationPopUp()",true);
Here is my javascript function
function ShowApplicationPopUp() {
$('#NewCustomerMask').show("slow");
$('#NewCustomerApplicationPopUp').show("slow");
}
Both of my divs are initially hidden by using display:none; statement.
The problem is when my dropdownlist is changed the popup is not seen at all.I tried putting an alert statement to check if the function is called , and the alert statement is fired.Any ideas as to what I am doing wrong.
Any suggestions are welcome.
Thanks.
When you use RegisterClientScriptBlock the Javascript code is inserted early in the page, so it will run before the elements are loaded.
Use RegisterStartupScript instead, which places the code at the end of the form.
I too could not get this code to work but thanks to the above I now have working code. Note, I have a linkbutton inside an Ajax Update Panel.
in my code behind aspx.cs page is:
protected void OpenButton_Click(object s, EventArgs e)
{
// open new window
string httpLink = "../newWindow.aspx";
ScriptManager.RegisterStartupScript(this, GetType(), "script", "openWindow('" + httpLink + "');", true);
}
in my apsx page is first the link to jQuery source, then second the JavaScript for the openWindow function:
<script src="../js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
function openWindow(url) {
var w = window.open(url, '', 'width=1000,height=1000,toolbar=0,status=0,location=0,menubar=0,directories=0,resizable=1,scrollbars=1');
w.focus();
}
</script>
and the link that makes it all happen:
<asp:LinkButton Text="Open New Window" ID="LnkBtn" OnClick="OpenButton_Click" runat="server" EnableViewState="False" BorderStyle="None"></asp:LinkButton>
Im not a jQuery expert and must attribute some of this to the following blog:
https://blog.yaplex.com/asp-net/open-new-window-from-code-behind-in-asp-net/
I'm using jQuery BlockUI Plugin to show busy message when a click event is fired.
In the scenario below, it's working fine. The busy message shows and locks UI on click event, and dissapears when postback's done.
No file creation involved, which invokes browser Open/Save As dialog box
Mark-up:
$(function() { // when document has loaded
($.unblockUI); //unlock UI
//Show busy message on click event and disable UI
$('#btnDemo').click(function() {
$.blockUI({ message: '<h3>Please wait...</h3>' });
});
});
<asp:Button ID="btnDemo" runat="server" Text="Hello World" /><br/>
Code behind:
Protected Sub btnDemo_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnDemo.Click
Label1.Text = "Hello World"
Threading.Thread.Sleep(6000)
End Sub
Now, here comes the problem. There's file creation involved and it invokes browser Open/Save As dialog box. The busy message shows and locks UI on click event, but doesn't dissapear and unlock UI when postback's done and user saves file.
Mark-up:
$(function() { // when document has loaded
($.unblockUI); //unlock UI
//Show busy message on click event and disable UI
$('#btnCreateFile').click(function() {
$.blockUI({ message: '<h3>Please wait...</h3>' });
});
});
<asp:Button ID="btnCreateFile" runat="server" Text="Create File" /><br/>
Code-behind:
Protected Sub btnCreateFile_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnCreateFile.Click
Dim filename As String = "demo.xls"
Response.ContentType = "application/vnd.ms-excel"
Response.AddHeader("Content-Disposition", String.Format("attachment;filename={0}", filename))
Response.Clear()
Response.[End]()
End Sub
I want to get rid of the busy message and unlock the UI when Open/Save As dialog box appears.
I asked the same questions here: Unblock (jQuery BlockUI) after file sent to browser through response stream (with no answers).
I don't think it's possible.. From what I can see the page obviously posts back but because the response is a file stream the page doesn't re-load, no client side events fire the page just stays in limbo.
Most tutorials suggest you create the file and re-direct the client to a 'download page'. You could potentially do all this through an iFrame. So postback, generate the file, set some client site jquery to run on document.ready to create an iFrame with a src of say: /downloadFile.aspx?fileID=blah
The dialog should still come up as normal but you can now control unblocking the UI.
Javascript:
$(document).ready(function () {
$('#create_pdf_form').submit(function () {
blockUIForDownload();
});
});
var fileDownloadCheckTimer;
function blockUIForDownload() {
var token = new Date().getTime(); //use the current timestamp as the token value
$('#download_token_value_id').val(token);
$.blockUI();
fileDownloadCheckTimer = window.setInterval(function () {
var cookieValue = $.cookie('fileDownloadToken');
if (cookieValue == token)
finishDownload();
}, 1000);
}
ServerSide:
var response = HttpContext.Current.Response;
response.Clear();
response.AppendCookie(new HttpCookie("fileDownloadToken", downloadTokenValue); //downloadTokenValue will have been provided in the form submit via the hidden input field
response.AddHeader("Content-Disposition", string.Format("attachment; filename={0}", desiredFileName)); //desiredFileName will be whatever the resutling file name should be when downloaded
//Code to generate file and write file contents to response
response.Flush();
Here is the link to resolution.
http://geekswithblogs.net/GruffCode/archive/2010/10/28/detecting-the-file-download-dialog-in-the-browser.aspx
br, Jernej
I am a bit new to the asp.net/jQuery game, and I seem to be having difficulty. I am using colorbox to make a modal window popup, and I want an upload picture form on that modal window. I have a button to open up the add photo form:
Add/Edit picture(s)<br />
<script>
$(document).ready(function () {
$(".addpicture").colorbox({ width: "50%", inline: true, href: "#page1" });
});
</script>
Thus far my modal window is working perfectly, and is displaying the following upload form and next button:
<asp:FileUpload ID="picup" runat="server" class="upload" /><br />
<asp:Button ID="Button1" type="button" runat="server" Text="Next Page" class="nextpage" />
Here's where I am stuck; I am trying to have the next button upload the picture, and move to a second modal window, which I am going to implement a crop function on. The problem is, to do this, I need a jquery event handler:
$(".nextpage").colorbox({ width: "50%", inline: true, href: "#page2" });
I also need a serverside event handler to do the actual upload:
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Try
picup.PostedFile.SaveAs("\Pictures\1-a.jpg")
Catch ex As Exception
Response.Write("Upload Failed")
End Try
End Sub
However, when I put in a breakpoint, this event handler is never firing.
A possible solution I thought up is to make a hidden button that fires the javascript, and click that button from vb, but I couldn't figure out how to click a button from vb. Is there something I'm doing fundamentally wrong? Is there a good way to accomplish what I want?
Edit: I have changed the way I am doing this, instead of multiple modal windows, I am loading a separate page in an iframe on the modal window, then I can have a postback without reloading the main page. Thank you for your help.
When uploading files with the fileUpload control you need a postback, otherwise the event will never fire.
There are a couple of plugins por jQuery that promise to enable uploading via ajax but i've never tried any.
In jquery bind() method lets you attach different behaviors to an element :
Example:
$("#a").bind("mouseover mouseout", function(e){
$(this).text($(this).text() + " event triggered " );
});
I have an aspx page that contains a checkbox, and a button. The button is disabled by default until the user checks the checkbox. It looks like when I add the attribute enabled="false" to the button, it removes the validation. When the button is enabled, I still want the validation to work. Here is the code and markup for the different parts.
Checkbox:
<asp:CheckBox runat="server" ID="termsCheckBox" />
<label style="display: inline;">
I agree to the Terms & Conditions</label>
Button:
<asp:Button runat="server" ID="registerButton" OnClick="registerButton_Click1"
Text="Register" Enabled="false" ValidationGroup="accountValidation" />
JQuery:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#<%=termsCheckBox.ClientID %>').click(function () {
var checked = $(this).val();
if (checked != undefined)
$('#<%=registerButton.ClientID %>').removeAttr('disabled');
else
$('#<%=registerButton.ClientID %>').attr('disabled', 'disabled');
});
});
</script>
It seems like the validation should be attached to the checkbox, not the button.
Asp.net is stupid because when a control is disabled, there's all sorts of stuff that won't happen with it.
In this case, the js code to cause client side validation will not be created for a disabled button.
If you try to manually add in the clientside js code from the code behind,
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
registerButton.OnClientClick = String.Format("javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('{0}', '', true, '', '', false, false))", registerButton.UniqueID)
End Sub
It will not work because asp.net will not render all the attributes for a disabled control.
There are two solutions then. Either disable the control with JS at client side or add the javascript to perform a postback with validation at client side.
What I did for my program was to add code to create js code to disable the button at the client side:
If btnSubmit.Enabled = False Then
'Asp.net will not render all the attributes for a control that is disabled. Even if you
'try to set the OnClientClick attribute manually in code behind for the control, it will
'not work. Asp.net will not render the attribute. This is a workaround for this problem.
btnSubmit.Enabled = True
strJavaScript &= "btnSubmit.disabled = true;"
End If
ClientScript.RegisterStartupScript(Page.GetType(), "myStartupScript", strJavaScript, True)
Note that btnSubmit is a javascript variable that is already defined in my client side code.
I think it would work if you enabled/disabled the button on the checkBox server-side event rather than client side since the associated client-side validation code will be generated to run for ValidationGroup of the button