I need to update an UpdatePanel on onkeyup event of textbox, I've writed this code:
<%# Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="elenco.aspx.vb" Inherits="GestioneCommesse.WebForm1" EnableEventValidation = "false"%>
<asp:Content ID="BodyContent" ContentPlaceHolderID="Main" runat="server">
<asp:CheckBox ID="chc_tutti_anni" runat="server" Text="Cerca in tutti gli anni" AutoPostBack="true" style="top: 151px; left: 10px; position: absolute; " />
<asp:TextBox ID="txt_commessa" runat="server" onkeyup="javascript:__doPostBack('<%= UpdatePanel1.UniqueID %>','')" style="top: 90px; left: 250px; position: absolute; width: 199px"></asp:TextBox>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="chc_tutti_anni" EventName="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
The problem is that the javascript:__doPostBack('<%= UpdatePanel1.UniqueID %>','') performs a full page postback, instead of postpack only the UpdatePanel.
On event CheckedChange everything is fine.
I've also tried this line:
<asp:TextBox ID="txt_commessa" runat="server" onkeyup="javascript:__doPostBack('<%= UpdatePanel1.UniqueID %>','')" autopostback="true" style="top: 90px; left: 250px; position: absolute; width: 199px"></asp:TextBox>
Someone could help me?
------EDIT------
I've just tried this solution, same problem
How to trigger an UpdatePanel by a TextBox control?
------EDIT------
The question still unsolved, please help me.
Your textbox should be inside UpdatePanel->ContentTemplate.
Related
Good Morning
I have a webpage with a button pad on it. It is used at a gas station with bad network so everytime they click on the button to add a number to the textbox it will load forever so I changed the button clicks to javascript.
It works perfectly but now the code behind gets an empty value (Not null) when i retrieve the value from the textbox.
This is my code
The buttons used to add the numbers to the textbox
and the textbox
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="OVKWEBAPP.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="mainstyle.css" />
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
/*background-color: black;*/
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtRknr" runat="server" CssClass="txtBoxRknr" PlaceHolder="Rekening Nommer" Enabled="False" autocomplete="off" Width="175px"></asp:TextBox>
<input type="button" id="btnPad1" runat="server" value="1" class="buttonsb" onclick="input(this);"/>
<input type="button" id="btnPad2" runat="server" value="2" class="buttonsb" onclick="input(this);"/>
<asp:Button ID="btnMsg1" runat="server" Text="Gaan Voort" CssClass="buttonsa" OnClick="btnMsg1_Click" />
</form>
</body>
<script type="text/javascript">
function input(e) {
document.getElementById("<%=txtRknr.ClientID %>").value = document.getElementById("<%=txtRknr.ClientID %>").value + e.value;
}
</script>
</html>
And this is my code in the code behind file
protected void btnMsg1_Click(object sender, EventArgs e)
{
lblError.Text = "";
//string user = txtRknr.Text;
string user = ((TextBox)FindControl("txtRknr")).Text;
if(user == "")
//if (txtRknr.Text == "")
{
lblError.Text = "ONGELDIGE REKENING NOMMER";
return;
}
}
Basically all this needs to do is add an account number to a textbox from an button pad on the website.
After the account is added they would click on continue button and then the code behind checks if the textbox is empty if it is not empty it connects to database to check if it is valid.
But no matter how many numbers i add to the textbox it is still empty when i access it from code behind.
Enabled="False" means that your input field will have a disabled attribute. Disabled form elements do not get posted in HTML forms, which means that when you access it from the code-behind, it's using the default value of the textbox.
Try ReadOnly="True" instead of Enabled="False" if you don't want the field to be edited by hand.
EDIT
I guess ASP.NET prevents you from reading the value from a ReadOnly=True textbox, to prevent you from doing exactly what you're trying to do. A <asp:HiddenField> creates an <input type="hidden">, which you should be able to write the value and have it posted properly to the codebehind.
In the line
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="OVKWEBAPP.WebForm1" %>
replace in Inherits="OVKWEBAPP.WebForm1" with Inherits="OVKWEBAPP.default"
try this.
Request.Form["by-name-attribute"];
Simple question: How do I refer to JavaScript code on a Master page file, (which is also on the same folder as many other ASPX pages), from one of my ASPX pages?
Master Page
<%# Master Language="C#" AutoEventWireup="true" CodeFile="JobRegister.master.cs" Inherits="JobRegister_Job" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Tec-NQ miJob Register</title>
<style type="text/css">
textarea { font-family: Arial; font-size: 10pt; }
a { white-space: nowrap; }
.tablestyle { background-color:#eeeeee; width:100%; margin-bottom:2px; padding:3px; }
.checkboxlist input { position:relative; left: 360px; }
.checkboxlist label { position:relative; left: -22px; }
.hidepanel { display: none; }
.showpanel { display: block; }
</style>
<script src="<%# ResolveUrl("~/") %>" type="text/javascript">
/*
Added : Variables required for image uploading & validation checking.
By : Amit Champaneri
On : 4th April 2008
*/
var hoverColor = "#00000b"; //DIV Color when mouse is hover the DIV
var defaultColor = "black"; //DIV default color
var selectColor = "#000000"; // DIV color when its selected.
var selectedDIV = ""; //ID of the DIV user has currently selected(it will be 1,2,3 or 4)
var objActiveX; //Object of Clipboard ActiveX control.
..
..etc..
My ASPX page has a reference to the Javascripts in the Master Page ...
ASPX page
<%# Page Language="C#" MasterPageFile="~/JobRegister/JobRegister.master" AutoEventWireup="true" CodeFile="Details.aspx.cs" Inherits="JobRegister_Details" %>
<%# Register TagPrefix="tecnq" TagName="JobAction" Src="ActionControl.ascx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="JobID, CreatedBy" GridLines="None"
AllowPaging="True" DefaultMode="Edit" OnDataBound="FormView1_OnDataBound" OnItemCreated="FormView1_OnItemCreated"
OnItemUpdated="FormView1_OnItemUpdated" OnItemUpdating="FormView1_Updating"
HeaderText="Job Details" CellPadding="0" Font-Names="Arial" Font-Size="10pt">
<HeaderStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" HorizontalAlign="Center" Height="30px" />
<InsertItemTemplate>
...
..etc..
...
<img id="imgPaste1" src="Images/imgPaste.gif" class="LinkImage" title="Click here to Paste any copied Image" onclick="javascript:pasteOnClick('1');" />
..
..etc..
..
I got all this from a great blog on how to paste clipboard IMAGEs into a web form ...
http://www.codeproject.com/Articles/25967/Clipboard-ActiveX-for-Image-Copy-Paste-into-Web-Fo
The demo in the above blog works great, but both the Javascript and the ASPX code are all inside the same file!
How can I do the same with the Javascript in the MasterPage and have references to the scripts in my ASPx file?
I tried also to place all the code inside just my ASPX file but I get an invalid reference error on this line of code ...
document.getElementById("<%=hdnImageFileName1.ClientID %>").value = "";
It's saying it cannot find a reference to "hdnImageFileName1", but I know it's in my ASPX page further down ...
ie
<asp:HiddenField runat="server" ID="hdnImageFileName1" />
Thanks in advance.
The answer was like #deostroll said. I moved all my JS code into a custom.js file and referenced it simply via markup. Simple. Done! Thank you
I trying to show the modal pop using jQuery, ajax updateprocess with progress bar. I'm not good in both. I searched in google and got some example. This code is working without updatepanel. Please help me to work this code with updatepanel.
------------------code without updatepanel--------------
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
z-index: 99;
background-color: transparent;
opacity: 0.8;
filter: alpha(opacity=90);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
position: fixed;
background-color: transparent;
z-index: 999;
}
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
<asp:Button ID="btnSubmit" onclick="btnInvoke_Click" OnClientClick="ShowProgress()"
runat="server" Text="Submit Time" Width="170px" />
<div class="loading" align="center" style="display:none">
<img src="images/a1.gif" alt="" />
</div>
---------------with update panel--------------
<asp:UpdateProgress ID="updProgress" runat="server">
<ProgressTemplate>
<div class="loading" align="center" style="display:none">
<img src="images/a1.gif" alt="" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblText" runat="server" Text=""></asp:Label>
<br />
<asp:Button ID="btnInvoke" runat="server" Text="Click" OnClientClick="ShowProgress()"
onclick="btnInvoke_Click" />
</ContentTemplate>
</asp:UpdatePanel>
When I'm using updatepanel how can I close this popup and loader.please help me to write that jQuery.
Please suggest good example with popup with progress bar in updatepanel or any other way to do it.
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1"
AssociatedUpdatePanelID="UpdatePanel1" runat="server">
Update in Progress……..
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Button ID="Button1" runat="server"
OnClick="Button1_Click" Text="Button" />
This code works only with the 2 alerts active in the script block, if you comment the first or the second alert the geocode function doesn't work.
It is a simple asp.net page that try to obtain latitude and longitude from an address, in this case hard coded:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/Global/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 100%">
<div style="width: 50%; clear: left; float: left; text-align: right;">
Latitudine:
</div>
<div style="width: 50%; float: left; text-align: left;">
<asp:TextBox ID="TxbLatitudine" runat="server" Columns="20" />
<asp:Button ID="BtnFind" runat="server" Text="Cerca cordinate" OnClientClick="javascript: findLocation();" />
</div>
</div>
<div style="width: 100%">
<div style="width: 50%; clear: left; float: left; text-align: right;">
Longitudine:
</div>
<div style="width: 30%; float: left; text-align: left;">
<asp:TextBox ID="TxbLongitudine" runat="server" Columns="20" ></asp:TextBox>
</div>
</div>
</form>
<script type="text/javascript">
function findLocation() {
var geocoder = new google.maps.Geocoder();
alert("before"); //if you remove this doesn't work
geocoder.geocode({ 'address': "Cagliari, Italy" }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
$('#<%= TxbLatitudine.ClientID %>').val("a");
} else {
$('#<%= TxbLongitudine.ClientID %>').val("not OK");
}
});
alert("after"); //if you remove this doesn't work
}
</script>
</body>
</html>
I replaced the asp:Button with html input button:
<input id="Button1" type="button" value="Find..." onclick="javascript: findLocation();" />
the first one caused page postback that interfered with the client script block function.
The idea of the code was to make a separate text box and button so i can create class for each one and make them work like fileupload.
But the javascript runs twice and the fileupload value gets erased.
<style type="text/css">
div.fileinputs
{
position: relative;
}
div.fakefile
{
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file
{
visibility:hidden;
}
</style>
<script type="text/javascript" language="javascript">
function uploadFileChange() {
alert("start");
document.getElementById('FileName').value = document.getElementById("FileUpload1").value;
alert("end");
}
</script>
<div class="fileinputs" style="width: 50%;">
<!-- Upload file invisivel-->
<asp:FileUpload ID="FileUpload1" ClientIDMode="Static" class="file" runat="server"
onpropertychange="uploadFileChange();" />
<!-- button e textbox falsas para poder dar syles ao button-->
<div class="fakefile">
<asp:TextBox ID="FileName" CssClass="textbox" ClientIDMode="Static" runat="server" Width="31%" ></asp:TextBox>
<asp:Button ID="FileChooserButton1" CssClass="btnSubmit" runat="server" Text="Procurar..."
ForeColor="White" onClick="document.getElementeByID('FileUpload1').click()" />
</div>
</div>
Whats wrong???
Thanks in advance
little correction to your code,
<asp:Button ID="FileChooserButton1" CssClass="btnSubmit" runat="server" Text="Procurar..." ForeColor="White" onClientClick="document.getElementeByID('FileUpload1').click();return false;" />
writing return false to clickevent will not post back, the reason why you are losing fileuplaod value is because the page is getting post backed.
or else you could try this,
<asp:Button ID="FileChooserButton1" CssClass="btnSubmit" runat="server" Text="Procurar..." ForeColor="White" onClientClick="CallClick();return false;" />
function CallClick(){
document.getElementeByID('FileUpload1').click();
return false;
}