Develop Reference

Hidden field not getting set Ajax AutoCompleteExtender OnClientItemSelected

I'm trying to use the following Ajax AutoCompleteExtender:
<asp:TextBox runat="server" Width="300" ID="tbxItem" CssClass="NormalUpper" />
<asp:AutoCompleteExtender ID="autoCompleteExtenderItemName" runat="server"
MinimumPrefixLength="1" ServicePath="../Services/AutoCompleteSpecialOrders.asmx"
ServiceMethod="GetItems" CompletionInterval="100"
Enabled="True" TargetControlID="tbxItem" CompletionSetCount="15" UseContextKey="True"
EnableCaching="true" ShowOnlyCurrentWordInCompletionListItem="True"
CompletionListCssClass="dbaCompletionList"
CompletionListHighlightedItemCssClass="AutoExtenderHighlight"
CompletionListItemCssClass="AutoExtenderList" DelimiterCharacters="">
OnClientItemSelected="ItemSelected"
</asp:AutoCompleteExtender>
<asp:HiddenField runat="server" ID="hiddenItemId" />
We're using Master Pages (asp.net 4.0), User Controls and UpdatePanels. I'm having difficulty getting the OnClientItemSelected="ItemSelected" JavaScript/Jquery function to work. Here is the ScriptManagerProxy:
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" >
<Scripts>
<asp:ScriptReference Path="../common/script/AutoExtend.js"/>
</Scripts>
</asp:ScriptManagerProxy>
And here is the contents of AutoExtend.js (JavaScript & Jquery):
//function ItemSelected(sender, eventArgs) {
// var hdnValueId = "<%= hiddenItemId.ClientID %>";
// document.getElementById(hdnValueId).value = eventArgs.get_value();
// alert(hdnValueId.value);
// document.getElementById("tbxCatalogQty").focus();
// This try didn't work for me}
function ItemSelected(sender, e) {
var hdnValueId = $get('<%=hiddenItemId.ClientID %>');
hdnValueId.value = e.get_value();
alert(hdnValueId.value);
document.getElementById("tbxCatalogQty").focus();
} //Neither did this one.
The alert DOES show the correct value from our WebService drop-down-type list! I just can't seem to set the hidden field to this value so I can use it in the code-behind later. It always shows as "" when run in the debugger. Also, the .focus() method doesn't set the focus to the tbxCatalogQty field like I would like. I've also tried this with single-quotes and that didn't change anything either.
In my code behind, I've tried accessing the hidden field as follows without any luck:
//var itemId = Request.Form[hiddenItemId.Value];
var itemId = hiddenItemId.Value;
I've seen a couple of similar posts out there: 12838552 & 21978130. I didn't see where they mentioned anything about using Master Pages and User Controls and inside of an UpdatePanel (not sure that makes any difference, however).

With the help of a friend, he just figured out the solution. First, we did a JavaScript postback, passing in the value like this:
function ItemSelected(sender, e) {
var hdnValueId = $get('<%=hiddenItemId.ClientID %>');
hdnValueId.value = e.get_value();
window.__doPostBack('UpdatePanelOrdersDetails', hdnValueId.value);
}
Then, in the ASP:Panel that contained the AutoCompleteExtender, we added the "Onload="pnlInputCat_Load" parameter.
<asp:Panel ID="pnlInputCat" runat="server" OnLoad="pnlInputCat_Load">
Then, in the code behind, we added the pnlInputCat_Load method to look like this:
protected void pnlInputCat_Load(object sender, EventArgs e)
{
var theId = Request["__EVENTARGUMENT"];
if (theId != null && !theId.Equals(string.Empty))
{
Session["ItemCode"] = Request["__EVENTARGUMENT"];
tbxCatalogQty.Focus();
}
}
There certainly might be better ways to make this work, but I now have the ItemCode in a session variable for later access and I could then set focus on the Catalog Qty textbox.
Thanks for anyone who tried to understand/answer the above question.

Getting Javascript values from client on page load

I'm trying to determine the client window size on pageload, to use in creating a bitmap using c#. From reading on SO and elsewhere, I know that one method would be to:
Write a Javascript function to get the relevant values;
Store these in hidden fields;
Read the value using the code behind (c#) and then do stuff with it.
However, I'm getting tripped up by the execution sequence that runs code behind BEFORE any Javascript, even though I've set <body onload... to get and set the relevant values. (see below)
I know the rest of my code works, because, when I execute, the page shows the word "by" and the button. Then, after I have clicked the button and the page reloads, it can now suddenly read the two hidden values.
My question is, how can I get my c# Page_Load code to get those two hidden values from the client side, before it executes the rest of my code, and without the need for user action like clicking a button?
My page:
<body onload="getScreenSize()">
<form id="form1" runat="server">
<input type="hidden" name="hiddenW" ID="hiddenW" runat="server" />
<input type="hidden" name="hiddenH" ID="hiddenH" runat="server" />
<script>
function getScreenSize() {
var myW = document.getElementById("hiddenW");
myW.value = window.innerWidth;
var myH = document.getElementById("hiddenH");
myH.value = window.innerHeight;
}
</script>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
Code behind:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Write(hiddenW.Value+" by " +hiddenH.Value);
}
}
On first run (when I need those values), it shows
and after I click the button, it proves the Javascript works:
The question then, is how do I get those values before the rest of my Page_Load code runs, so that I can go straight into generating and displaying my image?

You cannot get the client window size before the C# Page_Load() executes because the page is rendered to the client after the C# code execution is complete.
The window size may change during page load, hence you have to get the window size only after page load is complete.
Solution:
You can use ajax to send the values to the back-end, after the page has loaded completely.
OR
You can cause a post-back using java-script after you get the correct value, this way:
JQuery:
$(function() {
var width = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
var height = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
$('#hdn_width').val(width);
$('#hdn_height').val(height);
$('#your_form').submit();
});
C#:
protected void Page_Load(object sender, EventArgs e)
{
try
{
if (IsPostBack)
{
// Use hdn_width and hdn_height here
}
}
catch (Exception ex)
{
}
}

Use the IsPostBack property
This would solve your problem
For Example
if(!Page.IsPostBack)
{
//Control Initialization
//Your code goes here
}

I used a timer to postback once and two none-displayed textboxes to store the window-values width and height. the textboxes are filled with a javascript:
document.getElementById('<%=TxWd.ClientID %>').value = window.innerWidth;
document.getElementById('<%=TxHt.ClientID %>').value = window.innerHeight;
In code behind (VB.NET):
Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
Session("seswidth") = Val(TxWd.Text)
Session("sesheigth") = Val(TxHt.Text)
Timer1.Enabled = False
End Sub

How to bind ASP TextBox's Text to its ToolTip?

I would like to the ToolTip always be the same as the ASP TextBox's Text. Of course I can write
AnyTextBox.Text = "any text";
AnyTextBox.ToolTip = "any text";
but I do not want to duplicate hundreds of assignment statements.
I also could write change event handlers for the Text property, but I do not want to write dozens of event handlers just for this (if there is a more elegant solution)
Is there? Something like this:
<asp:TextBox ID="AnyTextBox" runat="server" ToolTip="binding magic goes here, but how?">
Thx in advance

You could write your own custom control which inherits from TextBox? I used the Text property to set the tooltip, but you can do it the other way around if you want.
Control:
public class TooltipTextBox : TextBox {
public new string Text {
get { return base.Text; }
set
{
base.Text = value;
this.ToolTip = value;
}
}
}
Markup:
<my:TooltipTextBox ID="AnyTextBox" runat="server" Text="binding magic goes here">

As far as i know there is no such automatism. For what it's worth, maybe you can use PreRender:
protected void Page_PreRender(Object sender, EventArgs e)
{
var allTextControlsWithTooltips = new List<WebControl>();
var stack = new Stack<Control>(this.Controls.Cast<Control>());
while (stack.Count > 0)
{
Control currentControl = stack.Pop();
if (currentControl is WebControl && currentControl is ITextControl)
allTextControlsWithTooltips.Add((WebControl)currentControl);
foreach (Control control in currentControl.Controls)
stack.Push(control);
}
foreach (var txt in allTextControlsWithTooltips)
txt.ToolTip = ((ITextControl)txt).Text;
}
You could also use a UserControl which handles this event, then you just need to put it on all of the pages that should behave in this way. Or you could let all pages inherit from one base page.

I think using a JavaScript event handler will be your easiest solution. You don't need to write hundreds of event handlers though. Just write one and then use that same event handler for all your text boxes!
<asp:TextBox ID="AnyTextBox" runat="server" onchange="setTooltip(this)" />
And then the script would be
function setTooltip(textbox) {
textbox.title = textbox.value;
}
That's it! Set that onchange event for all your Textboxes who you want to have this tooltip behavior.

You can do this in the TextChanged event of the textbox :
<asp:TextBox ID="AnyTextBox" runat="server" TextChanged="AnyTextBoxTextChanged">
protected void AnyTextBoxTextChanged(object sender, EventArgs e)
{
this.AnyTextBox.Tooltip = this.AnyTextBox.Text;
}

That depends if you are looking for "live update" of tooltip = i.e. do you want to change the tooltip when the user changes the text on website? Then use "onchange" event of the input and JS function that would change its "title" attribute on each event call.
Or you want to ease of your server-side work and do not want to specify tooltip and text for each item, then go with custom control way (and I recommend RGraham code).
Or match both methods and use custom control that would also provide JS "refresh" code :-)

Try using jquery
$(function () {
var maybe = true;
var text = $('.myTextBox').val();
if (maybe) {
$('.myTextBox').attr('title', text);
}
});

How to set focus at the end of textbox while typing?

I have a textbox with a live search function. It is working all good except one problem. If I type any characters on it, it just loses its focus. If I set textbox.Focus(), the cursor goes at the beginning of the textbox.
I have tried most of solutions on the internet. Please check my codes below.
asp:TextBox ID="searchCompany" runat="server" Text="" CssClass="searchCompany" AutoPostBack="true" Width="190px" OnTextChanged="searchCompany_TextChanged"></asp:TextBox>
In page_Load
protected void Page_Load(object sender, EventArgs e)
{
//ScriptManager1.RegisterAsyncPostBackControl(Menu1);
menuDisplay();
searchCompany.Attributes.Add("onkeyup", "setTimeout('__doPostBack(\\'" + searchCompany.UniqueID + "\\',\\'\\')', 0);");
//searchCompany.Attributes.Add("onfocus", "javascript:setSelectionRange('" + "','')");
//searchCompany.Focus();
}
and I have tried javascript as below
<script type="text/javascript">
function setSelectionRange() {
var inputField = document.getElementById('searchCompany');
if (inputField != null && inputField.value.length > 0) {
if (inputField.createTextRange) {
var FieldRange = inputField.createTextRange();
FieldRange.moveStart('character',inputField.value.length);
FieldRange.collapse();
FieldRange.select();
}
}
}
</script>
I have tried to put codes on a method "searchCompany_TextChanged" which is calling if user type any characters on a textbox everytime however it is not working as well.
I saw other solutions with using Textbox.Select() but System.Windows.Control is not working in asp.net i guess.
Any idea??

There's a very simple trick that's worked for me. Basically, set the text value of the of input to itself to its own text value, and that will move the cursor to the end of the text. Then just focus it. This code uses jQuery to demonstrate that, but you should be able to do that in straight JS as well.
HTML
<input type="text" id="focusText"></input>
<button id="focusButton">Set Focus</button>
JavaScript
$("#focusButton").click(function() {
var text = $("#focusText").val();
$("#focusText").val(text).focus();
})
Here's a non jQuery example of the JavaScript, HTML should be the same:
document.getElementById("focusButton").onclick = function() {
var inputElement = document.getElementById("focusText");
var text = inputElement.value;
inputElement.value = text;
inputElement.focus();
}
Here's a fiddle demonstrating the non-jQuery version of the code: http://jsfiddle.net/C3gCa/

ImageButton ASP.Net changing Image URL in a control

I'm setting up a Web User Control in ASP 4. The control itself works correctly, and the code for the onload even is the same as used in my standard aspx pages.
protected void GetTranslationImage(object sender, EventArgs e)
{
ImageButton image = (ImageButton)sender;
objTranslation = new TranslationsHelper();
string sTranslationID = image.ImageUrl.ToString();
string lang = ((NRMaster)this.Master).Language;
lang = lang == null ? "en-gb" : lang;
image.ImageUrl = objTranslation.GetTranslation(sTranslationID, lang);
}
When the object is passed through onLoad it doesn't contain the default URL during GetTranslationImage. The object changes to the translation required however it reverts back following in the HTML on the page load.
The definition of the ImageButton is as follows:
<asp:ImageButton ID="btnSearch" runat="server" name="Search" value="Search" class="Search" src="/_resources/img/BTN_search.gif" onclick="btnSearch_Click" onLoad="GetTranslationImage" />
Does the control alter the time this function needs to be run.
Any help would be greatly appreciated.
Thank You
James

Why are you setting src="/_resources/img/BTN_search.gif" if you are overwriting it in OnLoad?
1: Remove it
Or
2: Change it to:
ImageUrl="/_resources/img/BTN_search.gif"

What if you made the transition method public from within the usercontrol and you simply call out to that method in your page load?
page_load()
{
myusercontrol.StartImageTransition();
}
Public Methods inside User control c# .net