locked
Reference mobile controls from the client RRS feed

  • Question

  • User210836093 posted

    Hi, I'm making a mobile web page that uses client side scripting (using a <mobile:DeviceSpecific> control) and my web page looks something like this:

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="mob.aspx.cs" Inherits="mob" %>

    <%@ 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" Wrapping="NoWrap">
    <mobile:DeviceSpecific ID="javascript" Runat="server">
    <Choice Filter="supportsJavaScript">
    <FooterTemplate>

    <script language="javascript" src="myScript.js"></script>

    </FooterTemplate>
    </Choice>
    </mobile:DeviceSpecific>

    <mobile:Label ID="head" Runat="server"></mobile:Label>
    <mobile:Label ID="content" Runat="server"></mobile:Label>

    </mobile:Form>
    </body>
    </html>
     

    Now i'm trying to reference to the "head"-element on this page from myScript using document.getElementById("head"), but this doesn't work (error: document.getElementById("head") has no properties) Is there any way I can reference to my mobile controls from my client-side code?  

     
    Thanks,

    Thomas  

    Tuesday, November 14, 2006 10:57 AM

All replies

  • User469222686 posted

    Hi. You don't say what device you're targetting but you're generally flogging a dead horse trying to use getElementById.

     I have found that the ability to reference controls is very frustrating and sometimes depends what kind of container you use (table/panel etc).

     The following works in Windows Mobile 2003SE but NOT under Windows Mobile 5 (WM5 appears to be a step backwards and makes it virtually impossible to do anything in Javascript)

     I have a command button inside a table on a form. it's defined with the following:

    <INPUT id="cmdCTRLStop" style="FONT-SIZE: 8pt; WIDTH: 24px; HEIGHT: 21px" onclick="StopClick(0);"
                                type="button" value="O" name="cmdCTRLStop" >


    The following  part of the StopClick script allows me to change the text on it:


    pic1 = document.Form1.cmdCTRLStop;

    pic1.value ="-";
     

    Tuesday, November 14, 2006 11:35 AM
  • User210836093 posted

    Well,

    by using ASP.NET mobile controls I hope to target every available device (that supports JavaScript)

    The problem is that when I use an asp:Label control, this creates plain text at the client. What I would really like is that it creates an element that has an Id, so I can reference it (or a way to reference the plain code created, document.Form1.controlName doesn't work either)
     

    Thomas 

    Tuesday, November 14, 2006 11:54 AM
  • User469222686 posted

    Hi.

    Does your control need to be an ASP:Label? I have found that you can either have controls available to either the ASP.NET code engine or Javascript but not both. If you use asp:label then you can set & retrieve properties in your server code but if you want to be able to set & retrieve in Javascript you'll need to make it an INPUT control eg:

    < INPUT id="new_lblStage0" title="new_lblStage0" style="WIDTH: 274px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 18px; BORDER-BOTTOM-STYLE: none"
                                readOnly type="text" size="40" name="new_lblStage0" >
     

    This way you can use code like this:

    Label1 = document.Form1.new_lblStage0;

    Label1.value ="Checking DB & Initialising Service";

     

    This is obviously less than ideal because it's impossible to share controls between Javascript & ASP.NET, making it hard to provide a decent user experience. One of the ways I have found to get round this is to call server side functions from within Javascript instead of having to do a full postback.

     

    Wednesday, November 15, 2006 3:41 AM
  • User210836093 posted

    I'm using mobile:Label for the simple reason that this will make sure that my site can be viewed on most mobile devices. By using <input>, some devices won't be able to view this control.

    For this reason I can only use ASP.NET mobile controls (otherwise my problem wouldn't be a problem)

    Thomas
     

    Wednesday, November 15, 2006 6:01 AM