I'm trying to write javascript code in my mobile form, however I'm kinda beginer in this case.
I have a mobile form with a lable and a textbox in it. How can I make the lable to automatically display the number of characters entered into a text box (i.e. the number changes as the user types).
I couldn't do it using the mobile label control (I only know basic javascript). So I used 2 regular text controls instead. I had to put these into the content template of a device specific inside a panel control, like shown below:
txt1JS As System.Web.UI.WebControls.TextBox
Dim txt2JS
As System.Web.UI.WebControls.TextBox
txt1JS = FindControlInDeviceTemplate(
"txtBox1", pnlTextBoxes)
txt2JS = FindControlInDeviceTemplate(
"txtBox2", pnlTextBoxes)
If
(Not txt1JS
Is Nothing)
And (Not txt2JS
Is Nothing)
Then
txt1JS.Attributes.Add(
"onkeypress",
"javascript:ShowTypedText('" + txt1JS.ClientID +
"','" + txt2JS.ClientID +
"')")
End If
Now whatever you type in txtBox1 should show up in txtBox2.
Note:- FindControlInDeviceTemplate is my own function to find a given control given its ID. I found it over this forum (I guess). Here it is:
Protected
Function FindControlInDeviceTemplate(ByVal ID
As String,
ByRef cStart As Control)
Dim c As Control, oRet
As Control
Dim t As Type =
GetType(MobileControls.TemplateContainer)
If cStart.HasControls()
Then
For Each c
In cStart.Controls
If oRet Is
Nothing Then
If t.IsInstanceOfType(c)
Then
oRet = c.FindControl(ID)
Else
If c.HasControls()
Then
oRet = FindControlInDeviceTemplate(ID, c)
End If
End If
End If
Next
End If
Return oRet
End Function
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.Mobile;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.MobileControls;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
public partial class wap_Test_JavaScript2_CSharp : System.Web.UI.MobileControls.MobilePage
{
protected void Page_Load(object sender, EventArgs e)
{
System.Web.UI.WebControls.TextBox tBox1 = Panel1.Content.FindControl("TextBox1") as System.Web.UI.WebControls.TextBox;
System.Web.UI.WebControls.Label l1 = Panel1.Content.FindControl("Label1") as System.Web.UI.WebControls.Label;
tBox1.Attributes.Add("onkeyup", "javascript:ShowTypedText('" + tBox1.ClientID + "','" + l1.ClientID + "')");
}
}
Thanks for your reply. I tried exactly the same as your code, however the page runs but as soon as a key is up the page is rendered with an error which is: "object expected"!
Any idea why that happens.
That code is really working fine. But here in the example you have used asp server controls in spite of asp.net mobile controls, is there any specific reason? And also can you tell me what are the implications of using the normal asp.net server controls
in mobile web form?
leila
Member
76 Points
183 Posts
JavaScript in Mobile Forms
May 02, 2007 10:34 AM|LINK
Hi,
I'm trying to write javascript code in my mobile form, however I'm kinda beginer in this case.
I have a mobile form with a lable and a textbox in it. How can I make the lable to automatically display the number of characters entered into a text box (i.e. the number changes as the user types).
Thank you for your help
bobbyz
Member
136 Points
64 Posts
Re: JavaScript in Mobile Forms
May 02, 2007 04:14 PM|LINK
I couldn't do it using the mobile label control (I only know basic javascript). So I used 2 regular text controls instead. I had to put these into the content template of a device specific inside a panel control, like shown below:
<mobile:Panel id="pnlTextBoxes" runat="server">
<mobile:DeviceSpecifi id="DeviceSpecific1" runat="server">
<Choice>
<ContentTemplate>
<asp:TextBox id="txtBox1" runat="server"></asp:TextBox>
<asp:TextBox id="txtBox2" runat="server"></asp:TextBox>
</ContentTemplate>
</Mobile:DeviceSpecific>
</Mobile:Panel>
To send the script down, I used another panel with a device specific, like:
<mobile:Panel id="pnlScript" runat="server">
<mobile:DeviceSpecifi id="DeviceSpecific2" runat="server">
<Choice>
<ContentTemplate>
<SCRIPT language="javascript">
<!--
function ShowTypedText(txt1, txt2)
{
document.getElementById(txt2).value = document.getElementById(txt1).value
}
-->
</SCRIPT>
</ContentTemplate>
</Mobile:DeviceSpecific>
</Mobile:Panel>
Now in the page load event, I do following:
Dim
txt1JS As System.Web.UI.WebControls.TextBox Dim txt2JS As System.Web.UI.WebControls.TextBoxtxt1JS = FindControlInDeviceTemplate(
"txtBox1", pnlTextBoxes)txt2JS = FindControlInDeviceTemplate(
"txtBox2", pnlTextBoxes)If
(Not txt1JS Is Nothing) And (Not txt2JS Is Nothing) Thentxt1JS.Attributes.Add(
"onkeypress", "javascript:ShowTypedText('" + txt1JS.ClientID + "','" + txt2JS.ClientID + "')") End IfNow whatever you type in txtBox1 should show up in txtBox2.
Note:- FindControlInDeviceTemplate is my own function to find a given control given its ID. I found it over this forum (I guess). Here it is:
Protected
Function FindControlInDeviceTemplate(ByVal ID As String, ByRef cStart As Control) Dim c As Control, oRet As Control Dim t As Type = GetType(MobileControls.TemplateContainer) If cStart.HasControls() Then For Each c In cStart.Controls If oRet Is Nothing Then If t.IsInstanceOfType(c) ThenoRet = c.FindControl(ID)
Else If c.HasControls() ThenoRet = FindControlInDeviceTemplate(ID, c)
End If End If End If Next End If Return oRet End Functionleila
Member
76 Points
183 Posts
Re: JavaScript in Mobile Forms
May 03, 2007 08:04 AM|LINK
Thanks for your reply. I really appreciate it.
I'm trying to convert it into C# language!!
Thanks again[:)]
leila
Member
76 Points
183 Posts
Re: JavaScript in Mobile Forms
May 03, 2007 10:24 AM|LINK
Couldn't make it work in c#!!!
I need more help.
SKT_01
Participant
1930 Points
435 Posts
Re: JavaScript in Mobile Forms
May 03, 2007 12:09 PM|LINK
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test_JavaScript2_CSharp.aspx.cs" Inherits="wap_Test_JavaScript2_CSharp" Debug="true" %> <%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <mobile:Form ID="Form1" Runat="server"> <mobile:DeviceSpecific ID="DeviceSpecific3" Runat="server"> <Choice Filter="supportsJavaScript" Xmlns="http://schemas.microsoft.com/mobile/html32template"> <ScriptTemplate> <script type="text/javascript"> <!-- function ShowTypedText(txt1, l1) { document.getElementById(l1).innerHTML = document.getElementById(txt1).value.length; } //--> </script> </ScriptTemplate> </Choice> </mobile:DeviceSpecific> <mobile:Panel ID="Panel1" Runat="server"> <mobile:DeviceSpecific ID="DeviceSpecific1" Runat="server"> <Choice Xmlns="http://schemas.microsoft.com/mobile/html32template"> <ContentTemplate> <asp:Label ID="Label1" runat="server" /> </br> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </ContentTemplate> </Choice> </mobile:DeviceSpecific> </mobile:Panel> </mobile:Form> </body> </html>Test_Javascript_CSharp.aspx.csleila
Member
76 Points
183 Posts
Re: JavaScript in Mobile Forms
May 03, 2007 01:04 PM|LINK
Hi SKT_01,
Thanks for your reply. I tried exactly the same as your code, however the page runs but as soon as a key is up the page is rendered with an error which is: "object expected"!
Any idea why that happens.
Thanks in advance
SKT_01
Participant
1930 Points
435 Posts
Re: JavaScript in Mobile Forms
May 03, 2007 01:09 PM|LINK
leila
Member
76 Points
183 Posts
Re: JavaScript in Mobile Forms
May 04, 2007 10:38 AM|LINK
leila
Member
76 Points
183 Posts
Re: JavaScript in Mobile Forms
May 04, 2007 10:43 AM|LINK
And that works absolutely fine.[:D]
Thank you sooooooo much.
apurva kaush...
Participant
1390 Points
302 Posts
Re: JavaScript in Mobile Forms
Jul 25, 2007 09:38 AM|LINK
That code is really working fine. But here in the example you have used asp server controls in spite of asp.net mobile controls, is there any specific reason? And also can you tell me what are the implications of using the normal asp.net server controls in mobile web form?
Hope to get a reply of this.