Avatar billede Slettet bruger
11. august 2008 - 15:41 Der er 25 kommentarer og
2 løsninger

InnerHtml i div tag

Hej

Jeg laver en simpel progressbar med innerHtml, jeg har indtil nu brugt java script til at indsætte kode via innerHtml, men når jeg gør det har jeg ikke mulighed for at bestemme hvor mit javascript skal lægges ind og det skal jo under mit div tag ellers kan den ikke finde div taget.

Jeg har set at der er en metode på mit div tag der hedder InnerHtml, men når jeg bruger den sker der ikke noget, men jeg får heller ingen fejl.

Hvordan er det smartest at få tilføjet kode til mit div tag vhja innerHtml?

Hilsen Michael
Avatar billede w13 Novice
11. august 2008 - 15:47 #1
Og du kan ikke bare lægge JavaScript-koden neden under div-tag'et som du selv foreslår? Ellers skal du jo bare sørge for, at det først køres onload.

window.onload=function(){
  //kode her
}

Men jeg ville nok foreslå dig at bruge DOM i stedet for innerHTML.

Du skal vel i øvrigt ikke bruge asp.NET til denne løsning, skal du?
Avatar billede Slettet bruger
11. august 2008 - 15:57 #2
Hvorfor skulle jeg ikke bruge asp.net?

Det jeg har gjort nu er at kalde min funktion fra design siden(<% startLongTask(); %>) og det viker men sådan kan jeg ikke gøre når jeg skal bruge det rigtigt. Der bliver der jo trykket på en knap og derefter skal startLongTask() kører.

I startLongTask har prøvet følgende:

StringBuilder sb = new StringBuilder();

sb.Append("<table width=\"" + intProcentFinsh + "%\" background=\"Progressbar.jpg\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" style=\"border-right:#FF0000 2px solid\"><tr><td>");
sb.Append("<img src=\"spacer.gif\" width=\"1\" height=\"16\" /></td></tr></table>");

outputprogress.InnerHtml = sb.ToString();

Response.Flush();

Og det virker ikke, men er der andre måder at få javascript koden sæt ind på en plads man selv bestemmer?
Avatar billede w13 Novice
11. august 2008 - 16:01 #3
Altså nu skal jeg lige være helt med..

I den kode du viser, er der intet JavaScript.

Men hvis du _har_ en rigtig JavaScript-kode, så kan du sætte den ind, lige hvor du lyster.
Avatar billede Slettet bruger
11. august 2008 - 16:07 #4
Nej det kode jeg har vist er den "nye" kode jeg har prøvet at lave som ikke virker.

Den kode som virker, men ikke er særlig brugbar kommer her:

.aspx:
<body>
    <form runat="server">
    <div id="outputstatus" align="left" runat="server">
    </div>
    <div id="outputprogress" align="left" style="background-color: #CCCCCC; height: 16px;
        width: 600px; border: #666666 1px solid;" runat="server">
    </div>
    <% startLongTask(); %>
    </form>
</body>

.cs:

    public void startLongTask()
    {
        longTask();
    }
    public void longTask()
    {
        int intProcentFinsh = 0;
        for (int i = 0; i < 10; i++)
        {
            int t = 0;
            while (t < 100000000)
            {
                t++;
            }
            intProcentFinsh = (int)Math.Ceiling((double)i / 9 * 100);

            StringBuilder sb = new StringBuilder();

            sb.Append("<script language=\"javascript\">");
            sb.Append("document.getElementById('outputstatus').innerHTML='Sendt:" + i + "';");
            sb.Append("document.getElementById('outputprogress').innerHTML = '");
            sb.Append("outputstatus.innerHTML='Sendt:" + i + "';");
            sb.Append("outputprogress.innerHTML = '");
            sb.Append("<table width=\"" + intProcentFinsh + "%\" background=\"Progressbar.jpg\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" style=\"border-right:#FF0000 2px solid\"><tr><td>");
            sb.Append("<img src=\"spacer.gif\" width=\"1\" height=\"16\" /></td></tr></table>");
            sb.Append("</script>");

            Response.Write(sb.ToString());
            Response.Flush();
        }
    }
Avatar billede Slettet bruger
11. august 2008 - 16:08 #5
Hov glem disse linjer:

sb.Append("outputstatus.innerHTML='Sendt:" + i + "';");
sb.Append("outputprogress.innerHTML = '");
Avatar billede w13 Novice
11. august 2008 - 16:24 #6
Der bliver din JavaScript-kode genereret 10 gange - hvilket er lidt overkill, synes jeg.

Kan du ikke bare gøre sådan her i din .aspx:

<body>
    <form runat="server">
    <div id="outputstatus" runat="server">0</div>
    <div style="background-color: #ccc; height: 16px; width: 600px; border: 1px #666 solid" runat="server">
        <div id="outputprogress" style="width:0;height:16px;overflow:hidden;background-image:url(Progressbar.jpg);border-width:0px;border-collapse:collapse;border-right:2px #f00 solid"></div>
    </div>
    <% startLongTask(); %>
    </form>
</body>

Og din .cs:

public void startLongTask()
{
    longTask();
}

public void longTask()
{
    int intProcentFinsh = 0;
    for (int i = 0; i < 10; i++)
    {
        int t = 0;
        while (t < 100000000)
        {
            t++;
        }
        intProcentFinsh = (int)Math.Ceiling((double)i / 9 * 100);

        StringBuilder sb = new StringBuilder();

        sb.Append("<script type=\"text/javascript\">");
        sb.Append("progressBar("+i+","+intProcentFinsh+")");
        sb.Append("</script>");

        Response.Write(sb.ToString());
        Response.Flush();
    }
}

<script type="text/javascript">
function progressBar(i,intProcentFinsh){
    document.getElementById("outputstatus").firstChild.nodeValue='Sendt:" + i + "';
    document.getElementById("outputprogress").style.width = intProcentFinsh + "%";
}
</script>

Og så bliver der også brugt valid HTML, CSS og JavaScript. =)
Avatar billede w13 Novice
11. august 2008 - 16:25 #7
Hov, glem det. Sådan her:

Kan du ikke bare gøre sådan her i din .aspx:

<body>
    <script type="text/javascript">
    function progressBar(i,intProcentFinsh){
        document.getElementById("outputstatus").firstChild.nodeValue='Sendt:" + i + "';
        document.getElementById("outputprogress").style.width = intProcentFinsh + "%";
    }
    </script>

    <form runat="server">

    <div id="outputstatus" runat="server">0</div>
    <div style="background-color: #ccc; height: 16px; width: 600px; border: 1px #666 solid" runat="server">
        <div id="outputprogress" style="width:0;height:16px;overflow:hidden;background-image:url(Progressbar.jpg);border-width:0px;border-collapse:collapse;border-right:2px #f00 solid"></div>
    </div>

    <% startLongTask(); %>

    </form>
</body>

Og din .cs:

public void startLongTask()
{
    longTask();
}

public void longTask()
{
    int intProcentFinsh = 0;
    for (int i = 0; i < 10; i++)
    {
        int t = 0;
        while (t < 100000000)
        {
            t++;
        }
        intProcentFinsh = (int)Math.Ceiling((double)i / 9 * 100);

        StringBuilder sb = new StringBuilder();

        sb.Append("<script type=\"text/javascript\">");
        sb.Append("progressBar("+i+","+intProcentFinsh+")");
        sb.Append("</script>");

        Response.Write(sb.ToString());
        Response.Flush();
    }
}
Avatar billede Slettet bruger
11. august 2008 - 16:30 #8
Jo det er måske mere smart, Hvordan vil du gøre hvis startLongTask() skal køres indefra codebehind og ikke fra aspx siden?
Avatar billede w13 Novice
11. august 2008 - 16:32 #9
Jeg er ikke så meget inde i asp.NET - jeg så bare, at det hovedsageligt var et spørgsmål om JavaScript her.

Men kan du ikke bare skrive:

startLongTask();

på sidste linje i din .cs?
Avatar billede w13 Novice
11. august 2008 - 16:39 #10
Jeg ville nok egentlig bare skrive:

        sb.Append("<script type=\"text/javascript\">progressBar("+i+","+intProcentFinsh+")</script>");

i stedet for:

        sb.Append("<script type=\"text/javascript\">");
        sb.Append("progressBar("+i+","+intProcentFinsh+")");
        sb.Append("</script>");

og spare de handlinger.

Og det vil også se lidt bedre ud i kilde-koden, synes jeg.
Avatar billede Slettet bruger
11. august 2008 - 16:54 #11
Okay, men problemt ligger i hvis bare kalder startLongTask() vil den lave response.write øverst i dokumentet og vil derfor ikke kunne finde javascript funktionen progressBar() eller ville den?
Avatar billede Slettet bruger
11. august 2008 - 17:14 #12
Nej den kunne ikke finde funktionen da det bliver skrevet øverst i dokumentet, men mon ikke der er en måde at løse det probelm på?

Den måde du har skrevet koden på er selvfølgelig meget bedre end det andet jeg havde, godt arbejde ;)
Avatar billede w13 Novice
11. august 2008 - 19:15 #13
Der må vare en onload-funktion i asp.net som gør tricket
Avatar billede Slettet bruger
12. august 2008 - 11:18 #14
Ja problemet er ikke at kalde metoden, men det er mere det med at udskrive javascriptet så det står under javascriptmetoden, så jeg skal nok bruge noget andet end Response.Write, men der må da være nogen der har styr på asp.net der lige kan hjælpe?
Avatar billede w13 Novice
12. august 2008 - 11:24 #15
Hmm. Jeg mener altså, du kan indsætte en boks, dér hvor JavaScriptet skal sættes ind:

<div id="javascript1"></div>

Og så kan du måske i asp.NET bruge (i stedet for Append):

javascript1.InnerHTML="<script type=\"text/javascript\">progressBar("+i+","+intProcentFinsh+")</script>";
Avatar billede Slettet bruger
12. august 2008 - 11:32 #16
Ja men det går et eller andet galt, det bliver ikke skrevet ud ved response.flush først til sidst når den har kørt det hele igennem :(
Avatar billede w13 Novice
12. august 2008 - 11:33 #17
Ja, det er selvfølgelig rigtigt. InnerHTML fungerer jo ikke ved Response.Write. Hmm.
Avatar billede w13 Novice
12. august 2008 - 11:44 #18
Hmm. Man kan heller ikke rette:

Response.Write(sb.ToString());

til:

javascript1.Response.Write(sb.ToString());

så den udskriver det i div-boksen med id="javascript1"? Synes jeg, at have set.
Avatar billede Slettet bruger
12. august 2008 - 12:06 #19
Ser ikke ud som om den har sådan en funktion. Men har fundet en der hedder:

string runScript = sb.ToString();

ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", runScript);

Men hvis jeg havde javascriptet nede i body kunne den ikke finde det, men hvis jeg sat det op i head sektionen får jeg fejlen Fejl:

document.getElementById("outputstatus") has no properties
Avatar billede w13 Novice
12. august 2008 - 12:08 #20
Ja, for når JavaScriptet køres fra head, er "outputstatus"-elementet jo ikke blevet "bygget" endnu..
Avatar billede Slettet bruger
12. august 2008 - 12:29 #21
Det os rigtigt.

Der er noget her måske, koden er måske ikke så pæn, men kan være jeg kan bruge noget. Kigger lige på det.

http://kbalertz.com/837375/progress-client-browser.aspx
Avatar billede Slettet bruger
12. august 2008 - 12:43 #22
Hmm det gir ikke rigtigt noget, tror godt det vil fungere men så vil mine div tags ligge øverst og så kan jeg ikke bestemme hvor de skal ligge og derudover er det ikke særligt pænt.
Avatar billede Slettet bruger
12. august 2008 - 15:03 #23
Det bedste jeg har fundet er dette:

Det eneste problem er at det bliver skrevet ud når response.flush bliver kørt.

ClientScript.RegisterStartupScript(this.GetType(),"script", "<script type=\"text/javascript\">progressBar("+ i+","+intProcentFinsh+")</script>");

Jeg lader den lige kører til imorgen, så må vi se om nogen kan hjælpe, ellers må jeg opgive og du kan få dine point.
Avatar billede w13 Novice
12. august 2008 - 15:28 #24
Skal det ikke også skrives ud, når response.flush køres?
Avatar billede Slettet bruger
12. august 2008 - 15:33 #25
Hov min fejl der mangler lige et "ikke" :)

Det eneste problem er at det ikke bliver skrevet ud når response.flush bliver kørt.
Avatar billede Slettet bruger
14. august 2008 - 11:13 #26
Nå ser ud som om der er mere hjælp at hente. Du skal have stor tak for din hjælp.
Avatar billede w13 Novice
14. august 2008 - 11:37 #27
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
IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.

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