Avatar billede karsten_larsen Praktikant
08. oktober 2007 - 13:54 Der er 8 kommentarer og
1 løsning

flyt til næste radiobuttonlist ved tryk på tast

Jeg har brugt følgende script i asp til at flytte til næste radiobuton.

    var fld = 'RadioButtonList1';
    function marking(f,radio_name,radio_value) {
        var e = f.elements[radio_name];
        for(i=0;e.length>i;i++) {
              if(e[i].value==radio_value)
                  e[i].checked=true;
          }
    }
    function marker(e){
      if(fld == 'RadioButtonList3')
        return false;
      e = e?e:event;
      var tast = (e.which?e.which:e.keyCode)-48;
      if(tast>0 && 6>tast){
        marking(document.f,fld,tast);
        fld = 'RadioButtonList' + (+fld.replace(/.*?(\d)/,"$1")+1);
        if(fld != 'RadioButtonList3')
          document.f.elements[fld][0].focus();
        else
          document.f.Send.focus();
      }
    }
    window.onload = function(){
      document.f.elements[0].focus();
    }
    document.onkeypress = marker;
function Submit1_onclick() {

}


Men får fejl når det bruges i forbindelse med Radiobuttonlist i .Net.

Fejlmeddelelsen er: 'elements' er null eller ikke objekt

Selve koden ser således ud:

        <asp:RadioButtonList ID="RadioButtonList1" runat="server" Style="z-index: 100; left: 79px;
            position: absolute; top: 45px" RepeatDirection="Horizontal" TabIndex="1">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem>4</asp:ListItem>
            <asp:ListItem>5</asp:ListItem>
        </asp:RadioButtonList>
        <asp:RadioButtonList ID="RadioButtonList2" runat="server" Style="z-index: 101; left: 78px;
            position: absolute; top: 96px" RepeatDirection="Horizontal" TabIndex="2">
                        <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem>4</asp:ListItem>
            <asp:ListItem>5</asp:ListItem>
        </asp:RadioButtonList>
        <asp:RadioButtonList ID="RadioButtonList3" runat="server" Style="z-index: 102; left: 83px;
            position: absolute; top: 139px" RepeatDirection="Horizontal" TabIndex="3">
                        <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem>4</asp:ListItem>
            <asp:ListItem>5</asp:ListItem>
        </asp:RadioButtonList>

???:-) karsten_larsen
Avatar billede sherlock Nybegynder
08. oktober 2007 - 13:59 #1
http://west-wind.com/WebLog/posts/4605.aspx

Han skriver lidt om problemet og hvordan det kan omgåes.
Avatar billede neoman Novice
08. oktober 2007 - 14:02 #2
Kig i sourcen på klienten. Når tingene ligger i en masterpage, eller i en anden container, så forandres alle id'er. For at få fat i noget id på klienten så skal du bruge noget .ClientID i stil med det viste i bunden af http://www.eksperten.dk/spm/799598
Avatar billede karsten_larsen Praktikant
08. oktober 2007 - 14:34 #3
sherlock -> jeg forstår ikke helt hans løsning. Betyder det, at i page.load at alle unikke id skal køres igennem? eller hur?

neomann -> ja - i sourcen står ID som:
<input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="1" tabindex="1" />
<input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="2" tabindex="1" />
<input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="3" tabindex="1" />
<input id="RadioButtonList1_3" type="radio" name="RadioButtonList1" value="4" tabindex="1" />
<input id="RadioButtonList1_4" type="radio" name="RadioButtonList1" value="5" tabindex="1" />
men det burde ikke betyde noget for mit script eller hur? Tager scriptet ikke "name"?

Indrømmer gerne at javascript ikke er min stærk side.
Avatar billede sherlock Nybegynder
08. oktober 2007 - 14:44 #4
Du kan enten generere din JS fra codebehind og bruge UniqueID-property på dine kontroller til at lave referencen til JS-objektet.

Eller du kan nedarve RadioButtonList og override, som han viser det. Så kan du bruge det kode du har nu.
Avatar billede karsten_larsen Praktikant
08. oktober 2007 - 15:04 #5
sherlock -> øh - hvordan gøres det sidste?
Avatar billede sherlock Nybegynder
08. oktober 2007 - 15:10 #6
class MyRadioButtonList : RadioButtonList
{
public override string UniqueID
{
    get
    {
        return this.ID;
    }
}
public override string ClientID

{
    get

    {
        return this.ID;
    }
}
}
Avatar billede karsten_larsen Praktikant
08. oktober 2007 - 19:43 #7
sherlock -> jeg har prøvet og prøvet.

Prøv lige at se her:

Codebehind: (skriver normalt i vb, men her oversat)
class MyRadioButtonList : RadioButtonList
{
    public override string UniqueID {
        get { return this.ID; }
    }
    public override string ClientID {
        get { return this.ID; }
    }
}



partial class HelpCodeNew_Radio : System.Web.UI.Page
{
}


og aspx:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Radio.aspx.vb" Inherits="HelpCodeNew_Radio" %>

<!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">
<script type="text/javascript">
    var fld = 'RadioButtonList1';
    function marking(f,radio_name,radio_value) {
        var e = f.elements[radio_name];
        for(i=0;e.length>i;i++) {
              if(e[i].value==radio_value)
                  e[i].checked=true;
          }
    }
    function marker(e){
      if(fld == 'RadioButtonList3')
        return false;
      e = e?e:event;
      var tast = (e.which?e.which:e.keyCode)-48;
      if(tast>0 && 6>tast){
        marking(document.f,fld,tast);
        fld = 'RadioButtonList' + (+fld.replace(/.*?(\d)/,"$1")+1);
        if(fld != 'RadioButtonList3')
          document.f.elements[fld][0].focus();
        else
          document.f.Send.focus();
      }
    }
    window.onload = function(){
      document.f.elements[0].focus();
    }
    document.onkeypress = marker;

</script>       
   
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:RadioButtonList ID="RadioButtonList1" runat="server" Style="z-index: 100; left: 79px;
            position: absolute; top: 45px" RepeatDirection="Horizontal" TabIndex="1">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem>4</asp:ListItem>
            <asp:ListItem>5</asp:ListItem>
        </asp:RadioButtonList>
        <asp:RadioButtonList ID="RadioButtonList2" runat="server" Style="z-index: 101; left: 79px;
            position: absolute; top: 92px" RepeatDirection="Horizontal" TabIndex="2">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem>4</asp:ListItem>
            <asp:ListItem>5</asp:ListItem>
        </asp:RadioButtonList>
        <asp:RadioButtonList ID="RadioButtonList3" runat="server" Style="z-index: 102; left: 79px;
            position: absolute; top: 139px" RepeatDirection="Horizontal" TabIndex="3">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem>4</asp:ListItem>
            <asp:ListItem>5</asp:ListItem>
        </asp:RadioButtonList> 
    </div>
    </form>
</body>
</html>

Der må været et eller ander jeg gør helt forkert.

og source kode er følgende:



<!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>
<script type="text/javascript">
    var fld = 'RadioButtonList1';
    function marking(f,radio_name,radio_value) {
        var e = f.elements[radio_name];
        for(i=0;e.length>i;i++) {
              if(e[i].value==radio_value)
                  e[i].checked=true;
          }
    }
    function marker(e){
      if(fld == 'RadioButtonList3')
        return false;
      e = e?e:event;
      var tast = (e.which?e.which:e.keyCode)-48;
      if(tast>0 && 6>tast){
        marking(document.f,fld,tast);
        fld = 'RadioButtonList' + (+fld.replace(/.*?(\d)/,"$1")+1);
        if(fld != 'RadioButtonList3')
          document.f.elements[fld][0].focus();
        else
          document.f.Send.focus();
      }
    }
    window.onload = function(){
      document.f.elements[0].focus();
    }
    document.onkeypress = marker;

</script>       
   
<title>

</title></head>
<body>
    <form name="form1" method="post" action="Radio.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMjUxNTMzMjIxZGQOZnIo9MHiR0fJbkYLbx3+FUDJoQ==" />
</div>

    <div>
        <table id="RadioButtonList1" border="0" style="z-index: 100; left: 79px;
            position: absolute; top: 45px">
    <tr>
        <td><input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="1" tabindex="1" /><label for="RadioButtonList1_0">1</label></td><td><input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="2" tabindex="1" /><label for="RadioButtonList1_1">2</label></td><td><input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="3" tabindex="1" /><label for="RadioButtonList1_2">3</label></td><td><input id="RadioButtonList1_3" type="radio" name="RadioButtonList1" value="4" tabindex="1" /><label for="RadioButtonList1_3">4</label></td><td><input id="RadioButtonList1_4" type="radio" name="RadioButtonList1" value="5" tabindex="1" /><label for="RadioButtonList1_4">5</label></td>
    </tr>
</table>
        <table id="RadioButtonList2" border="0" style="z-index: 101; left: 79px;
            position: absolute; top: 92px">
    <tr>
        <td><input id="RadioButtonList2_0" type="radio" name="RadioButtonList2" value="1" tabindex="2" /><label for="RadioButtonList2_0">1</label></td><td><input id="RadioButtonList2_1" type="radio" name="RadioButtonList2" value="2" tabindex="2" /><label for="RadioButtonList2_1">2</label></td><td><input id="RadioButtonList2_2" type="radio" name="RadioButtonList2" value="3" tabindex="2" /><label for="RadioButtonList2_2">3</label></td><td><input id="RadioButtonList2_3" type="radio" name="RadioButtonList2" value="4" tabindex="2" /><label for="RadioButtonList2_3">4</label></td><td><input id="RadioButtonList2_4" type="radio" name="RadioButtonList2" value="5" tabindex="2" /><label for="RadioButtonList2_4">5</label></td>
    </tr>
</table>
        <table id="RadioButtonList3" border="0" style="z-index: 102; left: 79px;
            position: absolute; top: 139px">
    <tr>
        <td><input id="RadioButtonList3_0" type="radio" name="RadioButtonList3" value="1" tabindex="3" /><label for="RadioButtonList3_0">1</label></td><td><input id="RadioButtonList3_1" type="radio" name="RadioButtonList3" value="2" tabindex="3" /><label for="RadioButtonList3_1">2</label></td><td><input id="RadioButtonList3_2" type="radio" name="RadioButtonList3" value="3" tabindex="3" /><label for="RadioButtonList3_2">3</label></td><td><input id="RadioButtonList3_3" type="radio" name="RadioButtonList3" value="4" tabindex="3" /><label for="RadioButtonList3_3">4</label></td><td><input id="RadioButtonList3_4" type="radio" name="RadioButtonList3" value="5" tabindex="3" /><label for="RadioButtonList3_4">5</label></td>
    </tr>
</table> 
    </div>
   
<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWEwK5iOPVDwL444i9AQL544i9AQL644i9AQL744i9AQL844i9AQL3jKLTDQL448yvDwL548yvDwL648yvDwL748yvDwL848yvDwL3jObBAwL449ByAvnj0HIC+uPQcgL749ByAvzj0HIC94z6nAzDBJLPSCftbrlPGmSSDcowHp4e7g==" />
</div></form>
</body>
</html>


???:-) karsten_larsen
Avatar billede sherlock Nybegynder
09. oktober 2007 - 08:16 #8
Du skal bruge MyRadioButtonList i din markup.
Du bør nok kigge på udvikling af custom controls i almindelighed for at lave det rigtigt.
Avatar billede karsten_larsen Praktikant
10. oktober 2007 - 09:54 #9
hmm - det giver god mening - det vil jeg gøre.
:-) karsten_larsen
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester