I have multiple update panels with various asp buttons on a single page. I want to disable the buttons which caused the postback in update panel untill it completes.
Is there a way to avoid using a third party control for this? through JQuery or any other method ?
You can either do this:
cs
//in pageload
//the request is not in postback or async mode
bt1.OnClientClick = "this.disabled = true; " + ClientScript.GetPostBackEventReference(bt1, null) + ";");
Note: you can replace "this.disabled = true" with a js function that will have better handling for disabling the button and maybe display a friendly message as well.
Or this:
http://msdn.microsoft.com/en-us/library/bb383989.aspx
js
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(CheckStatus);
function CheckStatus(sender, arg)
{
var postBackElement = arg.get_postBackElement();
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm.get_isInAsyncPostBack() && postBackElement.id == "btn1") {
arg.set_cancel(true);
//display friendly message, etc
}
}
Note: I modified it so it checks for the button's id. Replace "btn1"
Good luck!!
You can use the start and stop message of the update panel to disable your controls.
For example
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(sender, args) {
document.getElementById("ButtonToDisable").disabled = true;
}
function EndRequest(sender, args) {
document.getElementById("ButtonToDisable").disabled = false;
}
</script>
Related
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
//Raised before processing of an asynchronous postback starts and the postback request is sent to the server.
prm.add_beginRequest(BeginRequestHandler);
// Raised after an asynchronous postback is finished and control has been returned to the browser.
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
//Shows the modal popup - the update progress
var popup = $find('<%= modalPopup.ClientID %>');
if (popup != null) {
popup.show();
}
}
function EndRequestHandler(sender, args) {
//Hide the modal popup - the update progress
var popup = $find('<%= modalPopup.ClientID %>');
if (popup != null) {
popup.hide();
}
}
</script>
i got solution.
set timeout AsyncPostBackTimeout="50000" in ToolkitScriptManager or ScriptManager
having a bit of an odd problem, the situation is a bit unique in that I want to show/hide a div in instances both server side and client side, as such I cant change it to a panel.
The current code I have to change its visiblity client side, which works, is:
$('#<%= txtSurname.ClientID%>').on('input', function hideControl() {
var current = $('#<%= txtSurname.ClientID%>').val();
var surname = $('#<%= hdnSurname.ClientID%>').val();
if (current == surname) {
$('#pnlReason').hide()
console.log('hiding');
} else {
$('#pnlReason').show()
console.log('showing');
}
});
When a user clicks a button, the page validates, and refreshes, and the panel is rendered invisible again. As such I want to run this code again on the page load so that if the two variables are still different when the page validation is run, the panel is still visible. This is what im using to call it serverside:
Page.ClientScript.RegisterStartupScript(Page.GetType(), "ShowHide",
"$(document.ready(hideControl()));", True)
When I try running it however, it says that hideControl is undefined, any ideas whats going wrong?
you could reorganise your jquery like this and once the page is refreshed, you can execute your function at the end of the document ready without the need for RegisterStartupScript():
//shorthand for document.ready
$(function () {
var hideControl = function() {
var current = $('#<%= txtSurname.ClientID%>').val();
var surname = $('#<%= hdnSurname.ClientID%>').val();
if (current == surname) {
$('#pnlReason').hide()
console.log('hiding');
} else {
$('#pnlReason').show()
console.log('showing');
}
}
$('#<%= txtSurname.ClientID%>').on('input', function () {
hideControl();
});
//call it at end of ready function:
hideControl();
};
Since hideControl is defined as anonynous function you can't access it. You have to define the function hideControl outside of the on event handler. Put the function within the script tags in the page not in a separate file:
<script>
function hideControl() {
var current = $('#<%= txtSurname.ClientID%>').val();
var surname = $('#<%= hdnSurname.ClientID%>').val();
if (current == surname) {
$('#pnlReason').hide()
console.log('hiding');
} else {
$('#pnlReason').show()
console.log('showing');
}
}
</script>
Then call the function like that at server side without the parenthesis:
Page.ClientScript.RegisterStartupScript(Page.GetType(), "ShowHide",
"$(document.ready(hideControl));", True)
my process is when user click button print in first form then process is redirect to second page. Now when second page is showed i want to call jquery .How can i do , Please help. because i want to get html from second page.
this is my code in web
<script>
$(function () {
setTimeout(function () { printForm() }, 3500);
function printForm() {
window.onload(function () {
<%testMethod();%>
});
}
});
</script>
this is my code in code behide
public void testMethod() {
if (!Page.IsPostBack)
{
WebClient MyWebClient = new WebClient();
string html = MyWebClient.DownloadString(Session["url"].ToString());
}
}
But the problem is testMethod is calling before scond page is show. i want to do like window.print()
If I understand you correctly, you want to get jquery when other page loads, to do that with js only, you have to do something like this:
your_server ="some_server_name"
(function() {
var jquery_scrpt = document.createElement('script'); jquery_scrpt.type = 'text/javascript'; jquery_scrpt.async = true;
jquery_scrpt.src = 'https://' + your_server + '//code.jquery.com/jquery-1.11.2.min.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(jquery_scrpt);
})();
this will add jquery dynamically to your page.Hope that helps.
I'm working on ajax search.ajax function is called on onblur event.below is sample code.
function search_ajax(sh_val,sh_act)
{
....some search code.....
window.location.hash = sh_val+'#'+sh_act;
}
I have made one other function for restore the serch using hash value from url when click on browser back or forward button.this work well for back and forward button.
$(window).bind( 'hashchange', function(e) {
var page=location.hash.slice(1)
if (page!="" && page!="p")
{
search_ajax(page,'catsh');
}
return false;
});
but i am facing issue when i am search ajax search function is called twice. $(window).bind( 'hashchange') is also called when i am searching.is there any way to call the above function only for browser back and forward button or any other solution ?
how can i resolve this issue?
I would appreciate anykind of help..
maybe I don't understand well, but why did you bind hashchange function to window??? It doesn't make any sence. I have similar searching function in my own apps. It is not that complicated. My search function is (lets say) same as yours:
function search_ajax(sh_val,sh_act)
{
....some search code.....
window.location.hash = sh_val+'#'+sh_act;
}
The another one is performed once per page load:
(function() {
var page=location.hash.slice(1)
if (page!="" && page!="p")
{
search_ajax(page,'catsh');
}
return false;
})();
So, if you click search button, then search function is called. Hash is changed. One step into browser history is added.
Then another search, another step in history is added.
Then back button. Page loaded again, so annonymous function is performed. Hash is detected, so search is performed. And hash is changed, but becouse hash is same as before, so link is same, then no duplicite step is added into history.
You could use a semaphore:
var searching = false;
function search_ajax(sh_val, sh_act) {
searching = true;
....some search code.....
window.location.hash = sh_val + '#' + sh_act;
searching = false;
}
$(window).bind('hashchange', function (e) {
if (searching)
return false;
var page = location.hash.slice(1);
if (page != "" && page != "p") {
search_ajax(page, 'catsh');
}
return false;
});
I am using iframe to open new .aspx page from parent page. child page is using ajaxcontroltoolkit(ajax CalendarExtender). Now on form submit, I want to close iframe and return to parent page. For that I am using following code.
ClientScript.RegisterStartupScript(this.GetType(), "scriptid", window.parent.location.href='ViewVendors.aspx'", true);
This works file if I remove ajax control from child page but does not work with ajax control.
I want to use calenderExtender and iframe both. How can I use it and what is the problem for such so called abnormal behavior.
This is the code for my submit button event handler.
protected void btnUpdate_Click(object sender, EventArgs e)
{
try
{
objVendor.VendorID = Convert.ToInt64(Request.QueryString["Id"]);
objVendor.Name = txtName.Text;
objVendor.BillingAddress = txtBillingAddress.Text;
objVendor.ShippingAddress = txtShippingAddress.Text;
objVendor.ContactPersonName = txtContactPerson.Text;
objVendor.ContactNumber = txtContactNumber.Text;
objVendor.EmailID = txtEmailID.Text;
objVendor.VendorSinceDate = Convert.ToDateTime(txtVendorDate.Text);
objVendor.IsActive = Convert.ToBoolean(rdblStatus.SelectedValue);
objVendor.Logo = FileUpload();
int intResult = objVendor.UpdateVendor();
if (intResult > 0)
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "window.parent.location.href='ViewVendors.aspx'", "scriptid", true);
//ClientScript.RegisterStartupScript(this.GetType(), "scriptid", "window.parent.location.href='ViewVendors.aspx'", true);
}
}
catch (Exception ex)
{
lblMessage.Text = ex.Message;
lblMessage.CssClass = "ERROR";
}
}
//Edit
Now my code works fine as long as I am not adding calender extender to the child page.
When I add calender extender in child page it shows error "The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)". If I remove calender extender, again it works well. By doing some googling, I found that <% %> in Javascript tag is creating problem. How can I solve it and why calender control is creating problem in such cases?
Here is the code for my script.
<script type="text/javascript">
function uploadStarted() {
$get("imgDisplay").style.display = "none";
}
function uploadComplete(sender, args) {
var imgDisplay = $get("imgDisplay");
// var imgPhoto = $get("#imgPhoto");
var imgPhoto = document.getElementById('<%=imgPhoto.ClientID %>');
imgDisplay.src = "images/loader.gif";
imgPhoto.style.display = "none";
imgDisplay.style.cssText = "";
var img = new Image();
img.onload = function () {
imgDisplay.style.cssText = "height:100px;width:100px";
imgDisplay.src = img.src;
};
img.src = "<%=ResolveUrl(UploadFolderPath) %>" + args.get_fileName();
}
</script>
You need to register your JavaScript using the ScriptManager instance on your page - which you should already have if you're using AJAX. It has its own RegisterStartupScript method that you can use.