Avatar billede steen_hansen Forsker
17. december 2022 - 18:33 Der er 19 kommentarer

Bibehold position på side ved submitting

Jeg har en række toggle buttons. Jeg vil gerne have, at når brugeren har trykket på en toggle button, at vedkommende bibeholder nøjagtigt den samme position på siden, uanset hvor langt ned, der måtte været scrollet. Men når man submitter på en side, vil onChange="this.form.submit(); normalt blive sendt til toppen af siden. Det skal den ikke. Den skal blive stående på nøjagtigt samme sted

Jeg har naturligvis googlet, og søgt her på siden efter spørgsmål, som berører det samme emne. Men fandt desværre ikke noget brugbart. Jeg fandt ud af, at ajax måske kan bruges, men jeg programmer ikke i .Net endnu. Det er lavet i Classic ASP

En stump HTML (én toggle button):

<form name="qr" action="/dk/profile/mysettings/" method="post">
<input type="hidden" name="mode" value="qr">
<div class="col-12 form-group row mt-4">
    <div class="col-1 form-group text-center">
        <label class="switch">
            <input type="checkbox" name="qr" onChange="this.form.submit();"<% If RSchosenSetting("qr") = 1 Then %> checked<% End If %>>
            <span class="slider"></span>
        </label>
    </div>
    <div class="col-11 form-group">
        Jeg &oslash;nsker ikke at se QR koden i footer - QR koden erstattes i stedet med logo
    </div>
</div>
</form>

Jeg ved ikke, om der kan/skal benyttes JavaScript. Men jeg prøver lykken :)
Avatar billede steen_hansen Forsker
17. december 2022 - 19:10 #1
Jeg fandt faktisk noget på stackoverflow: https://stackoverflow.com/questions/17642872/refresh-page-and-keep-scroll-position

    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            var scrollpos = localStorage.getItem('scrollpos');
            if (scrollpos) window.scrollTo(0, scrollpos);
        });

        window.onbeforeunload = function(e) {
            localStorage.setItem('scrollpos', window.scrollY);
        };
    </script>

Men her ryger siden op i toppen, og så scroller den ned på plads, til den oprindelige position. Og det ser ikke godt ud. Siden skulle gerne være klippefast ved tryk på en toggle button
Avatar billede keysersoze Guru
17. december 2022 - 22:12 #2
Du skal lave et AJAX submit i stedet.
Avatar billede steen_hansen Forsker
17. december 2022 - 22:33 #3
Hej keysersoze

Kan du give mig et hint?

<form name="qr" action="/dk/profile/mysettings/" method="post">
<input type="hidden" name="mode" value="qr">
<div class="col-12 form-group row mt-4">
    <div class="col-1 form-group text-center">
        <label class="switch">
            <input type="checkbox" name="qr" onChange="this.form.submit();"<% If RSchosenSetting("qr") = 1 Then %> checked<% End If %>>
            <span class="slider"></span>
        </label>
    </div>
    <div class="col-11 form-group">
        Jeg &oslash;nsker ikke at se QR koden i footer - QR koden erstattes i stedet med logo
    </div>
</div>
</form>
Avatar billede jakobdo Ekspert
17. december 2022 - 23:20 #4
Jeg vil jo sige du har 2 muligheder.

Du kan som der bliver snakket om, anvende AJAX.
Det som AJAX gør, er at den laver en SUBMIT, men den er lidt mere "usynlig" og sker bagom skærmen og dermed vil du blive præcist hvor brugeren slap, da brugeren klikkede på knappen.
Alternativt er som nu, hvor du laver en synlig SUBMIT, men hvor du evt. kunne sende nuværende position med i din SUBMIT.
For den position brugeren har lige NU, hvor brugeren klikker på knappen SUBMIT, kan jo genskabes efter der er lavet en submit.

Håber det giver mening.
Avatar billede steen_hansen Forsker
18. december 2022 - 09:56 #5
@jakobdo

Ok. Jeg antager, at AJAX er en webservice, som benyttes i forbindelse med .Net, og ikke classic asp

Hvis det er korrekt, så er det den synlige submit tilbage. Men submit button er jo de toggle buttons. Hvordan sender jeg den nuværende position? Jeg er HELT på bar bund. Kan du lave et eksempel jeg kan benytte? Jeg har virkelig brug for at blive holdt i hånden her.
Avatar billede keysersoze Guru
18. december 2022 - 12:35 #6
Du kan sagtens lave AJAX med klassisk ASP - se fx https://www.w3schools.com/asp/asp_ajax_asp.asp
Avatar billede steen_hansen Forsker
18. december 2022 - 20:38 #7
Ok, takker:)

Du kender vel ikke til en side, som indeholder løsningen på mit ønske?
Avatar billede keysersoze Guru
18. december 2022 - 21:11 #8
Måske ChatGPT kan løse det for dig ;)

Nej, det er heldigvis mange år siden jeg sidst har skulle bekymre mig om klassisk ASP - men det er altså ikke vanvittig meget der skal tilpasses i det link jeg har sendt til dig. Hvis du allerede har inkluderet jQuery kan du måske google dig til lettere eksempler.
Avatar billede jakobdo Ekspert
18. december 2022 - 21:13 #9
Altså om det er klassisk ASP eller .net er lige meget hvad angår AJAX.
Som de andre siger, enten skal du kigge på XMLHttpREquest mener jeg eller bruge et bibliotek som jquery og gøre brug af deres Ajax kald: https://api.jquery.com/jquery.ajax/
Avatar billede steen_hansen Forsker
21. december 2022 - 18:52 #10
keysersoze, jakobdo, I skal have mange tak

Jeg antager, at der findes én specifik funktion, som kan sørge for, at siden ikke bare ryger i top ved submit. Men jeg har godt nok googlet, og kan intet finde. Jeg synes de søgninger havner i .Net/AJAX eller PHP. Måske min søgning er for dårlig. I har vel ikke noget håndgribeligt? Jeg er kørt godt og grundigt fast her. Og ja, jeg er totalt newbie, jeg aner ikke hvordan det skal gribes an.
Avatar billede jakobdo Ekspert
21. december 2022 - 19:19 #11
Steen: Prøv at se denne tutorial: https://www.digitalocean.com/community/tutorials/submitting-ajax-forms-with-jquery

Og at den er lavet i php, kan du bare hoppe over.
Selve HTML-delen, burde være det samme, om det er ASP.net, ASP-classic, PHP eller whatever. (tjek STEP 2)

Og så skal du lige huske og skifte denne del:

<form action="process.php" method="POST"> <--- process.php
Avatar billede keysersoze Guru
21. december 2022 - 21:04 #12
Udfordringen med klassisk ASP er, at det er 20 år siden at arvtageren kom og næsten lige så længe siden nogen for alvor har arbejdet med og skrevet artikler om det - det betyder også at indhold stille og roligt forsvinder og at det tilbageværende nok ikke prioriteres særlig højt. Derfor kræver det nok en god portion klippe-/klistre-fantasi.

Du undgår ikke sidehop uden AJAX - om backend i eksemplerne så er klassisk ASP, PHP eller .NET gør ikke den store forskel, det vil være næsten hvad du har i dag (Request.Form...) så det er "kun" JS/jQuery du skal have luret ud fra vores eksempler i links.

Uden at vide hvad du bygger og på hvilket niveau så kunne et skift til .NET eller måske ReactJS plus noget til at håndtere API være meget gavnligt i forhold til at finde og få hjælp omend der selvfølgelig vil være en læringskurve.
Avatar billede jakobdo Ekspert
21. december 2022 - 21:30 #13
Nu er jeg ikke meget for at sige kejseren imod. Men hvis man er begynder, tænker jeg måske det kan være lidt af en mundfuld og starte ud med reactjs, vue eller angular. :)

Så tror jeg det er hurtigere og få lavet en løsning med jquery og js/html hacks. :D
Avatar billede keysersoze Guru
21. december 2022 - 22:22 #14
Du må meget gerne sige mig imod :)

Udfordringen for mig at se er bare, at ting som klassisk ASP og jQuery ikke bliver brugt særlig meget mere så der bliver længere mellem at kunne finde/få hjælp - jeg har arbejdet rigtig meget med begge dele men jeg "orker" sjældent at give input til dem for syntaksen sidder ikke i fingrene mere. Et skift til en moderne stack vil uden tvivl være udfordrende men man får rigtig meget forærende ligesom der er kortere til hjælpen.

Og så mente jeg i øvrigt hvad jeg skrev med at prøve om ChatGPT :)
Avatar billede steen_hansen Forsker
24. december 2022 - 13:47 #15
@keysersoze: Jeg er helt med på, at classic ASP er et gammelt levn. Det er kun lidt scripting på en HTML side, hvor .Net er decideret programmering af et program. Det er jeg helt med på :)

Siden bliver konverteret til .Net en gang ude i fremtiden. Men lige nu og her er det vigtigt for mig, at jeg får lavet siden så brugervenligt som muligt, så brugerne ikke skal scrolle ned ad siden for at komme til hvor de sidst var. Jeg kan ikke bare gå i gang med at konvertere her og nu. Jeg skal have lavet nogle få og simple, men for mig lidt komplekse justeringer på en aktiv side. Og det er en b*tch.

@jakobdo: Jeg har kigget på din foreslåede tutorial på https://www.digitalocean.com/community/tutorials/submitting-ajax-forms-with-jquery. Her bliver der lavet noget backend tjek på formularfelter i process.php. Og der bliver lavet noget HTML/CSS frontend på index.html. Og der bliver lavet en form.js mv. Men jeg synes det ligner mere et tjek på formularfelter, end det ligner et hvor-er-jeg-nået-til-på-siden-og-bliv-stående-dér tjek.

Jeg benytter ikke formular felter, jeg benytter kun én checkbox med et onChange="this.form.submit(); på, som sender til toppen af siden, hvor værdien on/off fra checkboxen bliver gemt med

If Request(!mode") = "qr" Then
    ...................
SQL = Conn.Execute("UPDATE usersettings SET qr = " & qr & " WHERE username = '" & SQLEncode(Session("username")) & "'")

Hvordan jeg tilpasser det fra din tutorial, aner jeg ikke. Der skal ikke laves et tjek på formularfelter. Der er ret beset kun en checkbox:

<input type="checkbox" name="qr" onChange="this.form.submit();"<% If RSchosenSetting("qr") = 1 Then %> checked<% End If %>>

Og der er noget css, som udseendemæssigt ændrer denne checkbox til en toggle button. Istedet for at checke/unchecke checkbox, får man en toggle button, hvor den er inaktiv i venstre position (unchecked), og aktiveres ved tryk (står i højre position, checked). Så der ligger 2 funktioner i én: check/uncheck boksen og submit. Det er enten/eller, checked/ikke-checked. Der er ingen andre formular felter at lave et tjek på.

Hvordan jeg konverterer den tutorial til noget brugbart, det aner jeg simpelthen for lidt om. Jeg lægger mig fladt ned og erkender.

Jeg kan ikke se hvordan jeg skal stykke det sammen og tilføje relevante linier, og fjerme irrelevante linier fra den tutorial. Skal process.php omdannes til process.asp <%=asp%>? Jeg kender ikke nok til PHP til at kunne konvertere til det ASP. Jeg kan ikke se min vej ind i det / ud af det. Jeg går ud fra, at humlen i alt det her er at foretage et ASP kald til en AJAX funktion? Du må undskylde, hvis jeg har formuleret mig forkert :) Jeg håber, at én af Jer (hvis ikke begge) kan stykke noget brugbart sammen. Det ville være en stor hjælp. Omvendt kan jeg også forstå det, hvis det er for meget at bede om. Jeg er bare vejet og fundet for let til at kunne udføre dette uden at blive holdt i hånden.

Men bortset fra det, så ønskes I begge og Jeres kære en rigtig Glædelig Jul :)
Avatar billede keysersoze Guru
26. december 2022 - 13:46 #16
Grunden til at siden glemmer hvor den er nået til er, at du er nede på serveren at vende og hele siden renderes igen - når man benytter AJAX sendes data i baggrunden og siden renderes derfor ikke igen hvorfor der ikke er behov for at huske hvor man er nået til. Derfor handler det "kun" om at lade javascript sende til serveren og serveren altså behandle de indkomne data - derefter muligvis lade javascript opdatere siden til en succes-state.

Hvis hverken det ene eller det andet giver mening så overvej en løsning bare med et bookmark.
Avatar billede steen_hansen Forsker
04. januar 2023 - 07:05 #17
Godt Nytår, begge

Jeg overvejer seriøst at gå i gang med at konvertere hele siden til .Net (vb scripting). Vil det kunne lade sig gøre her?
Avatar billede jakobdo Ekspert
04. januar 2023 - 07:23 #18
Godt nytår til dig også. Alt er muligt. Men du vil få "samme" problem. Du skal stadig forstå og kunne anvende AJAX til din næste løsning. Så er ikke sikker på det løser noget. :)
Avatar billede steen_hansen Forsker
07. januar 2023 - 09:06 #19
Ok. Jeg må starte helt fra bunden, arbejde mig op og tilegne mig den viden. I skal have tak Jeres input, begge to
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