I am using the below mentioned jQuery scripts to alert users when they try to navigate before saving data.
NavigateAway
The problem I am having is the validation doesn't work for the buttons that are in updatePanel.
All the others work well.
Thanks in advance
Based on the code you linked to, the way this plugin works is by subscribing to the onbeforeunload event. I don't believe this event is triggered when UpdatePanel executes async requests.
Take a look at the example here of how to manually trigger the validation: calling onbeforeunload from an updatepanel (note, code copied from the link provided).
function pageLoad() {
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequest);
}
// This fires before the partial postback occurs
function InitializeRequest(sender, args) {
// Call the validation function here, should be something like this
handleOnBeforeUnload();
}
Related
(Note: Just to clarify the problem is not specifically related to C1WebDateEdit. It could be with any custom control which require JavaScript to render actual control)
I have many C1WebDateEdit controls in my page. On a button click based on some condition I am displaying JavaScript alert message ScriptManager.RegisterStartupScript. These controls are inside UpdatePanel. The issue I am facing with it is, when these C1WebDateEdit has not value and page displays alert message, it displays "01/01/0001" behind the alert box and on closing alert it shows empty textboxes.
The reason is, C1WebDateEdit creates actual control using JavaScript. and page renders alert message JavaScript before C1WebDateEdit controls' JavaScript.
For example:
HTML markup
alert JavaScript
C1WebDateEdit JavaScript
Logical solution is get alert JavaScript after C1WebDateEdit JavaScript because it will allow C1WebDateEdit to load fully before alert box.
I found no inbuilt way in asp.net to change sequence, so I tries solution given here but It didn't work for me.
One possible solution I am thinking that I create Custom or WebUserControl and place at it last at the page in the UpdatePanel and PreRender event I call ScriptManager.RegisterStartupScript to register alert message. Logically I think it will work but trying to find that any one implemented any other solution for it?.
Other possible solution is use "pageLoaded" event of PageRequestManager. I created below function for temporary fix:
function delayedAlertBox(strMsg)
{
var fnc = function (a, b)
{
//remove reference so on next call it do not show previous alerts.
Sys.WebForms.PageRequestManager.getInstance().remove_pageLoaded(fnc);
alert(strMsg);
}
//add function reference to call on Ajax pageloaded event
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(fnc);
}
and calling in asp.net like simple function as given below:
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "dd", "delayedAlertBox('Hi, how are you?')", True)
But still looking for any other good alternative. If I found other, I will post it.
I have a custom control (ascx) which implements the IPostBackEventHandler interface for intercepting custom events triggered by custom rendered HTML links.
In this control I use an update panel and inside the update panel I use a literal control in which I render custom HTML links.
When I render the HTML links inside the literal control I use a StringBuilder with the following code:
sb.AppendFormat ("Text",
this.Page.ClientScript.GetPostBackClientHyperlink(this, custom_string_param));
Hyperlinks are rendered fine, and when clicking on them an asynchronous postback is triggered and a partial update is fired (since all links are rendered inside the Update panel).
The problem is that I need to do some custom Javascript before firing the __doPostBack which is rendered with the above code. So here is a simplified version of the changed code:
sb.AppendFormat ("Text",
custom_string_param);
Also in the ascx markup I use the following code (inside or outside the Update panel):
<script language="javascript" type="text/javascript">
function JSFunc(param) {
// custom js code here ....
__doPostBack('<%=this.ClientID%>', param);
}
</script>
The problem here is that when a link is clicked it performs a full postback and not a partial one. I also tested more simple versions of the above code and it seems that if you remove the __doPostBack from the href or the onclick events from the link ( tag) and move it to a custom js function which in turns you supply to the link, a full postback is triggered.
Note that there is no error on the page and in both cases the code work correctly. The page is rendering correctly depending on the parameters returned from the __doPostBack, but in the second case a full instead of partial postback is firing.
Any ideas?
Thanks in advance,
George
I think you can't call __doPostBack with the ClientID. It actually uses UniqueIDWithDollars, but generally with ASP.NET Web Forms I say: you don't want to know.
Since calling this method is all about abstracting away the details of how post back works, you would be better off asking the framework for the code. Luckily, there's a special method just for that, which will take care of the details. In your code it would look like something like this:
<script language="javascript" type="text/javascript">
function JSFunc(param) {
// custom js code here ....
<%= Page.ClientScript.GetPostBackEventReference(this, custom_string_param) %>
}
</script>
This let's the client script manager create the piece of JavaScript code, using a reference to your user control (this) and any custom event argument (custom_string_param).
There's one caveat though. When calling it this way, it will add javascript: to the beginning of the string.
To override this behaviour, you need to use an overload of GetPostBackEventReference that accepts an instance of PostBackOptions as its first argument, the instance having its RequiresJavaScriptProtocol property set to false.
PostBackOptions options = new PostBackOptions(this, custom_string_param)
options.RequiresJavaScriptProtocol = false;
Page.ClientScript.GetPostBackEventReference(options)
I have a master page with a public ShowWaitingDialog property. When set to true, I simply show a modal "Please wait..." overlay when the form is submitted. This is done by registering a client-side function called ShowWaitingDialog() using the following:
Page.ClientScript.RegisterOnSubmitStatement(Page.GetType(), "ShowWaitingDialog", "ShowWaitingDialog()");
As a side note, I also have a function the coder can use if linking to a page that may take a while to load:
public void AttachWaitingDialog(HyperLink HyperLinkControl){
if (this.ShowWaitingDialog)
HyperLinkControl.Attributes.Add("onclick", "ShowWaitingDialog();");}
These work just fine until an UpdatePanel is introduced onto the page. The dialog is correctly shown when a postback happens inside an update panel. However, it never goes away when the request is complete. I was hoping there was some sort of global complete event that the Microsoft ajax framework uses when making update panels requests. That way I could close my modal overflow when executed. Is there?
I haven't tried it yet, but I guess I could use the ScriptManager to always register a startup script which hides the modal overlay, but I was wondering if there was another way.
You can use Javascript and use the PageRequestManager clientside api provided by Microsoft Ajax framework.
<script type='text/javascript'>
var pageMgr = Sys.WebForms.PageRequestManager.getInstance();
pageMgr.add_beginRequest(BeforeAjaxRequest);
pageMgr.add_endRequest(AfterAjaxRequest);
function BeforeAjaxRequest(sender, args)
{
alert('MyReqeustStart');
}
function AfterAjaxRequest(sender, args)
{
alert('MyReqeustEnd');
}
</script>
More Details here:
http://msdn.microsoft.com/en-us/library/bb311028.aspx
I'm not sure with UpdatePanels, but you might take a look at the Application_EndRequest method in Global.asax
Basically I want to get some javascript to be sent back to the client and executed from a postback inside an UpdatePanel. Furthermore this is inside of a reusable WebControl.
I've tried this.Page.ClientScript.RegisterStartupScript and this.Page.ClientScript.RegisterClientScriptBlock but Firebug shows that those scripts aren't sent back in the postback's response.
I also tried straight up writing a <script> tag inside the control's main div in the Render
method, which does get sent back but isn't executed.
I got a hacky solution working, but ideally looking for a cleaner solution. The hack is to add a 1x1 pixel img with width/height set to 0 and use that for an onload event to execute the script and that works, but it seems like there has to be a cleaner way to do this.
If I understand correct you look for the endRequest event - to avoid the onload of your image. With this code you get the event of your panel update on javascript side.
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(sender, args) {
}
function EndRequest(sender, args) {
}
As the title suggests, I am having trouble maintaining my code on postback. I have a bunch of jQuery code in the Head section and this works fine until a postback occurs after which it ceases to function!
How can I fix this? Does the head not get read on postback, and is there a way in which I can force this to happen?
JavaScript is:
<script type="text/javascript">
$(document).ready(function()
{
$('.tablesorter tbody tr').tablesorter();
$('.tablesearch tbody tr').quicksearch({
position: 'before',
attached: 'table.tablesearch',
stripeRowClass: ['odd', 'even'],
labelText: 'Search:',
delay: 100
});
});
</script>
If you just have that code hard coded into your page's head then a post back won't affect it. I would check the following by debugging (FireBug in FireFox is a good debugger):
Verify the script is still in the head on postback.
verify that the css classes are in fact attached to some element in the page.
verify that the jquery code is executing after the browser is done loading on post back.
EDIT: Are you using UpdatePanels for your post back? In other words is this an asynchronous postback or a normal full page refresh?
EDIT EDIT: AHhhhh... Ok. So if you're using UpdatePanels then the document's ready state is already in the ready so that portion of jquery code won't be fired again. I would extract the jquery delegate out to a separate function that you can also call after the async postback.
put your code in
function pageLoad(sender, args) {
/* code here */
}
instead of in $(document).ready(function() { ... });
pageLoad() is a function that will execute after all postbacks, synchronous and asynchronous. See this answer for more details
How to have a javascript callback executed after an update panel postback
I'm guessing that the postback pre-empts the page's onLoad event, which jQuery needs to hook into to use it's .ready().
Does the script exist in the HTML code after the postback?
If so, does the code get executed? Test by commenting out your code and temporarily add alert('test');
If so, are the elements referenced by the code available on the page after postback?
Instead of using $(document).ready you should put your code in a function called pageLoad(). The pageLoad() function is by convention wired up to be called whenever the page has a postback/asyncpostback.