Oprettet man. d. 01. februar 2010 kl. 09:48:08

Nicklas_J
Nicklas_J (4.150 point. Point ude: 235)

Tekst (klik) text field

Hej.
Har set på flere sider at man kan ændre noget når man klikker på det således:

F.eks:
Abekat

Så hvis du trykker på "Abekat" så ændres det fra (normal tekst)abekat til en input text felt med value abekat.

Og derefter kan man ændre det man vil, og så når man klikker væk fra abekat, så gemmer den det man har ændret (PHP)

Skrevet man. d. 01. februar 2010 kl. 15:25:44| #1

tjens
tjens (33.730 point)
Hvordan virker dette i forhold til hvad du havde i tankerne?
<p>
    <span onclick="this.contentEditable=true; this.focus();return true;" onblur="this.contentEditable=false; alert(this.firstChild.nodeValue); return true;">
        Click to Edit me
    </span>
</p>

alert skal så skiftes ud med din rutine til at gemme via en php-side.

Skrevet man. d. 01. februar 2010 kl. 18:22:11| #2

Nicklas_J
Nicklas_J (4.150 point)
Det var lige hvad jeg havde i tankerne.


Udfra hvad du postede, så har jeg lavet et lille script som sender data til editsave.php.
Det lader til at virke, hele processen, men dog så får jeg "undefined" indsat i databasen.
Her er scriptet:

<html>
<head>
<link href="../style.css" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script type="text/javascript">
/* ---------------------------- */
/* XMLHTTPRequest Enable */
/* ---------------------------- */
function createObject() { 
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}

var http = createObject();
/* -------------------------- */
/* INSERT */
/* -------------------------- */
/* Required: var nocache is a random number to add to request. This value solve an Internet Explorer cache issue */
var nocache = 0;
function insert() {
// Optional: Show a waiting message in the layer with ID login_response
document.getElementById('insert_response').innerHTML = "To Sek .. "
// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
var ujokeedit= encodeURI(document.getElementById('ujokeedit').value);
// Set te random number to add to URL request
nocache = Math.random();
// Pass the login variables like URL variable
http.open('get', 'editsave.php?ujokeedit='+ujokeedit+'&nocache = '+nocache);
http.onreadystatechange = insertReply;
http.send(null);
}
function insertReply() {
if(http.readyState == 4){
var response = http.responseText;
// else if login is ok show a message: "Site added+ site URL".
document.getElementById('insert_response').innerHTML = 'Respons: '+response;
}
}
</script>
<?
include "tilslut.php";
$query = mysql_query("SELECT * FROM member_admin") or die(mysql_error());
$row = mysql_fetch_array($query);
?>
<p>
    <span id="ujokeedit" onclick="this.contentEditable=true; this.focus();return true;" onblur="this.contentEditable=false; java script:insert(); return true;">
        <?=$row["ujoke"]; ?>
    </span>
    <div id="insert_response"></div>
</p>


Med det får man en tanke om at variablen "ujokeedit" er udefineret, men det er den altså ikke, og den burde ikke give tom værdi.
Hvad har jeg gjort forkert?

Skrevet man. d. 01. februar 2010 kl. 19:06:34| #3

intenz
intenz (44.450 point)
underenplov.dk
Du bruger:
document.getElementById('ujokeedit').value

på et span element, der ikke har en value attribute.
Jeg vil tro du skal bruge:
document.getElementById('ujokeedit').innerHTML

eller måske:
document.getElementById('ujokeedit').nodeValue

som der blev foreslået i det første indlæg.

Skrevet man. d. 01. februar 2010 kl. 19:39:28| #4

Nicklas_J
Nicklas_J (4.150 point)
InnerHTML virkede perfekt :).
Har et spørgsmål. Er det muligt at "designe" det felt du ændrer i.. måske gøre det lidt større, eller smide en hvid baggrund bagi, ligesom en input felt?

Skrevet man. d. 01. februar 2010 kl. 20:34:17| #5

intenz
intenz (44.450 point)
underenplov.dk
Jeg ville have lavet løsningen anderledes fra starten, så den skifter teksten ud med et input element. Det gør det hele lidt nemmere at styre.

Jeg har lavet denne her lille test med kommentarer.
<script language="JavaScript">
function myEditable(e, act) {
    if (act == 'click') {
        // lav indholdet af span om til et input felt og sæt et onblue event på den
        e.innerHTML = '<input type="text" value="'+e.innerHTML+'" onblur="myEditable(this, \'edit\')" />';

        // fjern span onclick eventen
        e.onclick = null;

    } else if (act == 'edit') {
        // hent span elementet igen
        var parentElement = e.parentNode;

        // Opdater span teksten, e.value er den nye værdi
        parentElement.innerHTML = e.value;
       
        // placer onclick eventen igen på span elementet
        (function(e){
                e.onclick = function()
                {
                    myEditable(e, 'click');
                };
            })(parentElement);

       
    }

}
</script>
<p>
    <span onclick="myEditable(this, 'click');">Click to Edit me</span>
</p>

Skrevet man. d. 01. februar 2010 kl. 21:32:39| #6

Nicklas_J
Nicklas_J (4.150 point)
Ja det var helt fra start den idé jeg havde med sådan en input box.. Hvordan skal jeg inkludere det jeg har kodet med at sende data videre til insert.php (tidligere indlæg), ind i det her? Ved ik rigtigt hvordan jeg skal gøre det?

Har for mig det skal gøres omkring her:

        // Opdater span teksten, e.value er den nye værdi
        parentElement.innerHTML = e.value;

Hvordan skal jeg sende/tage imode e.value, kan jeg bruge:
var tekstny= encodeURI(document.getElementById('e.value').innerHTML);

når den skal tage imod (og så sende videre til insert.php) ?
Men er e.value er jo ikke et element med id? eller hvad?
Men jeg skal jo også sende den ind.. blir helt forvirret.

Håber du kan hjælpe mig videre.

Skrevet man. d. 01. februar 2010 kl. 21:48:26| #7

Nicklas_J
Nicklas_J (4.150 point)
Tog mig vist sammen efter jeg skrev indlægget, og fik klaret det selv!
Skriv svar begge to, da i begge to har været hjælpevillige.
Her er min løsning, til jer som ønsker noget lign.:
<script language="JavaScript">
function myEditable(e, act) {
    if (act == 'click') {
        // lav indholdet af span om til et input felt og sæt et onblue event på den
        e.innerHTML = '<input type="text" value="'+e.innerHTML+'" onblur="myEditable(this, \'edit\')" />';

        // fjern span onclick eventen
        e.onclick = null;

    } else if (act == 'edit') {
    var nocache = 0;
        // hent span elementet igen
        var parentElement = e.parentNode;

        // Opdater span teksten, e.value er den nye værdi
        parentElement.innerHTML = e.value;
        nocache = Math.random();
        var tekstny= e.value;
            http.open('get', 'editsave.php?tekstny='+tekstny+'&nocache = '+nocache);
http.onreadystatechange = insertReply;
http.send(null);
        // placer onclick eventen igen på span elementet
        (function(e){
                e.onclick = function()
                {
                    myEditable(e, 'click');
                };
            })(parentElement);

     
    }
    function insertReply() {
if(http.readyState == 4){
var response = http.responseText;
// else if login is ok show a message: "Site added+ site URL".
document.getElementById('insert_response').innerHTML = ''+response;
}
}

}
</script>
<p>
    <span onclick="myEditable(this, 'click');"><?=$row["felt"]; ?></span>
</p>    
<div id="insert_response"></div>


Takker endnu engang begge to..

Skrevet tir. d. 02. februar 2010 kl. 13:03:22| #8

intenz
intenz (44.450 point)
underenplov.dk
Godt du fik klaret det :)

Skrevet tir. d. 02. februar 2010 kl. 14:10:06| #9

tjens
tjens (33.730 point)
Giv alle point til intenz: Han har brugt mest tid.

Skriv et indlæg




Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] [img]link til billede[/img]
Web- og emailadresser omdannes automatisk til links

Log ind

   

   

Seneste spørgsmål

Hjælp til validering

Oprettet den 26. maj 2012 kl. 14.01
Stefan1 giver 20 point for svar | Giv et svar »

Javascript sliders?

Oprettet den 24. maj 2012 kl. 11.29
NizeGuy giver 15 point for svar | Giv et svar »

Validere navn i form

Oprettet den 22. maj 2012 kl. 15.13
13thsky giver 60 point for svar | Giv et svar »



   




Tips & Tricks fra PC World

Teaser billede

Læserne: Her er vores værste it-indkøb

Det er ikke al it-udstyr, som er det rene guld. Her er nogle af læsernes skrækhistorier.


Anmeldelser fra PC World

Teaser billede

Test: Mobil med Ferrari-design - og en Trabant-motor

Motorola har begået endnu en smartphone med lækkert design og potentiale til at være blandt de bedste. Men den når ikke i mål. Se her hvorfor.


Seneste blogindlæg

Teaser billede

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...


Nyheder fra PC World

Teaser billede

Sådan siger du farvel til Facebook

Læs her, hvordan du dropper Facebook og i stedet anvender nogle brugervenlige alternativer, så du stadig kan være social på nettet.


Nyheder fra Computerworld

Teaser billede

Galleri: De fedeste håndholdte gennem 40 år

Her har du de mest banebrydende håndholdte computere gennem alle tider.


Kurser
Samarbejdspartnere

Udgiver · © 2012 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger