I have an ASP.NET page (WebForm1) that opens a modal dialog WebForm2 (via OpenForm2() js function) for some further processing. Upon closing the dialog I just update the UpdatePanel via JavaScript. Now the problem is, during this js call it doesn't block the UI.
This is only happening when I am calling the OpenForm2 js method from the server side (Button1_Click). As the UI already went into block mode, upon closing the WebForm2 it doesn't wait for the completion of partial postback (JavaScript) and unblocks the UI.
If I directly call the OpenForm2 js function in OnClientClick tag of the button (Button 2 in the sample), it works well and keeps blocking the UI till completion of postback.
I tried wrapping the partial postback js code in an add_endRequest, but in that case it keeps calling the refreshUpdatePanel() js method, hence blocking/unblocking the UI keeps going on. May this be happening due to two add_endRequest used on a page in that case?
Any assistance is highly appreciated in this regard.
NOTE: I have used jQuery blockUI for blocking the page during partial postbacks.
The code sample for the WebForm1 page is as follows. (The WebForm2 aspx page just have a button to close the dialog and a related js function).
WebForm1.aspx
<head runat="server">
<title></title>
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript">
function OpenForm2() {
var url = "WebForm2.aspx";
var width = 950;
var height = 455; // screen.availHeight - (120 + 65);
// open modal dialog
obj = window.showModalDialog(url, window, "dialogWidth:" + width + "px; dialogHeight:" + height + "px; center:yes");
// partial postback to reflect the changes made by form2
refreshUpdatePanel();
//Sys.WebForms.PageRequestManager.getInstance().add_endRequest(refreshUpdatePanel);
// ** here it doesn't wait for the completion and unblocks the UI **
}
function refreshUpdatePanel() {
//window.__doPostBack('UpdatePanel1', '1');
// a timeout/delay before a client side updatepanel postback. That compelled the UI to go in blocking again with a little screen flickering.
setTimeout('__doPostBack("<%= UpdatePanel1.ClientID %>", "1")', 0);
}
$(document).ready(function () {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
$.blockUI.defaults.css = {};
function InitializeRequest(sender, args) {
// Whatever you want to happen when the async callback starts
$.blockUI();
}
function EndRequest(sender, args) {
// Whatever you want to happen when async callback ends
$.unblockUI();
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text=""></asp:Label><br />
<asp:Button ID="Button1" runat="server" Text="Button 1" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Button 2" OnClientClick="OpenForm2();return false;" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
WebForm1.aspx.cs
protected void Button1_Click(object sender, EventArgs e)
{
// some server side processing here
System.Threading.Thread.Sleep(1000);
// then calling javascript function to open form2 as modal
ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType(), "Button1Click", "OpenForm2();", true);
}
protected void UpdatePanel1_Load(object sender, EventArgs e)
{
string parameter = Request["__EVENTARGUMENT"];
if (parameter == "1")
{
System.Threading.Thread.Sleep(3000);
Label2.Text = DateTime.Now.ToString();
}
}
use
function refreshUpdatePanel() {
__doPostBack"<%= UpdatePanel1.ClientID %>", '1');
}
instead of
function refreshUpdatePanel() {
window.__doPostBack('UpdatePanel1', '1');
}
thank you
Related
I have an asp.net page. & I am using jquery confirm plug in from here.
https://craftpip.github.io/jquery-confirm/
I want that when user clicks a button, they are prompted for a confirm dialog & when they say confirm,only then my button click on server should get fired. I do not want to use the window.confirm dialog.
I was able to use jquery confirm & called postback manually via Button's ClientClick property.
The __doPostBack event is firing. However, the click event on server side for the button is not getting fired.
What am i missing ?
ASPX Code :
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Tester.aspx.cs" Inherits="BLF_Gauri.Tester" %>
<html>
<head>
<script src="Scripts/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.3/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.3/jquery-confirm.min.js"></script>
</head>
<body>
<form runat="server">
<asp:Button ID="Button2" runat="server" Text="YEs" OnClick="Button2_Click"
OnClientClick="return TestClick(this);" />
</form>
<script type="text/javascript">
function TestClick(x)
{
jQuery.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
buttons: {
confirm: function () {
__doPostBack("'" + x.id + "'", 'OnClick');
},
cancel: function () {
// Do Nothing
}
}
});
return false;
}
</script>
</body>
</html>
The Code Behind : (Simplified)
protected void Page_Load(object sender, EventArgs e)
{
//IT COMES HERE.
}
protected void Button2_Click(object sender, EventArgs e)
{
//IT DOES NOT COME HERE.
}
So I solved this!! Instead of using __dopostback I used this.
WebForm_DoPostBackWithOptions(
new WebForm_PostBackOptions("" + x.name + "", "", true, "", "", false, true));
x.name coz inside a master page. id changes.
Hi I had implemented the code in which on adding to cart the item gets add and also one popup gets open which shows cart item.
On desktop it is working well but on mobile device it is not working.
For mobile device it is shoeing error as
Uncaught ReferenceError: showvalue is not defined
Here is my below code
<script type="text/javascript">
function showvalue(value, product) {
$('#<%= lblproduct1.ClientID %>').text(product);
$('#<%= lblVessel.ClientID %>').text(value);
$('.cart_popup').show();
setTimeout(function () {
$('.cart_popup').fadeOut('slow');
}, 5000);
return false;
}
function Showprogress() {
$('#<%= Progress.ClientID %>').show();
}
Html side on .ascx page
<asp:Button ID="AddToBasketButton" OnClientClick="Showprogress()" runat="server" OnClick="AddToBasketButton_Click" EnableViewState="false" ValidationGroup="AddToBasket" Text="Add to Cart" />
My .cs side code (Passing total and productquantity)
ScriptManager.RegisterClientScriptBlock(this.Page, typeof(UpdatePanel), UniqueID, "showvalue('" + Total + "','" + productquantity + "');", true);
I am facing issue for mobile device only.
On clicking button my page get refresh and popup is not getting open
I had remove jquery popup and made use of Ajax Modal popup.
The popup was opening fine as I was calling it from .cs side but to hide it automatically after 5 second it was not working in that case I had used below code.
<asp:Button ID="AddToBasketButton" OnClientClick="Showprogress();" runat="server" OnClick="_Click" Text="button" />//button click and onclient click
//Below div is only showing processing image :-)
<div id="Progress" runat="server" style="display: none;">
<img src="../images/spinner.gif" />
</div>
My script
<script type="text/javascript">
$(document).ready(function () { hide_pop(); });
function Showprogress() {
$('#<%= Progress.ClientID %>').show();
hide_pop();
return false;
}
function hide_pop() {
setTimeout(function () {
$('.popup_cart_main').fadeOut('slow');//Popup Panel class
$('.modalBackground').fadeOut('slow');//Background blacklayout Class
}, 5000);
return false;
}
Modalpopup
<asp:LinkButton ID="lnkDummy" runat="server" ></asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground" >
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="popup_cart_main" Style="display: none">
<div class="cart_popup" >
Solved
</div>
</asp:Panel>
This code is working in all browser and all mobile including iphone & Android
I also think(According to actual question) that in case if I had not removed jquery popup and only placed below code my popup had been started working in mobile too
$(document).ready(function () { showvalue (); });// based on actual question
Ensure that your script is rendered before calling RegisterClientScriptBlock. HTML parsing is linear.
Did you miss to copy the closing tag or you just didn't do it on code too?
It should be:
<script type="text/javascript">
function showvalue(value, product) {
$('#<%= lblproduct1.ClientID %>').text(product);
$('#<%= lblVessel.ClientID %>').text(value);
$('.cart_popup').show();
setTimeout(function () {
$('.cart_popup').fadeOut('slow');
}, 5000);
return false;
}
function Showprogress() {
$('#<%= Progress.ClientID %>').show();
}
</script>
Try another approach:
In javascript:
<script type="text/javascript"> var jName = '<%=cName()%>'</script>
In c#:
protected string cName() {
return "examplevarcontent";
}
i have a function like this:
<script type="text/javascript" >
function postBack(e) {
var lnk=document.getElementById('<%=e.getAttribute("ClientID") %>');
lnk.click();
};
</script>
and have a link button like this:
<asp:LinkButton onfocus="postBack(this);" id="lnk_home" runat="server"
AccessKey="h" onclick="lnk_home_Click">Home</asp:LinkButton>
I want to redirect page when i press Alt+h
But it does not work. I get the following error when i press Alt+h:
[Compiler Error Message: CS0103: The name 'e' does not exist in the current context]
Any suggestions about how to fix this problem? Thanks
UPDATE**
Server side code:
protected void lnk_home_Click(object sender, EventArgs e)
{
home home_view = LoadControl("home.ascx") as home;
Panel pnl_view = (Panel)ContentPlaceHolder1.FindControl("pnl_view");
//pnl_view.Controls.Clear();
pnl_view.Controls.Add(home_view);
}
You don't need a separate JavaScript function, just use this.click():
<asp:LinkButton onfocus="this.click()" id="lnk_home" runat="server" AccessKey="h" onclick="lnk_home_Click">Home</asp:LinkButton>
Or if you do want to use a separate function (perhaps to perform some common routine on multiple LinkButtons) invoke click method on passed object itself:
<asp:LinkButton onfocus="postBack(this);" id="lnk_home" runat="server" AccessKey="h" onclick="lnk_home_Click">Home</asp:LinkButton>
<script type="text/javascript" >
function postBack(oLink) {
// some common code
oLink.click();
};
</script>
UPDATE When you actually click the link with the mouse - event may fire twice, so you need to limit it to one click:
<asp:LinkButton onfocus="this.AllowClick=true;this.click();" OnClientClick="if (this.AllowClick) {this.AllowClick=false} else {return false}" id="lnk_home" runat="server" AccessKey="h" onclick="lnk_home_Click">Home</asp:LinkButton>
Surely will be marked as duplicate one but after tons of question and example i couldn't solve my problem.
What i want?
Calling server side event handler in asp.net from client side java script it is not going on server side. I checked it by setting breakpoint, the page flicks but server side method is not called.
My click event on code behind is
protected void btninsert_Click(object sender, EventArgs e)
{
// my code
}
aspx file
<asp:Button ID="btninsert" runat="server" ValidationGroup="form" CssClass="btn"
OnClientClick="DoPost()" Text="Save" />
Javascript method is
function DoPost() {
function DoPost() {
var chk = document.getElementById('<%= chkstatus.ClientID %>');
if (chk.checked)
__doPostBack('<%= btninsert.ClientID %>', 'OnClick');
return true;
//return false;
}
}
I also tried this
__doPostBack('btninsert', 'OnClick'); and __doPostBack('btninsert', ''); and $('btnSubmit').trigger('click'); with no success.
What am i doing wrong?
Edit: If i uses OnClick event then it is going in the server side event irrespective of the if condition in the DoPost method.
Ahh it was simple. Thanks to all answers.
Solution:
Use OnClick attribute for server side event and OnClientclick for client event for validation.
OnClientClick javascript method will return true and false which decides whether serverside onclick event will fire or not.
Code will be somthing like this
<script type="text/javascript">
function DoPost() {
var chk = document.getElementById('<%= chkstatus.ClientID %>');
if (chk.checked) {
var c = confirm("are you sure?");
if (c == true) {
return true;
} else
{ return false; }
}
return true;
}
</script>
And the Button tag
<asp:Button ID="btninsert" runat="server" ValidationGroup="form" CssClass="btn"
OnClientClick="return DoPost();" OnClick="btninsert_Click" Text="Save" />
it can work!!
if you call __doPostBack('btninsert', ''), add below to Page_Load
protected void Page_Load(object sender, EventArgs e)
{
if ( Request["__EVENTTARGET"] == "btninsert" ) {
btninsert_Click(sender, e);
}
}
<asp:Button ID="btninsert" runat="server" ValidationGroup="form" CssClass="btn" OnClick="btninsert_Click" OnClientClick="DoPost()" Text="Save" />
Add OnClick="btninsert_Click", because without this information, asp.net has no way know which event handler to run for the "Click" event. In case you want to control whether to post back by client side script. You can do something like this:
<asp:Button ID="btninsert" runat="server" ValidationGroup="form" CssClass="btn" OnClick="btninsert_Click" OnClientClick="return DoPost()" Text="Save" />
function DoPost() {
__doPostBack('<%= btninsert.ClientID %>', 'OnClick');
return true;
//return false;
}
Note the OnClientClick="return DoPost()"
<asp:Button ID="btninsert" runat="server" ValidationGroup="form" CssClass="btn"
OnClientClick="return DoPost();" Text="Save" />
modify your line like this
You can try Ajax, by using Webmethod. I used this in my project and it works fine! You may see the question, solutions and code here: http://www.codeproject.com/Questions/416748/How-to-Call-WebMethod-of-Csharp-from-JQuery
Use ASP link button instead of ASP BUTTON. Button control is not called from javascript because it type is submit while link button type is button.
For example i have added two asp control
<asp:LinkButton ID="lbtest" runat="server" Text="Link Button"></asp:LinkButton>
<asp:Button runat="server" ID="btnbutton" Text="Button" />
and execute the page
When we view the source of running page its look like this
<a id="lbtest" href="javascript:__doPostBack('lbtest','')">Link Button</a>
<input type="submit" name="btnbutton" value="Button" id="btnbutton" />
<asp:UpdatePanel ID="UpdatePanel2" runat="server"
OnLoad="UpdatePanel2_Load" UpdateMode="Conditional">
<ContentTemplate>
<script type="text/javascript">
myFunction();
</script>
<asp:Label ID="Label1" runat="server" Text="1" Width="18px"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
C#:
if(condition)
{
UpdatePanel2.Update();
}
protected void UpdatePanel2_Load(object sender, EventArgs e)
{
Label1.Text += 1;
}
the Label1's value is changing but it doesn't call myFunction(). I want to call it one more time after the some condition but not using setTimeout to auto call, some ideas?
When the UpdatePanel updates the DOM and rewrites script blocks into the DOM, they are not re-executed. You need to get on the client-side event that fires after the UpdatePanel is finished and re-execute your JS blocks:
<script type="text/javascript">
function handleEndRequest(sender, args)
{
var panel = document.getElementById(sender._postBackSettings.panelID);
var scripts = panel.getElementsByTagName('script');
for(var i=0;i<scripts.length;i++) {
eval(scripts[i].innerHTML);
}
}
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(handleEndRequest);
</script>
I have made it works by refreshing the whole page