I have a Javascript that when i write in one textbox, it fills another textbox. But i need that the focus stay in a third textbox.
Actually, my code is:
<script type="text/javascript" language="javascript">
function SelectValue(source, eventArgs) {
document.getElementById('<%= txtCodeProduct.ClientID %>').value = eventArgs.get_value();
document.getElementById('<%= txtQuantity.ClientID %>').focus();
}
</script>
but the focus don't work...If i put an alert in a code, the focus work:
<script type="text/javascript" language="javascript">
function SelectValue(source, eventArgs) {
document.getElementById('<%= txtCodeProduct.ClientID %>').value = eventArgs.get_value();
document.getElementById('<%= txtQuantity.ClientID %>').focus();
alert("test");
}
How i resolve this without use alert ?
My textbox are in a form that uses update panel.
Thanks.
Try:
function SelectValue(source, eventArgs) {
document.getElementById('<%= txtCodeProduct.ClientID %>').value = eventArgs.get_value();
setTimeout( function(){
document.getElementById('<%= txtQuantity.ClientID %>').focus();
}, 0);
}
What version of Asp.Net do you use? otherwise you can use ClientIDMode
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx
<asp:TextBox ID="txtCodeProduct" runat="server" ClientIDMode="static" />
<asp:TextBox ID="txtQuantity" runat="server" ClientIDMode="static" />
I also recommend using jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script type="text/javascript">
function SelectValue(source, eventArgs) {
$("#txtCodeProduct").val(eventArgs.get_value());
$("#txtQuantity").focus();
}
http://api.jquery.com/focus/
Related
I have a user-control in which I have a textbox. I am using jQuery auto-fill in this text-box.
When I use this user-control on a page multiple times, it doesn't work. I know its because of repeat ids of textbox but I am not getting how to solve this problem. Help me please .
Here is my UserContol
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Classes.ascx.cs" %>
<asp:TextBox ID="txtClass" placeholder="search Class" type="text" runat="server" EnableViewState="true"
ClientIDMode="Static" Width="250px" OnTextChanged="txtClass_TextChanged"></asp:TextBox>
<script language="javascript">
$(function () {
$("#txtClass").autocomplete({
source: function (request, response) {
var oClass = $("#txtClass").val().replace('*', '');
.
.
.
.
}
});
}
Update
here is html
<input name="ctl00$BodyContent$txtClassasd$txtClass" id="txtClass" placeholder="search Class" type="text" style="width:250px;" />
<script language="javascript">
$(function () {
$("#txtClass").autocomplete({
source: function (request, response) {
var test = document.getElementById("txtClass").value;
var oClass = $("#txtClass").val().replace('*', '');
<input name="ctl00$BodyContent$Classes1$txtClass" id="txtClass" placeholder="search Class" type="text" style="width:250px;" />
<script language="javascript">
$(function () {
$("#txtClass").autocomplete({
source: function (request, response) {
var oClass = $("#txtClass").val().replace('*', '');
You need to use ClientID for server controls
$("#<%=txtClass.clientID%>").autocomplete(
also remove ClientIDMode="Static" from the txtClass control
If you look at the html that is emitted to the browser, I'm guessing there is not actually a textbox with ID of 'txtClass'. You should be doing something like $("#<%= txtClass.ClientID %>")...
Use ID array:
How to selector ID textbox array using jquery
Or revise your selector
$("input").autocomplete({...
<script type="text/javascript">
{
function DisableBackButton() {
window.history.forward()
}
DisableBackButton();
window.onload = DisableBackButton;
window.onpageshow = function (evt) { if (evt.persisted) DisableBackButton() }
window.onunload = function () { void (0) }
}
</script>
I am using the following code in the master page to diable the back button.
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetExpires(DateTime.UtcNow.AddHours(-1));
Response.Cache.SetNoStore();
Response.ExpiresAbsolute = DateTime.Now.AddDays(-1d);
Response.Expires = -1500;
Response.CacheControl = "no-cache";
Page.Response.Cache.SetCacheability(HttpCacheability.NoCache);
I have a master page in that logout button is there once user click on that user will be redirected to logout page. This is working fine and once I am clicking on back button it is taking me to the last page I browsed. Even I tried with JavaScript.
I am creating timing out the session after 5 minutes. When session expires user will be redirected to session expiry page there also backbutton is taking me to the last page browsed.
Here this JavaScript functionality will work in all browsers and prevent users navigating back to previous page by hitting on browser back button check below piece of JavaScript code
<script type="text/javascript" language="javascript">
function DisableBackButton() {
window.history.forward()
}
DisableBackButton();
window.onload = DisableBackButton;
window.onpageshow = function(evt) { if (evt.persisted) DisableBackButton() }
window.onunload = function() { void (0) }
</script>
We need to place above script in header section of a page wherever we need to prevent users navigate back to another page by using browser back button.
I will explain our requirement with an example I have two pages Defaul1.aspx and Default2.aspx now I will redirect from Default1.aspx page to Defaul2.aspx page. After come from Defaul1.aspx page to Default2.aspx if I try to navigate back to Default1.aspx page from Defaul2.aspx then I want prevent user navigate back to previous page (Defaul1.aspx). To achieve this functionality place above JavaScript function in header section of required page.
After add our JavaScript functionality to our page that code will be like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Disable Browser Back buttons</title>
<script type="text/javascript" language="javascript">
function DisableBackButton() {
window.history.forward()
}
DisableBackButton();
window.onload = DisableBackButton;
window.onpageshow = function(evt) { if (evt.persisted) DisableBackButton() }
window.onunload = function() { void (0) }
</script>
</head>
<body >
<form id="form1" runat="server">
<div>
First Page
</div>
<div>
<asp:Button id="btnFirst" runat="server" Text="Go to First Page" PostBackUrl="~/Default.aspx" />
<asp:Button ID="btnSecond" runat="server" Text="Go to Second Page" PostBackUrl="~/Default2.aspx" />
<asp:Button ID="btnThree" runat="server" Text="Go to Third Page" PostBackUrl="~/Default3.aspx" />
</div>
</form>
</body>
</html>
We can also achieve this by disabling browser caching in code behind write the following lines of code in Page_Init event or Page_Load event and don’t forgot to add namespace using System.Web; because HttpCacheability related to that namespace.
protected void Page_Init(object sender, EventArgs e)
{
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetExpires(DateTime.Now.AddSeconds(-1));
Response.Cache.SetNoStore();
}
We need to place this code in a page wherever we need to disable browser back button
<script type="text/javascript" language="javascript">
window.onload = function () {
noBack();
}
function noBack() {
window.history.forward();
}
</script>
<body onpageshow="if (event.persisted) noBack();">
</body>
Hello,
You can do it like this,
Implement this code in master page
I have implemented this and it worked for me..
<script language="JavaScript">
this.history.forward(-1);
Redirect to Logout.aspx page on clicking "logout"
Add a new page as Logout.aspx with following body content.
Please wait. You are Logging out.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
</asp:Timer>
add javascript as below
function noBack() {
window.history.forward()
}
noBack();
window.onload = noBack;
window.onpageshow = function (evt) { if (evt.persisted) noBack(); }
window.onunload = function () { void (0); }
Logout.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
Response.Cache.SetExpires(DateTime.UtcNow.AddMinutes(-1));
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetNoStore();
}
protected void Timer1_Tick(object sender, EventArgs e)
{
Response.Redirect("Login.aspx"));
}
Source : http://geekswithblogs.net/Frez/archive/2010/05/18/back-button-issue-after-logout-in-asp.net.aspx
When user clicks logout button, you should write single line to clear the session.
Session.Abondon();
and navigate to logout page or login page. So that once user clicks logout button, he cannot go back becaause his session was cleared.
To disable the back button of the browser write the below code at master page header part as
<script language="JavaScript" type="text/javascript">
window.history.forward();
</script>
<script type="text/javascript">
function DisableBackButton() {
window.history.forward()
}
DisableBackButton();
window.onload = DisableBackButton;
window.onpageshow = function (evt) { if (evt.persisted) DisableBackButton() }
window.onunload = function () { void (0) }
</script>
I'm using this gauge in my contentplaceholder.
http://www.dariancabot.com/projects/jgauge_wip/
MyControl.ascx:
<link rel="stylesheet" href="Scripts/jgauge.css" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.8.0.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jgauge-0.3.0.a3.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jQueryRotate.2.2.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/excanvas.min.js"></script>
<div id="<%=this.ClientID%>_ctl" class="jgauge" ></div>
<script type="text/javascript">
$(document).ready(function () {
var isPostBack = <%= Page.IsPostBack ? "true" : "false" %>;
if(isPostBack == "true")
{
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
prm.add_endRequest(onEndRequest);
}
else{
var <%=this.ClientID%>_ctl;
<%=this.ClientID%>_ctl = new jGauge();
<%=this.ClientID%>_ctl.id = '<%=this.ClientID%>_ctl';
<%=this.ClientID%>_ctl.init();
}
});
function EndRequestHandler(sender, args){
var <%=this.ClientID%>_ctl;
<%=this.ClientID%>_ctl = new jGauge();
<%=this.ClientID%>_ctl.id = '<%=this.ClientID%>_ctl';
<%=this.ClientID%>_ctl.init();
}
</script>
In MyPage.aspx: (Contains dynamically created table having several such controls. putting the generated table on placeholder)
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:PlaceHolder id="phMain" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="myBtn" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="myBtn" runat="server" Text="Refresh" />
I have script manager on master page:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
But after async postback (hitting 'myBtn'), gauge disappears. Please Help. Trying to solve it since couple of days.
I was able to solve this with by going:
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance()
.add_endRequest(<%=this.ClientID%>_ctlEndRequestHandler);
var <%=this.ClientID%>_ctl;
<%=this.ClientID%>_ctl = new jGauge();
<%=this.ClientID%>_ctl.id = '<%=this.ClientID%>_ctl';
<%=this.ClientID%>_ctl.init();
});
function <%=this.ClientID%>_ctlEndRequestHandler(sender, args){
var <%=this.ClientID%>_ctl;
<%=this.ClientID%>_ctl = new jGauge();
<%=this.ClientID%>_ctl.id = '<%=this.ClientID%>_ctl';
<%=this.ClientID%>_ctl.init();
}
The only real difference is that the postback checks are no longer taking place. Your underlying problem is that $(document).ready will not fire on partial postbacks, which means that isPostBack is never actually getting set to true. Because of this, Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); was never executing, meaning that your EndRequestHandler never ran.
Edit
The other issue is that naming the method EndRequestHandler is guaranteed to cause problems if you have more than one of the control at the same time. To get around this, I appended <%=this.ClientID%>_ctl to the name of EndRequestHandler to ensure it was unique.
More info:
How do I use a jQuery $(document).ready and an ASP.NET UpdatePanel together?
http://encosia.com/document-ready-and-pageload-are-not-the-same/
I am trying to create an alert as described in this site http://needim.github.com/noty/
and here is the code
<head runat="server">
<title>Test</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<link rel="stylesheet" type="text/css" href="buttons.css" />
<script type="text/javascript" src="js/noty/themes/default.js"></script>
</head>
<body>
<div class="container">
<div id="customContainer">
</div>
</div>
<script type="text/javascript">
function generate(type, layout) {
var n = noty({
theme: 'defaultTheme',
text: 'Do you want to continue?',
buttons: [
{
addClass: 'btn btn-primary',
text: 'Ok',
onClick: function ($noty) {
// this = button element
// $noty = $noty element
$noty.close();
noty(
{
text: 'Record deleted !',
type: 'success',
callback:
{
onShow: function () { },
afterShow: function () { TakeValue(true); },
onClose: function () { },
afterClose: function () { }
}
});
}
},
{
addClass: 'btn btn-danger',
text: 'Cancel',
onClick: function ($noty) {
$noty.close();
noty(
{
text: 'Record not deleted !',
type: 'warning',
callback:
{
onShow: function () { },
afterShow: function () { TakeValue(false); },
onClose: function () { },
afterClose: function () { }
}
});
}
}
]
});
}
function TakeValue(result) {
if (result == true) {
document.getElementById("Hidden1").value = "true";
alert(document.getElementById("Hidden1").value);
} else {
document.getElementById("Hidden1").value = "false";
alert(document.getElementById("Hidden1").value);
}
}
function generateAll() {
generate('information', 'top');
}
</script>
<form id="form" runat="server">
<input id="Hidden1" type="hidden" value="false"/>
<asp:Button ID="Button2" runat="server" Text="Press" OnClientClick="return generateAll();" />
<input id="Button1" type="button" value="button" onclick="return generateAll();" />
</form>
</body>
I have placed two buttons ,one is HTML button while the other is of asp:Button,
The whole scenario just works fine when I use the HTML button ,but the page is not displaying the similar behavior in case of asp:Button click, I have placed a test function in JavaScript to test the OnClientClick event of the asp:Button and that worked fine,but I don't know why this alert is not getting called, I think there is some problem with the Noty JS.
Kindly give feed back
thanks.
As jbabey said in the comments:
an asp:button will cause a postback when clicked by default. you need to return false from the onclientclick, right now you are returning undefined since generateAll has no return.
Since you're using jQuery, I'd go one step further and not directly set the click attribute. Instead, set it using jQuery:
<script>
$(document).ready(function() {
$('#Button1').click(generateAll);
});
...
function generateAll(e) {
generate('information', 'top');
// This will prevent the default action of submitting the form.
e.preventDefault();
}
</script>
Could you please add UseSubmitBehavior="false" attribute to the asp:button.
<asp:Button ID="Button2" runat="server" Text="Press" UseSubmitBehavior="false" OnClientClick="return generateAll();" />
I hope this will resolve your issue. Please let me know whether it helped you or not.
I'm trying to show a modal dialog when the user click on an ASP.Net button. This is my page:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.6.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 300,
modal: true,
buttons: {
'Ok': function() {
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
;
}
});
});
function ShowDialog() {
$('#dialog').dialog('open');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="TreeNew" runat="server" Text="New" OnClientClick="ShowDialog();"/>
<asp:Label ID="Message" runat="server"></asp:Label>
<div id="dialog" title="Select content type">
<p id="validateTips">All form fields are required.</p>
<asp:RadioButtonList ID="ContentTypeList" runat="server">
<asp:ListItem Value="1">Text</asp:ListItem>
<asp:ListItem Value="2">Image</asp:ListItem>
<asp:ListItem Value="3">Audio</asp:ListItem>
<asp:ListItem Value="4">Video</asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
</form>
</body>
</html>
When I click on TreeNew button appears modal popup but inmediately the page do postback.
What's happening?
While adding a return false; will fix your problem (as suggested by other answers), I think the best thing for you to do is use a standard HTML button. There is no reason to use an ASP.NET control in this case since you do not intend to postback.
If you insist to use a ASP.NET button, however, at least set UseSubmitBehavior="False" so that the button is rendered as <input type="button"/> instead of <input type="submit"/>.
Try
OnClientClick="return ShowDialog();"
AND
function ShowDialog() {
$('#dialog').dialog('open');
return false;
}
This will prevent the postback.
Your OnClientClick needs to return false like so:
OnClientClick="ShowDialog(); return false;"
Buttons by default postback but return false prevents the default behavior
You're not returning false from your OnClientClick. When you don't explicitly return false, "true" in this situation is assumed. A return value of true from your OnClientClick indicates it's fine to do a postback. Try changing OnClientClick to the following (adding "return false" after your call to ShowDialog())
OnClientClick="ShowDialog();return false;"
This article maybe of some value to you: using-jquery-modal-dialog-confirmation-with-an-asp-net-server-control.
Hope this helps some.
Use preventDefault() jQuery function to prevent button postback
Try this:
function ShowDialog(evt) {
evt.preventDefault();
$('#dialog').dialog('open');
}