I have a ASP.NET page using ValidationGroup. If the validation fails, I want the page to scroll to an anchor (#edit). Here is my code so far:
<div id="edit">This is my anchor area</div>
<div>
<asp:TextBox runat="server" ID="txtDescription" ValidationGroup="Edit" />
<asp:TextBox runat="server" ID="txtComment" ValidationGroup="Edit" />
<asp:Button runat="server" ID="btnSave" OnClick="btnSave_OnClick" OnClientClick="ValidatePage();" ValidationGroup="Edit" CausesValidation="True" />
</div>
<script type="text/javascript">
function ValidatePage() {
if (!Page_ClientValidate("Edit")) {
location.hash = "edit";
}
}
</script>
First time I click the button, the page scroll to the anchor (#edit) if validation fails. But, If I click the button again, the page does not scroll to the anchor.
How can this be fixed, so that the page allways scroll to the anchor if validation fails? Even if the button is allready clicked (#edit is in the url).
Related
I've a page where on page load event I've set focus on a textbox using javascript. But after button press I've to set focus on different text box of different asp:Panel. Is this possible using javascript? Currently I am doing this via code behind page.
<script type="text/javascript">
$(function () {
document.getElementById('<%=txtPassengerId.ClientID%>').focus();
});
</script>
<asp:Panel ID = "firstPanel" >
<asp:TextBox ID="txtPassengerId" runat="server"/>
<asp:Button ID="btn_search" runat="server" Text="Search" OnClick="btn_search_Click" />
</asp:Panel>
<asp:Panel ID = "secondPanel" >
<asp:TextBox ID="txtDestination" runat="server"/>
</asp:Panel>
After the button pressed secondPanel is visible and I need to focus on txtDestination text box. Is this possible using javascript?
Yes, you have to use the selector you've used "document.getElementById" and use the .focus() function.
document.getElementById("secondpanel").style.visibility = "visible";
document.getElementById("txtDestination").focus();
should do it. if you need more just comment.
I have an UpdatePanel inside page with couple of buttons. Each button cause PostBack event. But I found that user can click multiple times in button and crash application. I want ot disable all buttons on first click until postback will be handled and new content of UpdatePanel arrived.
I tried to bind (via jquery) to 'click' event of button, set 'disabled; attribute and call 'submit' on parent form. Unfortunately is seems that this method not working - content of UpdatePanel still old.
After that I tried to override 'submit' event but faced another issue - how to submit form again if I came to my handler each time? It may be fixed with introducing flag variable, but I dislike it - another variable just increase code entropy.
Maybe I can do it somehow with ASP.NET methods?
Apply ajax UpdateProgress and put your code in UpdatePanel as to disable Button after first click:
<aspAtlas:UpdateProgress ID="upUpdatePanelProgress" runat="server" DisplayAfter="0"
DynamicLayout="true" AssociatedUpdatePanelID="updpnlProgram">
<ProgressTemplate>
<asp:Panel ID="Panel1" CssClass="overlay" runat="server">
<img runat="server" id="img1" src="../Images/UpdateProgress.gif" alt="Loading..." /><br />
<br />
<b>Loading...</b>
</asp:Panel>
</ProgressTemplate>
</aspAtlas:UpdateProgress>
<aspAtlas:UpdatePanel runat="server" ID="updpnlProgram" UpdateMode="Conditional">
<ContentTemplate>
<div>
//--Your code in this div
</div>
</ContentTemplate>
<Triggers>
<aspAtlas:PostBackTrigger ControlID="Button_ID" />
</Triggers>
</aspAtlas:UpdatePanel>
was trying to switch from button to hyperlink(previous post) but couldnt get it working so have decided to use the link button instead.
in my aspx page I am using
<script type ="text/javascript">
function showImg(url)
{
$("#imagePreview").attr("src", url);
}
</script>
<div style="height:50px; margin-top:25px; margin-bottom:25px;">
<img id="imagePreview" alt="" width="30" height ="30"></img>
</div>
then in my ascx page I am using
<input type="button" onclick='javascript:showImg("<%# FieldValueString %>")' />
this works fine, when the button is clicked the pic is displayed below however I want a link button instead.
Ive tried the examples on http://www.devmanuals.com/tutorials/ms/aspdotnet/linkbutton.html but no joy,
iv tried
<asp:LinkButton
ID="LinkButton1"
runat="server"
Text="Preview"
Font-Bold="True"
ForeColor="Maroon"
PostBackUrl='javascript:showImg("<%# FieldValueString %>")' />
but nothing happens when I click the button do I have to add anycode to the .cs file?
Please help
thaks
You are using the incorrect property. Try this:
<asp:LinkButton
ID="LinkButton1"
runat="server"
Text="Preview"
Font-Bold="True"
ForeColor="Maroon"
OnClientClick='javascript:showImg("<%# FieldValueString %>"); return false;' />
How can I make postback after user changes textbox text and hits enter ?
Is only javascript real solution. Doesnt asp.net give any out from box solution for such a problem ?
Thank You for any hints.
Beside the javascript solutions, you can place the textbox with a submit button inside a panel and make use of DefaultButton property of the panel.
Below is the code example: -
Your aspx will look like this
<asp:Panel ID="Panel1" runat="server" DefaultButton="Button1">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</asp:Panel>
Now, when you press enter inside the text box the button click event occurs, same as by clicking the button.
I have a chat application, I want that whenever user accidentally or manually closes the browser ,he should get an alert so that various clean up operations could be carried out. I have more thing i itried to use on before event but I want that to be used for a particular web page as all other web pages are also called on before load. Please help
This is not really a JQuery thing, I use this functions:
function setConfirmUnload(on) {
window.onbeforeunload = (on) ? unloadMessage : null;
}
function unloadMessage() {
return "Are you sure you want to leave this page";
}
Then, at any time you can call
setConfirmUnload(true) to enable the confirmation or false if you want to allow them to close the screen without a warning (if you have a close button for instance).
We should prevent or prompt user that on performing these actions he will lose his data.
Click on back browser button.
Click on refresh browser button.
Click on close button of browser.
Click of forward browser button.
Keyboard stroke- Alt+F4 (Close)
Keyboard stroke- F5 (Refresh)
Keyboard stroke-CTRL+ F5 (Refresh)
Keyboard stroke-Shift+ F5 (Refresh)
Change of url
Or anything that cause postback other than your particular submit button.
To explain that I have used two textboxes, one Asp.net submit button with id TestButton.
Other postback controls that I have taken are
One other asp.net button,one checkbox with autopostback property true,one dropdownlist with autopostback property true.
Now I have used all these postback controls so that to show you that we also need to show promt to user about the data lose when user perform actions on these controls.
On submit button we will not show the prompt as we have to submit the data with that control action.Here is the sample code.I have set window.onbeforeunload method on controls change.
<html >
<head id="Head1">
<title></title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
// Prevent accidental navigation away
$(':input').bind(
'change', function() { setConfirmUnload(true); });
$('.noprompt-required').click(
function() { setConfirmUnload(false); });
function setConfirmUnload(on)
{
window.onbeforeunload = on ? unloadMessage : null;
}
function unloadMessage()
{
return ('You have entered new data on this page. ' +
'If you navigate away from this page without ' +
'first saving your data, the changes will be lost.');
}
window.onerror = UnspecifiedErrorHandler;
function UnspecifiedErrorHandler()
{
return true;
}
});
</script>
</head>
<body>
<form id="form1" name="myForm" runat="server">
<div>
First Name :<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<br />
Last Name :<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
<br />
IsMarried :<asp:CheckBox ID="CheckBox1" runat="server" /><br />
<br />
<asp:Button runat="server" ID="TestButton" Text="Submit" CssClass="noprompt-required" /><br />
<br />
<br />
<br />
<br />
<asp:Button runat="server" ID="AnotherPostbackButton" Text="AnotherPostbackButton"
/><br />
<br />
<asp:CheckBox runat="server" ID="CheckboxWhichCausePostback" Text="CheckboxWhichCausePostback"
AutoPostBack="true" /><br />
<br />
DropdownWhichCausePostback<asp:DropDownList runat="server" ID="DropdownWhichCausePostback"
AutoPostBack="true">
<asp:ListItem Text="Text1"></asp:ListItem>
<asp:ListItem Text="Text2"></asp:ListItem>
</asp:DropDownList>
<br />
<br />
</div>
</form>
</body>
Above I have used:
$('.noprompt-required').click(function() { setConfirmUnload(false); });
What I have done in this line is I am calling setConfirmUnload method and passing false as argument which will set the window.onbeforeunload to null.
So what that means is on any control where you want that user should not be prompted, give that control the class .noprompt-required and leave other as it is.
You can try the unload event:
$(window).unload( function () { alert("Bye now!"); } );
http://docs.jquery.com/Events/unload
I'm guessing this cleanup is on the client only. It would be interesting to know the nature of these "cleanups".
You may try this with ajax
$(window).unload( function () { alert("AJAX function to do required job"); } );