Remove From My Forums

JavaScript in Mobile Forms

Question
0

Sign in to vote

User-1097933300 posted

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

Wednesday, May 2, 2007 6:34 AM

Answers

0

Sign in to vote
User731069546 posted

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">



</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.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
<CHOICE Xmlns="http://schemas.microsoft.com/mobile/html32template"><CONTENTTEMPLATE></CONTENTTEMPLATE></CHOICE>
<?xml:namespace prefix = mobile /><mobile:DeviceSpecific id=DeviceSpecific7 runat="server"><CHOICE Xmlns="http://schemas.microsoft.com/mobile/html32template"><CONTENTTEMPLATE><?xml:namespace prefix = asp /><asp:TextBox id=txt1JS runat="server"></asp:TextBox><asp:TextBox id=txt2JS runat="server"></asp:TextBox></CONTENTTEMPLATE></CHOICE></mobile:DeviceSpecific>
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Wednesday, May 2, 2007 12:14 PM

User1634317999 posted
Test_Javascript_CSharp.aspx

<%@ 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.cs

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 + "')");
    }
}

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, May 3, 2007 8:09 AM

All replies

0

Sign in to vote
User731069546 posted

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">



</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.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
<CHOICE Xmlns="http://schemas.microsoft.com/mobile/html32template"><CONTENTTEMPLATE></CONTENTTEMPLATE></CHOICE>
<?xml:namespace prefix = mobile /><mobile:DeviceSpecific id=DeviceSpecific7 runat="server"><CHOICE Xmlns="http://schemas.microsoft.com/mobile/html32template"><CONTENTTEMPLATE><?xml:namespace prefix = asp /><asp:TextBox id=txt1JS runat="server"></asp:TextBox><asp:TextBox id=txt2JS runat="server"></asp:TextBox></CONTENTTEMPLATE></CHOICE></mobile:DeviceSpecific>
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Wednesday, May 2, 2007 12:14 PM
0

Sign in to vote

User-1097933300 posted

Thanks for your reply. I really appreciate it.
I'm trying to convert it into C# language!!

Thanks again[:)]

Thursday, May 3, 2007 4:04 AM
0

Sign in to vote

User-1097933300 posted

Couldn't make it work in c#!!!

I need more help.

Thursday, May 3, 2007 6:24 AM

User1634317999 posted
Test_Javascript_CSharp.aspx

<%@ 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.cs

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 + "')");
    }
}

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, May 3, 2007 8:09 AM

0

Sign in to vote

User-1097933300 posted

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

Thursday, May 3, 2007 9:04 AM
0

Sign in to vote

User1634317999 posted
If you copy and paste my code example you will not get this error.

Thursday, May 3, 2007 9:09 AM
0

Sign in to vote

User-1097933300 posted
Beleive me, I did.

Friday, May 4, 2007 6:38 AM
0

Sign in to vote

User-1097933300 posted

And that works absolutely fine.[:D]

Thank you sooooooo much.

Friday, May 4, 2007 6:43 AM
0

Sign in to vote

User459454307 posted

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.

Wednesday, July 25, 2007 5:38 AM
0

Sign in to vote

User-2145334059 posted

I could show txtBox1 by your code

<asp:TextBox id="txtBox1" runat="server"></asp:TextBox>

<asp:TextBox id="txtBox2" runat="server"></asp:TextBox>

but I dont know how to get values from

<asp:TextBox id="txtBox1" runat="server"></asp:TextBox>

<asp:TextBox id="txtBox2" runat="server"></asp:TextBox>

Could you help me some advices please

Thursday, November 5, 2009 7:56 PM
0

Sign in to vote

User1634317999 posted

Hello,

do you want to get the values with ECMAScript?

Friday, November 6, 2009 11:28 AM
0

Sign in to vote

User-2145334059 posted

>SKT_01

Hello, I'm VB programer.

and I want to get the values with ECMAScript or Serverside VB.

ECMAScript is the best , Because when I try to get value from Textbox1 or 2

with Serverside Script , I couldnt find control (txtbox1 ,txtbox2)

So I think that I need to use findcontrol class (DeviceSpecific1) ???

BUt I couldnt ...

And If I can get ECMAScript then Performanse is the best.

I think ...

Saturday, November 7, 2009 8:52 AM
0

Sign in to vote

User1634317999 posted

If you take a look at my code above you should be able to get the value of the text box. You only have to convert the code to VB.

Saturday, November 7, 2009 9:55 AM
0

Sign in to vote

User694685263 posted

I can not see Scriptmanager...because My because EnablePageMethod=true want....

aspx-----><mobile:DeviceSpecific ID="DeviceSpecific2" Runat="server"><Choice><asp:ScriptManager runat="server" ID="ScriptManager1" EnablePageMethods="true"></asp:ScriptManager>

cs --->

[System.Web.Services.WebMethod]

public static string StokHareketAnaYukle(string Deger)

{....}

scriptmanager nasıl çagırabilirim yardım...lütfen....

Monday, February 15, 2010 7:47 AM
0

Sign in to vote

User2039959148 posted

Monday, March 1, 2010 3:25 AM

Answered by:

JavaScript in Mobile Forms

Question

Answers

All replies