fire a function after triggering a click event - javascript

How can fix this :
function Navigation(sender) {
var senderID = sender.id;
var answer = confirm("do you want to save your current layout ?");
if (answer) {
$("#loadingImg").css("display", "block");
$("#<%=Button1.ClientID %>").click();
//the next line is never fired
if (senderID == "AboutClick") { setTimeout('ShowLoadingMsg()', 3000); }
}
}
function ShowLoadingMsg() {
window.location="About.aspx";
}
<a href="javascript:void(0)" id="AboutClick" class="menu" onclick="Navigation(this);" >Navigate Click</a>
<asp:Button ID="Button1" runat="server" OnClick="btnSaveState_Click" style="display:none;" />
//Server side:
protected void btnSaveState_Click(object sender, EventArgs e)
{
SaveState();
}
The main problem is that this line is never fired what am i doing wrong here

The problem here is that $("#<%=Button1.ClientID %>").click(); causes the entire page to reload. It won't really matter what scripts you set a timeout for after that, since the page is refreshed anyway.
You could try putting Button1 inside an UpdatePanel, or just solve the problem in another way, such as saving state and redirecting in the same method.

Try this:
Navigate Click​
-
$(function(){
$(".trigger").click(function(){
var answer = confirm("do you want to save your current layout ?");
if (answer) {
$("#loadingImg").show();
if (this.id == "AboutClick") { setTimeout('ShowLoadingMsg()', 3000); }
$("#<%=Button1.ClientID %>").click();
}
})
})
function ShowLoadingMsg() {
window.location="About.aspx";
}
Demo here!

Related

Redirect to a page after a pop up opens

I am trying to redirect a web page after a condition is returned as true but I can't seem to get it work. In theory this should, shouldn't it. What am I missing, is it even possible!
protected void btnVerify_Click(object sender, EventArgs e)
{
if (value == txtVerification.Text || txtVerification.Text == "****")
{
//defines a bool to tell if the popup window has been shown, this will only ever return true
bool PopupShown = doRedirect();
if(PopupShown)
{
Response.Redirect("somewebpage.aspx");
}
}
else
{
lblVerificationFailed.Visible = true;
}
}
//Opens the popup window to fire off the download and returns true
bool doRedirect()
{
string url = "GetDocs.aspx";
string s = "window.open('" + url + "', 'GetDocs', 'height=150,width=300,left=100,top=30,resizable=No,scrollbars=No,toolbar=no,menubar=no,location=no,directories=no, status=No');";
ClientScript.RegisterStartupScript(this.GetType(), "script", s, true);
return true;
}
You are trying to do in the server things that can be much more easily done on the client side.
You're using a server event to catch the click of a button on your view, launch a client popup and later redirect your page execution.
Try with something like this on javascript:
var btnVerify = document.getElementById("btnVerify");
btnVerify.addEventListener("click", function() {
window.open('GetDocs.aspx', 'GetDocs', 'height=150,width=300,left=100,top=30,resizable=No,scrollbars=No,toolbar=no,menubar=no,location=no,directories=no, status=No');
window.location.href = "somewebpage.aspx";
});
Sussed it, if I use window.location.replace instead of window.location it works exactly like I want it to. Many thanks all :)

onbeforeunload function having serious issue

I am using native.history.js to put a customised URL in the back button.
The script works fine. Now the issue is I want to make a page redirect when the refresh button is clicked; so i modified the script like this:
<script>
var back = 0;
$(window).bind('beforeunload', function () {
if (confirm('Want to continue?')) {
if (back == 1) {
alert('back');
//window.location.href = "<?=$$last_offer?>";
} else {
alert('refresh');
//window.location.href = "<?=$actual_link;?>";
}
} else {
// Do nothing!
}
});
window.onpageshow = function (e) {
if (e.persisted) {
location.reload();
}
};
window.onpopstate = function (event) {
if (document.location.toString().indexOf("redir=1") > 0) {
back = 1;
window.location.href = "<?=$$last_offer?>";
}
};
</script>
Issue is, the beforeunload function seems not working.
What is the problem I can't fin?.
If I am clicking the back button, the page is taking to the desired page, so it works fine.
All I want is that, somehow the page refresh must work as I anticipated.
Try use
$(window).on('beforeunload', function(){
return 'Are you sure you want to leave?';
});
Instead of bind, use on, i dont know what jquery version you use, but i will suggest "on".
Works fine here:
link
on jquery version 2.x(edge)

Confirmation box before closing tab, not when page is reloaded

My client requirement is to give an alert message when browser tab of my web application is closed. It can be done using JavaScript onunload or onbeforeunload event.
But there are many drop-down boxes in my application and selecting some of drop-down boxes, page needs to be reloaded. During this reloading each time onunload or onbeforeunload is fired and alert message is displayed. I want to stop firing this onunload or onbeforeunload event on reloading page but display alert message when browser tab is closed. If there were any changes in URL, it would be helpful. But my URL is not changed.
I know there is no direct JavaScript event support for this situation. Can anyone suggest alternative solution?
Update:
<script language="JavaScript1.2" type="text/javascript">
var g_isPostBack = false;
function windowOnBeforeUnload()
{
if ( g_isPostBack == true )
return; // Let the page unload
if ( window.event )
window.event.returnValue = 'Are you sure?'; // IE
else
return 'Are you sure?'; // FX
}
window.onbeforeunload = windowOnBeforeUnload;
</script>
Code behind:
protected void Page_Load(object sender, EventArgs e)
{
this.ClientScript.RegisterOnSubmitStatement(this.GetType(), "OnSubmitScript", "g_isPostBack = true;");
}
try the below code and update us if this is your requirement.
<script type="text/javascript">
var new_var = true;
window.onbeforeunload = function () {
if (new_var) {
return "you have unsaved changes, if you leave they will be lost"
}
}
function unhook() {
new_var = false;
}
</script>
faced the same problem try this script
<script language="JavaScript" type="text/javascript">
window.onbeforeunload = confirmExit;
function confirmExit() {
return "You are about to exit the system before freezing your declaration! If you leave now and never return to freeze your declaration; then they will not go into effect and you may lose tax deduction, Are you sure you want to leave now?";
}
$(function() {
$("a").click(function() {
window.onbeforeunload = null;
});
$("input").click(function() {
window.onbeforeunload = null;
});
});
</script>

Strange behavior of confirmation in Telrik ?

somePage.aspx
<asp:LinkButton Runat="server" ID="butDelete" CommandName="Delete" OnClientClick="Confirmation();return flag;"><img src="images/delete.gif" border="0" title='<asp:Literal runat="server" Text="<%$ Resources:ClarityResources, resDelete %>" />'></asp:LinkButton>
ClientSideCode.js
function confirmCallBackFn(sender) {
debugger;
if (sender)
flag = true;
else
flag = false;
return flag;
}
function Confirmation(sender,args) {
debugger;
radconfirm('Are you sure you want to delete this file?', confirmCallBackFn);
}
but the on click always returns false which is default value set for the flag variable
When i did debugging i seen that the on client click the method confirmation gets called and it returns the default value false to the control and after clicking on the confirmation box's Yes or cancel it again runs the call back method confirmCallBackFn(sender) seperatly which returns flag but not in same thread but in different thread. I tried different ways to solve it but i am stuck . so any help would be great .
You're trying to treat the radconfirm in the same way as a plain javascript confirm(), this isn't done in a like-for-like manner. I'll start with the Confirmation function.
function Confirmation(sender, args) {
debugger;
// The line below will open a rad confirmation window, it will not wait for the response
radconfirm('Are you sure you want to delete this file?', confirmCallBackFn);
}
To ensure that it doesn't automatically post back the above function should be changed as follows:
function Confirmation(sender, args) {
debugger;
// This line will open a rad confirmation window, it will not wait for the response
radconfirm('Are you sure you want to delete this file?', confirmCallBackFn);
// The line below will prevent the control from automatically posting back
return false;
}
The next step is correcting the call back function; The parameter passed into the function, as can be seen from the code rather than the parameter name is the boolean representation of the result from the confirmation box.
function confirmCallBackFn(sender) {
debugger;
if (sender)
flag = true;
else
flag = false;
return flag;
}
The previously written function returns a value, but this isn't used anywhere. The following code will perform the required action
function confirmCallBackFn(arg) {
debugger;
if (arg) {
// The line below will perform a post back, you might want to trigger this a different way
__doPostBack(sender.id, "");
}
}
Unfortunately as the sender is not passed into the callback function it is necessary to declare the function within the other JavaScript function as follows:
function Confirmation(sender) {
debugger;
// The callback function
function confirmCallBackFn(arg) {
debugger;
if (arg) {
// Triggers postback only when confirmation box returns true
__doPostBack(sender.id, "");
}
}
// This line will open a rad confirmation window, it will not wait for the response
radconfirm('Are you sure you want to delete this file?', confirmCallBackFn);
return false;
}
You might find the following link useful in regards to using the radconfirm in the same way as a confirm:
http://demos.telerik.com/aspnet-ajax/window/examples/confirmserverclicks/defaultcs.aspx.
This is how I alert user to confirm the delete event !
<telerik:RadButton ID="btnDelete" runat="server" Text="Delete"
OnClick="btnDelete_clicked" OnClientClicking="RadConfirm" Width="100px">
</telerik:RadButton>
<script type="text/javascript">
function RadConfirm(sender, args) {
var callBackFunction = Function.createDelegate(sender, function (shouldSubmit) {
if (shouldSubmit) {
this.click();
}
});
var text = "Are you sure you want delete ?";
radconfirm(text, callBackFunction, 300, 100, null, "Confirm Apply !");
args.set_cancel(true);
}
</script>
protected void btnDelete_clicked(object sender, EventArgs e)
{
//Write your server-side delete code here
}

Javascript to detect start and end of AsyncPostback of specific Update Panel

<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(endRequest);
prm.add_initializeRequest(initializeRequest);
var _postBackElement;
function initializeRequest(sender, e)
{
if (prm.get_isInAsyncPostBack())
{
e.set_cancel(true);
}
_postBackElement = e.get_postBackElement();
document.getElementById('loadingm').style.visibility = 'visible';
}
function endRequest(sender, e)
{
$find('PopCustom_').show();
document.getElementById('loadingm').style.visibility = 'hidden';
}
</script>
This code will work on every AsyncPostback, but I want it to work Update-Panel specific.
Not being too familiar with JS, I don't know where I to do the modification.
Help would be greatly appreciated.
Best solution so far is:
var cmdAuthoriseButton ='<%= cmdAuthorise.ClientID %>';
function beginReq(sender, args){
if (cmdAuthoriseButton == args._postBackElement.id)
{
// shows the Popup
$find(ModalProgress).show();
}
}
To trigger of the start is pretty easy because something has to trigger it so you can always add code to whatever is triggering the refresh.
To trigger off of the completion of an UpdatePanel being refreshed is not as straight forward but the framework has provided some javascript functionality to help with this. The following javascript code will trigger off of an UpdatePanel refresh completing:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.pageLoaded(YourJavascriptFunctionNameHere);
//or
prm.add_pageLoaded(YourJavascriptFunctionNameHere);
Then implement the function you registered:
function YourJavascriptFunctionNameHere(sender, args)
{
// do something
}
If you want you can use the same method to work off the start of the UpdatePanel refresh as well using
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.beginRequest(YourJavascriptFunctionNameHere);
// or
prm.add_beginRequest(YourJavascriptFunctionNameHere);
I think you can figure out what element is causing the refresh from the sender or args params but you will need to read more about this function on MSDN.
EDIT: (from the MSDN article, an example of figuring out which UpdatePanel is refreshing)
function beginRequest(sender, args) {
postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
var updatedPanels = args.get_panelsUpdated();
if (typeof(postbackElement) === "undefined") {
return;
}
else if (postbackElement.id.toLowerCase().indexOf('external') > -1) {
for (i=0; i < updatedPanels.length; i++) {
panelUpdatedAnimation.animatePanel(updatedPanels[i]);
}
}
}

Categories

Resources