CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

hrole Mester

22. oktober 2009 - 22:28 Der er 16 kommentarer og
1 løsning

Huske scrollstatus ved submit/reload

Hej,

På en side vises et billede med vertikal og horisontal scroll samtidig vises en form. Når formen submittes vender scrollbarene tilbage til udgangspositionen. Er det muligt at man ved submit viderefører både horisontal og vertikal status, så disse er hvor man sidst efterlod dem? Jeg efterlyser et script som fungerer i IE7+ og FF3+.

Synes godt om

tjens Nybegynder

22. oktober 2009 - 22:46 #1

Hvis samme side vises igen ved submit af form, kan du evt. ændre submitten til et ajax-kald.

Så vil siden ikke blive reloaded, og de andre dele af siden vil forblive uændret.

Synes godt om

hrole Mester

22. oktober 2009 - 23:01 #2

Samme side vises igen. Jeg kender intet til ajax, hvordan gøres det?

Synes godt om

tjens Nybegynder

23. oktober 2009 - 09:27 #3

Der er mange AJAX tutorials på nettet.

Fortvivl ikke, selv om eksemplerne fylder en halv til en hel side: Hovedparten er statisk og kan kopieres direkte ind:
Du skal kun tilrette:
- din sides navn (samme som action i form)
- aflæsning af formfelter til opbygning af parameterstreng
- ved svar: Evt. nulstilling af formfelter og evt. visning af fejlmeldinger.

Så prøv at studere det lidt.

Synes godt om

hrole Mester

23. oktober 2009 - 15:52 #4

Ok, det må jeg prøve - medmindre du kan lave det og vil tjene alle 60 point (eller flere?). Jeg har sat tråden til 60 point, men da du ikke helt har fuldt besvaret mit spørgsmål synes jeg det er i overkanten, men en del af pointene går til dig.

Synes godt om

spectrenectar Nybegynder

23. oktober 2009 - 16:59 #5

Måske kan du bruge noget lignende:

form.onsubmit = function() {
document.getElementById("id_hidden_input1").value=""+body.scrollTop;
document.getElementById("id_hidden_input2").value=""+body.scrollLeft;
};

Synes godt om

hrole Mester

23. oktober 2009 - 17:33 #6

JEg er desværre ikke den store haj til javascript, så jeg er i tvivl om hvordan det skal indsættes.

Synes godt om

hrole Mester

23. oktober 2009 - 17:39 #7

men det mp vel også kræve at jeg på en eller anden måde registrerer scrollbarenes status.

Synes godt om

spectrenectar Nybegynder

23. oktober 2009 - 20:23 #8

1. Du opretter 2 input felter af typen hidden og kalder dem "id_hidden_input1" og 2.
2. Du kopierer koden jeg skrev og ændrer "form" til document.forms[0] så det ser sådan her ud:

document.forms[0].onsubmit = function() {
document.getElementById("id_hidden_input1").value=""+body.scrollTop;
document.getElementById("id_hidden_input2").value=""+body.scrollLeft;
};

Når man så kommer tilbage på siden gør du:

function setPos(xx, yy) {
body.scrollLeft = xx;
body.scrollTop = yy;
}

window.onload = function() {
setPos(DITX, DITY)
}

Og erstatter DITX og DITY med x'et og y'et du har fra hidden felterne. Hvis det er php hedder der <?php echo $_POST["id_hidden_input2"]; ?>

Synes godt om

tjens Nybegynder

23. oktober 2009 - 21:29 #9

#4 OK da: Jeg har lavet et eksempel.

Der er en demo her:
http://tjens.dk/eksperten/php/AjaxPostForm890356.php

Siden er delt op i 2:

AjaxPostFormUpdate.php er den rutine, der modtager formfelterne. I min demo her aflæses de bare med php og returneres som en streng pakket ind i XML;

<?php
header ("content-type: text/xml");

echo "<reply>";
echo 'You typed ' . $_POST["firstname"] . ' ' . $_POST['lastname'] . ' as name' ;
echo "</reply>";

?>

Det er her din nuværende databehandling/opdatering skal være.

Hovedsiden indeholder nu slet ikke php, og ser således ud:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Ajax Post Demo</title>
<style type="text/css">
.t1 { border-collapse: collapse; border: lightgray }
td {
padding: 2px 4px 2px 4px ;
}

</style>

<script type="text/javascript">

var msgArea;
var Form1Request;

function AjaxRequest() {
var xhr;
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Trying Internet Explorer
}
catch(e) // Failed
{
try {
xhr = new XMLHttpRequest(); // Other browsers.
}
catch(e2) {
xhr = null;
}
}
return xhr;
}

function SendForm1Ajax() {
msgArea.nodeValue="Please Wait";
var param = "firstname=";
param += document.getElementById("Form1FirstName").value;
param += "&lastname=";
param += document.getElementById("Form1LastName").value;
Form1Request.onreadystatechange = Form1Reply;
Form1Request.open("POST", "AjaxPostFormUpdate.php", true);
Form1Request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
Form1Request.send(param);
}

function Form1Reply() {
msgArea.nodeValue += "..";
if(Form1Request.readyState == 4) {
if(Form1Request.status == 200) {
var reply = Form1Request.responseXML.getElementsByTagName("reply")[0].firstChild.nodeValue;
msgArea.nodeValue=reply;
}
else
msgArea.nodeValue="Error " + Form1Request.status + " - " + Form1Request.statusText;
}
}

function init() {
msgArea = document.getElementById("MsgAreaID").firstChild;
Form1Request = new AjaxRequest();
if (Form1Request)
msgArea.nodeValue=String.fromCharCode(160);
else
msgArea.nodeValue="Error: Your Browser does not support XMLhttpRequest";
}
</script>
</head>
<body onload="init();">
<p id="MsgAreaID" style="color: red; text-size; 150%">
Error: Javascript not active
</p>
<table id="demoTable" class="t1" border="1">
<tr>
<td>First Name</td>
<td><input type="text" id="Form1FirstName"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="Form1LastName"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Send" onclick="SendForm1Ajax()"></td>
</tr>
</table>
<p>
<textarea rows="3" cols="40">What you type here remains on screen, because the form above is sent via a XMLhttpRequest and this page does not reload

</textarea>
</p>
</body></html>

Synes godt om

tjens Nybegynder

23. oktober 2009 - 21:36 #10

Jeg fandt inspiration her:

http://www.xul.fr/en-xml-ajax.html
http://www.xul.fr/ajax/ajax-php.php

Synes godt om

hrole Mester

24. oktober 2009 - 15:13 #11

Jeg takker for begge jeres forslag, som jeg er igang med at se nærmere på.

spectrenectar:
Der er ét enkelt punkt i din vejledning jeg ikke er med på:
Når man så kommer tilbage på siden gør du:

function setPos(xx, yy) {
body.scrollLeft = xx;
body.scrollTop = yy;
}

window.onload = function() {
setPos(DITX, DITY)
}

Jeg er ikke helt med på hvor dette skal placeres.

Synes godt om

hrole Mester

24. oktober 2009 - 15:17 #12

tjens:
første indtastning går fint, men efter anden indtastning forsvinder "Please wait" ikke.

Synes godt om

tjens Nybegynder

24. oktober 2009 - 15:44 #13

#12 Det er åbentbart et MSIE problem, da jeg har testet i Chrome og Firefox.

Men en kopiering af linien
Form1Request = new AjaxRequest();
til starten af function SendForm1Ajax har løst det.

Synes godt om

hrole Mester

24. oktober 2009 - 17:40 #14

tjens:
nu har jeg efterhånden fået det tilpasset, tror jeg. Eneste problem er
<?php
header ("content-type: text/xml");

echo "<reply>";
echo 'You typed ' . $_POST["firstname"] . ' ' . $_POST['lastname'] . ' as name' ;
echo "</reply>";

?>
jeg ved intet om xml, og desperat har jeg forsøgt at sætte det ind forskellige steder i min kode, med det resultat at IE melder: "XML-siden kan ikke vises ".

Synes godt om

hrole Mester

24. oktober 2009 - 18:31 #15

tjens:
jeg oprettede en selvstændig fil med ovenstående og nu skrives first og lastname, men det indsættes ikke i databsen. Er det korrekt forstået at database forbindelse, query mv, skal med i den netop oprettede fil (den mel xml)? Det er måske blot at gøre det i rent php?

Synes godt om

tjens Nybegynder

24. oktober 2009 - 21:47 #16

Ja, det er rigtigt:
Den returnerer en smule xml, blot for at javascriptet ude i browseren kan modtage et læsbart svar.

d.v.s. at du bare tilføjer din databaseconnect, query o.s.v. i samme fil, uden at returnere andet.

Skitse

<?php
header ("content-type: text/xml");
echo "<reply>";

$fnam = $_POST["firstname"];
$lnam = $_POST['lastname'];
.. dbconnect
.. query insert / update
.. test om update gik godt
if (gik godt)
echo "OK";
else
echo "Fejlmelding";

echo "</reply>";
?>

Og derefter ændre i javascript-delen så hvis svaret == "OK" blanker du form-felter og Please wait beskeden.

Visningen af det indtastede navn var bare en demo for at bevise at værdierne var nede og runde php-scriptet på serveren.

Synes godt om

hrole Mester

25. oktober 2009 - 08:33 #17

tjens:
tak for det, så fungerer det. Jeg har givet dig alle pointene da jeg fik dit script til at virke. Da jeg endnu ikke har fået spectrenectars script til at fungere har jeg foreløbig ikke tildelt ham nogen point.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS