Avatar billede dm013 Nybegynder
15. september 2006 - 18:49 Der er 6 kommentarer og
1 løsning

Javascript til styring af hvilken af 2 <DIV> der vises

fejlen jeg får hedder:
Line: 47
Char: 1
Error: Objekt exspected
code: 0

jeg antager at det er mit hiddenfield der ikke fanges af javascriptet, håber der er et klogt hovede der kan hjælpe...

Jeg bruger Visual Web Developer 2005

koden:
-----------
<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Me.HiddenField1.Value = "false"
    End Sub

    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Me.HiddenField1.Value = "true"
    End Sub
</script>
<script language=javascript>
function checkBrowser(){
    this.ver=navigator.appVersion
    this.dom=document.getElementById?1:0
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
    this.ie4=(document.all && !this.dom)?1:0;
    this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
    this.ns4=(document.layers && !this.dom)?1:0;
    this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
    return this
}
bw=new checkBrowser()
//Shows the div
function show(div,nest){
    obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
    obj.visibility='visible'
}
//Hides the div
function hide(div,nest){
    obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
    obj.visibility='hidden'
}
    Function Test()
{
    if( document.form1.elements["hiddenfield1"].value == 'true' )
    {
        alert('Vis Test!');
        show('test')
    }
    if( document.form1.elements["hiddenfield1"].value == 'false' )
    {
        alert('Vis Test1!');
        show('test1')
    }

}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body onload="Test();">
    <form id="form1" runat="server">
        <asp:HiddenField ID="HiddenField1" runat="server" Value="true" />
    <div id= "test" style="visibility: hidden; display: none;">
    vis mig <br />
    <Table ID="Table1" runat="server">
        <tr><td>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /></td></tr>
        </Table>
    </div><br />
    <div id="test1" style="visibility: hidden; display: none;">
    Vis ikke mig<br />
        <Table ID="Table2" runat="server">
        <tr><td>
            <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" /></td></tr>
        </Table>

    </div>
    </form>
</body>
</html>
Avatar billede mclemens Nybegynder
15. september 2006 - 23:00 #1
bw=new checkBrowser() og <body onload="Test();">

rettes til:

if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){

  bw=new checkBrowser(); // Dom skal være klar ...

  Test(); // event handler i body hører ikke til i xhtml hvis det kan undgåes ...

}

----------------------------------------
<form id="form1" runat="server"> rettes til <form name="form1" runat="server">
----------------------------------------
Function(){ ... } test rettes til

    function Test()
{
    if( document.form1.elements["HiddenField1"].getAttribute("value") == 'true' )
    {
        alert('Vis Test!');
        show('test')
    }
    if( document.form1.elements["HiddenField1"].getAttribute("value") == 'false' )
    {
        alert('Vis Test1!');
        show('test1')
    }

}


... Læg mærke til at js er tegn specifik
HiddenField1 er ikke det samme som hiddenfield1
og Function er ikke function ...
- og under xhtml skal du bruge getAttribute istedet for .attribut du skal have

----------------------------------------

<div id="***" style="visibility: hidden; display: none;">

rettes til

<div id="***" style="display: none;"> ... display reserverer ikke pladsen ...


og    obj.display='block'

... hvis visibility foretrækkes skal display fjernes fra div'en eller også skal scriptet skifte både style.display og style.visibility ...

-----------------------------------------------------------



.... html eksempel:


<!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>
    <title>Untitled Page</title>



<script language=javascript>
function checkBrowser(){
    this.ver=navigator.appVersion
    this.dom=document.getElementById?1:0
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
    this.ie4=(document.all && !this.dom)?1:0;
    this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
    this.ns4=(document.layers && !this.dom)?1:0;
    this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
    return this
}


var bw;

if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){

  bw=new checkBrowser(); // Dom skal være klar ...

  Test(); // event handler i body hører ikke til i xhtml hvis det kan undgåes ...

}


//Shows the div
function show(div,nest){
   

obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:documen

t[div]:0;
    obj.display='block'
}
//Hides the div
function hide(div,nest){
   

obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:documen

t[div]:0;
    obj.display='block'
}



    function Test()
{
    if( document.form1.elements["HiddenField1"].getAttribute("value")== 'true' )
    {
        alert('Vis Test!');
        show('test')
    }
    if( document.form1.elements["HiddenField1"].getAttribute("value") == 'false' )
    {
        alert('Vis Test1!');
        show('test1')
    }

}
</script>


</head>
<body>
    <form name="form1">
        <input type="text" id="HiddenField1" value="true" />
    <div id="test" style="display: none;">
    vis mig <br />
    <Table ID="Table1" runat="server">
        <tr><td>
          button1?</td></tr>
        </Table>
    </div><br />
    <div id="test1" style="display: none;">
    Vis ikke mig<br />
        <Table ID="Table2" runat="server">
        <tr><td>
          button2?</td></tr>
        </Table>

    </div>
    </form>
</body>
</html>
</html>


(har ikke asp eller andet editor program ... )
Avatar billede mclemens Nybegynder
15. september 2006 - 23:10 #2
Er dog ikke helt med på hvorfor man vil have
gamle browsere med når man vil køre xhtml?

... hvis nu jeg selv skulle lave det idag ville jeg:


<script language=javascript>
if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){
  Test();
}


//Shows the div
function show(div){
  document.getElementById(div).style.display='block';
}


//Hides the div
function hide(div){
  document.getElementById(div).style.display='none';
}


function Test(){
  if(document.form1.HiddenField1.getAttribute("value")=="true"){

    alert('Vis Test!');
    show('test');

  }else{

    alert('Vis Test1!');
    show('test1');

  }
}
</script>


... måske med en sammenlægning af show og hide ...

<script language=javascript>
if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){
  Test();
}

//0 Hides the div - 1 Shows the div
function showhide(div,t){
  document.getElementById(div).style.display=(t)?'block':'none';
}


function Test(){
  if(document.form1.HiddenField1.getAttribute("value")=="true"){
    alert('Vis Test!');
    showhide('test',1);
  }else{
    alert('Vis Test1!');
    showhide('test1',1);
  }
}
</script>
Avatar billede mclemens Nybegynder
15. september 2006 - 23:18 #3
... Men kender ikke det endelige behov :)
- så rettelserne lægger i 23:00:19
... eksemplet blev dog ombrudt :/

de 2x to linjer:

obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:documen

t[div]:0;

skal rettes så det står på hver en linje ...

(((P.s.: den første fejl du fik var vist fordi at
function test() ikke var deklareret ... der stod Function Test() ...)))
Avatar billede mclemens Nybegynder
16. september 2006 - 01:51 #4
((( Edit: (har ikke asp eller andet editor program ... )
-> (har ikke asp - bruger php og notesblok som editor ... ) )))
Avatar billede dm013 Nybegynder
16. september 2006 - 02:17 #5
hej mc... tak for dine gode og uddybende kommentarer/svar
... opgaven er i og for sig løst ;-)
det er forresten asp.net jeg arbejder i..
hvordan er det lige du mener jeg kommer udenom at bruge body onload ??
Avatar billede dm013 Nybegynder
16. september 2006 - 02:40 #6
nu fik jeg så lige nærlæst det du havde skrevet ... nice touch..
Avatar billede mclemens Nybegynder
16. september 2006 - 02:44 #7
Ok, velbekom og tak for point :)
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