Vinnaren i pepparkakshustävlingen!
  1. Dator och IT
  2. Systemutveckling
  3. Webbutveckling och javascript

Redigerbara ytor med JavaScript

Svara
  • 1
  • 2
2013-06-21, 15:00
  #1
mario19
Medlem
Hej!
Jag har försökt och försökt, det gick inte behöver era hjälp.

När ett av text styckena under rubriken Redigerbara stycken klickas skall texten bytas ut mot en textruta som innehåller den text som fanns i stycket. Texten skall i textrutan gå att förändra och det skall även finnas två knappar under denna ruta för att "redigera" så att texten sparas eller för att "Avbryt" avbryta så att ingen förändring sker.

hur gör jag för att göra Redigerbara knapp och avbryt knapp med javascript.

Tack Förhand
Citera
2013-06-21, 16:10
  #2
winINC
Medlem
winINCs avatar
mmmmmhm.. dåligt med information, eller så är jag bara för korkad för att fatta ett jättelätt problem

Du har försökt, vad har du kommit fram till än så länge då? Hur ser din uppbyggnad av sidan ut? Är det en <p> som ska bli till en textarea fylld med texten? Ska det sparas i någon databas eller bara hållas i en cookie kanske? Är det bara den enskilde användaren som ser sin redigerade text?
Citera
2013-06-21, 18:01
  #3
mario19
Medlem
Citat:
Ursprungligen postat av winINC
mmmmmhm.. dåligt med information, eller så är jag bara för korkad för att fatta ett jättelätt problem

Du har försökt, vad har du kommit fram till än så länge då? Hur ser din uppbyggnad av sidan ut? Är det en <p> som ska bli till en textarea fylld med texten? Ska det sparas i någon databas eller bara hållas i en cookie kanske? Är det bara den enskilde användaren som ser sin redigerade text?

Jag dåligt, när det gäller förklaring.

Det är tre <p class
<p class den mitten p vill jag textarea fylld med text.
<p class


Tack förhand
Citera
2013-06-21, 20:10
  #4
TexasSwede
Medlem
TexasSwedes avatar
Citat:
Ursprungligen postat av mario19
Hej!
Jag har försökt och försökt, det gick inte behöver era hjälp.

När ett av text styckena under rubriken Redigerbara stycken klickas skall texten bytas ut mot en textruta som innehåller den text som fanns i stycket. Texten skall i textrutan gå att förändra och det skall även finnas två knappar under denna ruta för att "redigera" så att texten sparas eller för att "Avbryt" avbryta så att ingen förändring sker.

hur gör jag för att göra Redigerbara knapp och avbryt knapp med javascript.

Tack Förhand

Om du ska kunna fråga efter hjälp måste du kunna specifiera:
* exakt vad du vill göra
* vad du har testat
* vad som hände (inklusive eventuella felmeddelanden)
* hur du har försökt hitta problemet (Firebug, etc)

Först, skriv ner på papper vad det är du vill göra. Först i stora drag, sedan bryter du ner problemet i mindre och mindre bitar. Till slut har du "pseudo-kod" som beskriver vad som ska ske.
Inkludera det som är relevant, och uteslut det som inte är relevant för problemet.

Min misstanke är du hade skrivit följande om du du tänkt efter lite innan:

Citat:
Jag har en div som innehåller text. När man klickar någonstans i texten så döljs texten, och en annan div visas. Denna div innehåller en textarea och två knappar, "Spara" och "Ångra". I textarean ska texten från den ursprungliga div:en visas.
Användaren ska kunna redigera/ändra texten, och sedan antingen välja "Spara" eller "Avbryt".
Knappen "Avbryt" gömmer textarean och visar den ursprungliga <div>-sektionen igen.
Knappen "Spara" skickar texten i fältet till en server via HTTP GET och läser in nya värdet från server som returneras av anropet. Det nya värdet/texten ersätter texten i den ursprungliga div:en, gömmer textarean/knapparna och visar den urprungliga div-sektionen igen.

Nåt i den stilen. Nu har du en hyffsad specifikation, och det är bara att skriva koden.
Eftersom texten i den ursprungliga div:en sparas i en database i backend så bör du vid laddning av sidan läsa in värdet från database...

Jag skulle rekommendera att du använder jQuery, eventuellt i kombination med Bootstrap, kommer bli mycket enklare då.

Själva HTML-koden skulle kunna se ut nåt i den här stilen (jag använder givetvis jQuery och Bootstrap):
Kod: 
<div id="textReadOnly"></div>
<div id="textEdit">
    <form>
        <textarea id="textArea" rows="5"></textarea>
        <div id="buttons">
            <button id="btnSave" class="btn">Spara</button>
            <button id="btnCancel" class="btn">Avbryt</button>
        </div>
    </form>
</div>

Nu är det bara att skriva själva koden, som gör vad du vill göra. Kanske nåt i den här stilen:

Kod: 
// The following function is executed 
//after the page/DOM is fully loaded
$(document).ready(function () {

    // Perform HTTP GET as soon as page is loaded to get text
    $.ajax({
        url: "/website/GetText.php", 
        cache: false
    }).done(function(data) {
        $('#textReadOnly').html(data);
    });

    // Define action for click on read-only div
    $("#textReadOnly").click( function(e) {
        // Read content of div and put in text area
        $("#textEdit").val( $("#textReadOnly").html() );
        // View text area and hide read only area
        $("#textReadOnly").hide();
        $("#textEdit").show();
    });

    // Define action for click on cancel button
    $("#btnCancel").click( function(e) {
        $("#textEdit").hide();    
        $("#textReadOnly").show();
        $("#textArea").val("");
    });

    // Define action for click on cancel button
    $("#btnSave").click( function(e) {
        // Call server to store modified text 
        // and get the (new) text back again
        var text = $("#textArea").val();
        $.ajax({
	url: "/website/UpdateText.php", 
	data: {"text": text}, 
	cache: false
        }).done(function(data) {
	$('#textReadOnly').html(data);
        });
        $("#textEdit").hide();    
        $("#textReadOnly").show();
        $("#textArea").val("");
    });

});

Allt ovan är otestat, och det finns smartare sätt att skriva koden, men med tanke på att du verkar vara nybörjare på webbutveckling så tycker jag det är bättre att visa lättläst kod som du kan förstå och modifiera, istället för att komma med optimerad kod som du inte kan använda, då du inte begriper vad den gör.

Dessutom måste du skriva två php-script (GetText.php och UpdateText.php) som jobbar mot databasen där texten lagras.

Jag skulle helt klart rekommendera att du lär dig jQuery. Men du måste även förstå grundläggande programmering (vilket inte är språkberoende). Utan den kunskapen kommer du inte att kunna programmera, utan kommer bara att klippa-och-klistra andra personer kod utan att veta exakt vad den gör.
__________________
Senast redigerad av TexasSwede 2013-06-21 kl. 20:13.
Citera
2013-06-21, 22:12
  #5
mario19
Medlem
Citat:
Ursprungligen postat av TexasSwede
Om du ska kunna fråga efter hjälp måste du kunna specifiera:
* exakt vad du vill göra
* vad du har testat
* vad som hände (inklusive eventuella felmeddelanden)
* hur du har försökt hitta problemet (Firebug, etc)

Först, skriv ner på papper vad det är du vill göra. Först i stora drag, sedan bryter du ner problemet i mindre och mindre bitar. Till slut har du "pseudo-kod" som beskriver vad som ska ske.
Inkludera det som är relevant, och uteslut det som inte är relevant för problemet.

Min misstanke är du hade skrivit följande om du du tänkt efter lite innan:



Nåt i den stilen. Nu har du en hyffsad specifikation, och det är bara att skriva koden.
Eftersom texten i den ursprungliga div:en sparas i en database i backend så bör du vid laddning av sidan läsa in värdet från database...

Jag skulle rekommendera att du använder jQuery, eventuellt i kombination med Bootstrap, kommer bli mycket enklare då.

Själva HTML-koden skulle kunna se ut nåt i den här stilen (jag använder givetvis jQuery och Bootstrap):
Kod: 
<div id="textReadOnly"></div>
<div id="textEdit">
    <form>
        <textarea id="textArea" rows="5"></textarea>
        <div id="buttons">
            <button id="btnSave" class="btn">Spara</button>
            <button id="btnCancel" class="btn">Avbryt</button>
        </div>
    </form>
</div>

hur kan jag göra den här koden i separat inplaceEditor.js fil.

Nu är det bara att skriva själva koden, som gör vad du vill göra. Kanske nåt i den här stilen:

Kod: 
// The following function is executed 
//after the page/DOM is fully loaded
$(document).ready(function () {

    // Perform HTTP GET as soon as page is loaded to get text
    $.ajax({
        url: "/website/GetText.php", 
        cache: false
    }).done(function(data) {
        $('#textReadOnly').html(data);
    });

    // Define action for click on read-only div
    $("#textReadOnly").click( function(e) {
        // Read content of div and put in text area
        $("#textEdit").val( $("#textReadOnly").html() );
        // View text area and hide read only area
        $("#textReadOnly").hide();
        $("#textEdit").show();
    });

    // Define action for click on cancel button
    $("#btnCancel").click( function(e) {
        $("#textEdit").hide();    
        $("#textReadOnly").show();
        $("#textArea").val("");
    });

    // Define action for click on cancel button
    $("#btnSave").click( function(e) {
        // Call server to store modified text 
        // and get the (new) text back again
        var text = $("#textArea").val();
        $.ajax({
	url: "/website/UpdateText.php", 
	data: {"text": text}, 
	cache: false
        }).done(function(data) {
	$('#textReadOnly').html(data);
        });
        $("#textEdit").hide();    
        $("#textReadOnly").show();
        $("#textArea").val("");
    });

});

Allt ovan är otestat, och det finns smartare sätt att skriva koden, men med tanke på att du verkar vara nybörjare på webbutveckling så tycker jag det är bättre att visa lättläst kod som du kan förstå och modifiera, istället för att komma med optimerad kod som du inte kan använda, då du inte begriper vad den gör.

Dessutom måste du skriva två php-script (GetText.php och UpdateText.php) som jobbar mot databasen där texten lagras.

Jag skulle helt klart rekommendera att du lär dig jQuery. Men du måste även förstå grundläggande programmering (vilket inte är språkberoende). Utan den kunskapen kommer du inte att kunna programmera, utan kommer bara att klippa-och-klistra andra personer kod utan att veta exakt vad den gör.

Du har rätt jag är nybörjare med javascript första gång.
grejen är att jag är inte bra på ett separat css fil eller js fil, den koden jag behöver hjälp med ska skrivas i separat js fil.
jag använder Notepad++.

Tack förhand.
Citera
2013-06-21, 23:11
  #6
TexasSwede
Medlem
TexasSwedes avatar
Citat:
Ursprungligen postat av mario19
Du har rätt jag är nybörjare med javascript första gång.
grejen är att jag är inte bra på ett separat css fil eller js fil, den koden jag behöver hjälp med ska skrivas i separat js fil.
jag använder Notepad++.

Vilken editor du använder är irrelevant.

Jag föreslår att du sätter dig ner och ägnar lite tid åt grunderna innan du programmerar mer.
1) Lär dig HTML och CSS, inklusive hur man anropar externa filer med CSS och Javascript.
2) Lär dig grunderna i programmering, bland annat funktioner, olika sorters loopar (do-until, while, for-next, etc), och grunderna i objektorienterad programmering.
3) Lär dig vad DOM är och hur det fungerar.
4) Lär dig hur taggar och klasser fungerar i HTML/CSS och hur det appliceras i Javascript.
5) Lär dig grunderna i Javascript. Lär dig sedan mer. Om du inte förstår Javascript så kommer du inte att bli bra på jQuery.
6) Lär dig jQuery.
7) Öva dig i att skriva programspecifikationer. Det är ofta folk kommer till mig med väldigt lösa tankar om hur ett program ska fungera, och jag måste tvinga ur dem en massa detaljer. Sedan skriver jag (som utvecklare) en specifikation som jag mailar till dem, och som de måste godkänna innan jag börjar på koden. Då kan de aldrig säga att de menade nåt helt annat efteråt. :-)

Nu kan du börja fundera på att skriva program.
Men du börjar med något lätt, som du klarar av. Jag ser massor av folk som vill "bli programmerare" och som tror de har världens bästa idé för en applikation eller ett spel, men har ingen aning om programmering. De går direkt på ett komplicerat program, utan att lära sig stegen mellan. Det tar tid och möda att lära sig programmering, du behöver erfarenhet.
Jag satt 3-4 timmar per dag i skolas datorrum, fem dagar i veckan, under nästan 7 år. Där lärde jag mig massor. Även efter att jag slutat skolan la jag ner en massa tid på att lära mig saker, och att programmera och testa saker.

Det finns ytterligare några saker som du behöver för att bli en bra programmerare:
* Du måste ha en nästan OCD-liknande attityd till detaljer. Sitter du till exempel och flyttar grafik en pixel hit eller dit för att se vad som ser bäst ut, då har du lite av den personligheten.
* Du måste vara en problemlösare. Har du inte den mentaliteten så kommer du inte att bli bra.
* Du måste "vara" en programmerar från födseln. Det är inget man kan lära sig om man inte nar rätt anlag/personlighet/mentalitet. Läs gärna det här: http://www.codinghorror.com/blog/200...ing-goats.html


Citat:
Ursprungligen postat av mario19
Tack förhand.

Allt/det mesta du behöver finns i mitt svar ovan, så du behöver inte tacka på förhand, finns inte så mycket mer att tillägga. :-)

Är det här händelsevis nåt skoluppgift eller liknande, och du måste ha in uppgiften på måndag? ;-)
Citera
2013-06-22, 00:25
  #7
mario19
Medlem
Citat:
Ursprungligen postat av TexasSwede
Vilken editor du använder är irrelevant.

Jag föreslår att du sätter dig ner och ägnar lite tid åt grunderna innan du programmerar mer.
1) Lär dig HTML och CSS, inklusive hur man anropar externa filer med CSS och Javascript.
2) Lär dig grunderna i programmering, bland annat funktioner, olika sorters loopar (do-until, while, for-next, etc), och grunderna i objektorienterad programmering.
3) Lär dig vad DOM är och hur det fungerar.
4) Lär dig hur taggar och klasser fungerar i HTML/CSS och hur det appliceras i Javascript.
5) Lär dig grunderna i Javascript. Lär dig sedan mer. Om du inte förstår Javascript så kommer du inte att bli bra på jQuery.
6) Lär dig jQuery.
7) Öva dig i att skriva programspecifikationer. Det är ofta folk kommer till mig med väldigt lösa tankar om hur ett program ska fungera, och jag måste tvinga ur dem en massa detaljer. Sedan skriver jag (som utvecklare) en specifikation som jag mailar till dem, och som de måste godkänna innan jag börjar på koden. Då kan de aldrig säga att de menade nåt helt annat efteråt. :-)

Nu kan du börja fundera på att skriva program.
Men du börjar med något lätt, som du klarar av. Jag ser massor av folk som vill "bli programmerare" och som tror de har världens bästa idé för en applikation eller ett spel, men har ingen aning om programmering. De går direkt på ett komplicerat program, utan att lära sig stegen mellan. Det tar tid och möda att lära sig programmering, du behöver erfarenhet.
Jag satt 3-4 timmar per dag i skolas datorrum, fem dagar i veckan, under nästan 7 år. Där lärde jag mig massor. Även efter att jag slutat skolan la jag ner en massa tid på att lära mig saker, och att programmera och testa saker.

Det finns ytterligare några saker som du behöver för att bli en bra programmerare:
* Du måste ha en nästan OCD-liknande attityd till detaljer. Sitter du till exempel och flyttar grafik en pixel hit eller dit för att se vad som ser bäst ut, då har du lite av den personligheten.
* Du måste vara en problemlösare. Har du inte den mentaliteten så kommer du inte att bli bra.
* Du måste "vara" en programmerar från födseln. Det är inget man kan lära sig om man inte nar rätt anlag/personlighet/mentalitet. Läs gärna det här: http://www.codinghorror.com/blog/200...ing-goats.html




Allt/det mesta du behöver finns i mitt svar ovan, så du behöver inte tacka på förhand, finns inte så mycket mer att tillägga. :-)

Är det här händelsevis nåt skoluppgift eller liknande, och du måste ha in uppgiften på måndag? ;-)

Det var bra råd, om jag hade tid skulle gärna göra precis som du gjorde, men tyvärr jag går på Vuxenutbildning det e på distans det svårt att träffa läraren personligt annars kunde jag ha fått hjälp av läraren lära mig mer.
jag ägde 4 dagar att lösa den här uppgiften, men det gick inte.


Till uppgiften skriver du även en projektrapport.

När ett textstycke blir klickat så skall en yta för att redigera dyka upp. Texten som fanns i stycket skall flyttas in i den ytan samt att knappar för olika kommandon skall tillkomma. Texten går då att ändra och när knappen för "redigera" klickas ska de nya ändringarna ersätta den text som fanns där.

Till denna uppgift använder du bland annat JavaScript DOM metoder samt funktioner, for loop och if satser.

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles/style.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<title>index</title>
<script src="scripts/inplaceEditor.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div id="content">
<h1>Redigerbara stycken</h1>
<p class="editable">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="editable">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="editable">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Nedanstående &auml;r ej redigerbart</h2>
<p class="not_editable">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
Citera
2013-06-23, 23:06
  #8
TexasSwede
Medlem
TexasSwedes avatar
Citat:
Ursprungligen postat av mario19
Det var bra råd, om jag hade tid skulle gärna göra precis som du gjorde, men tyvärr jag går på Vuxenutbildning det e på distans det svårt att träffa läraren personligt annars kunde jag ha fått hjälp av läraren lära mig mer.

Internet är fullt av resurser, du behöver inte läraren. Finns hur många sidor som helst om webbutveckling, javascript, etc. Och någon slags kursbok/litteratur måste vi väl ha fått?

Citat:
Ursprungligen postat av mario19
jag ägde 4 dagar att lösa den här uppgiften, men det gick inte.

Så du säger att läraren gav dig en uppgift som omfattar saker som inte lärts ut?
Jag tvivlar på att läraren säger "här är en uppgift, leta på nätet för att klura ut hur ni ska göra".
Jag tror att ni har lärt er allt som behövs för att lösa uppgiften.

Citat:
Ursprungligen postat av mario19
Till uppgiften skriver du även en projektrapport.

När ett textstycke blir klickat så skall en yta för att redigera dyka upp. Texten som fanns i stycket skall flyttas in i den ytan samt att knappar för olika kommandon skall tillkomma. Texten går då att ändra och när knappen för "redigera" klickas ska de nya ändringarna ersätta den text som fanns där.

Till denna uppgift använder du bland annat JavaScript DOM metoder samt funktioner, for loop och if satser.

Se där, du har hela specifikationen snyggt och prydligt förpackad.

Citat:
Ursprungligen postat av mario19
<script src="scripts/inplaceEditor.js" type="text/javascript" charset="utf-8"></script>

Vad tror du den raden gör? Låter som om du redan har all kod klar där, bara att läsa dokumentatione, eller titta i Javascript-filen.

Annars är Google din vän. Här finns det tio olika jQuery-plugin som gör vad du försöker göra: http://www.jquery4u.com/plugins/10-j...ditor-plugins/
Nummer 7 skulle nog passa dig bra.
Citera
2013-06-24, 02:34
  #9
TexasSwede
Medlem
TexasSwedes avatar
Lite kod att leka vidare med...
Här har du början till koden. Bara att fortsätta, och fixa till det sista, till exempel knapparna.
Om man ska vara petig så fungerar koden per specifikationen (förutom knapparna), men du kan bara ändra varje stycke en gång. :-) Står dock inget i uppgiften att man kunna ändra flera gånger.
Nu har jag försökt skriva koden så att du inte behöver röra HTML-koden. Men om du får lägga in lite extra taggar där så blir det mycket enklare.

Nu har jag flickvännen över, så ska vara lite social istället för att lösa dina hemuppgifter. :-)

Lägg in koden nedan högst upp i HTML-filen, och ersätt allt ovanför body-taggen.

Kod: 
<!DOCTYPE html>
    <head>
        <meta charset="utf-8" />
        <title>index</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script>
        // The following function is executed after page is fully loaded
        $(document).ready(function () {
            // Get all editable paragraphs	
            $('.editable').each(function() {
                $(this).click(function(e) {
                    setClickEvent($(this));
                }); // End of .click
            }); // End  of .each
        }); // End of .ready
	
        function setClickEvent(thisitem) {
            html = ""
            // Restore any textareas to paragraph text
            $('textarea').each(function() {
                var content = $(this).val();
                html = '<p class="editable">' + content + '</p>'
                $(this).outerHTML(html);
            });
            // Remove buttons from DOM
            $('.buttonrow').each(function() {
                $(this).remove();
            });
            // Get text in clicked paragraph
            var text = thisitem.html();
            // Build HTML to put in <p> section
            html = '<textarea rows="5" cols="50">'
            html = html + text
            html = html + '</textarea>'
            html = html + '<div class="buttonrow"><button type="button" id="btnSave">Spara</button> <button type="button" id="btnCancel">Avbryt</button></div>'
           thisitem.outerHTML(html);
        }
        
        // jQuery outerHTML plugin
        jQuery.fn.outerHTML = function(s) {
            return (s)
            ? this.before(s).remove()
            : jQuery("&lt;p&gt;").append(this.eq(0).clone()).html();
        }
        </script>
	
    </head>
__________________
Senast redigerad av TexasSwede 2013-06-24 kl. 02:40.
Citera
2013-06-25, 11:27
  #10
Povel
Medlem
Povels avatar
Det är som sagt ofta bra att först reda ut vad som behöver göras för att lösa uppgiften.
Ibland behöver man göra en lista i på vanlig (nåja) svenska (sällan borde man dock (enlig mig) blanda in jQuery):

För att leta reda på alla element med klassen .editable, använd t.ex. document.querySelectorAll(), som har bra stöd tillbaka till IE8:
https://developer.mozilla.org/en-US/...erySelectorAll

Loopa över den NodeList du får tillbaka med en for-loop:
https://developer.mozilla.org/en-US/...deList#Example

För varje element i listan, lägg till en lyssnare för klick:
https://developer.mozilla.org/en-US/...lement.onclick

Funktionen som körs vid klick skall (om jag förstått uppgiften rätt) göra elementet "redigerbart" genom att det byts ut mot en textarea och Spara/Avbryt-knappar.

Den funktionen borde då:
Formuläret borde hindras från att skickas normalt, så hindra submit genom att returnera false från en onsubmit-handler:
http://msdn.microsoft.com/en-us/libr...=vs.85%29.aspx

Man vill veta om någon av knapparna klickats, så de kan ha varsitt attribut med respektive kommandonamn (t.ex. data-cmd="submit", data-cmd="cancel"):
http://www.javascriptkit.com/dhtmltu...tributes.shtml

Formuläret har också en klicklyssnare, i vilken man kollar efter vilket element som klicket kom ifrån, och om det var någon av knapparna utför man det kommando som just den knappen står för.

Vid "Spara":
  1. Ta innehållet i formulärets textarea och lägg tillbaka i det "redigerbara" elementet.
  2. Ta bort formuläret ur dokumentet med funktionen removeChild() (https://developer.mozilla.org/en-US/...de.removeChild)
  3. Återställ visningen av det redigerade elementet genom att åter manipulera dess style.display-property (se ovan)
Vid "Avbryt" gör man endast steg 2 och 3 ovan.

Det vore väldigt onödigt att använda jQuery till något sådant här (särskilt om man bara åstadkommer något som fungerar halvbra), och jag hoppas verkligen att det inte är ett tillåtet "verktyg" i en kurs om DOM-programmering.

Läs det som står i dokumentationen i länkarna ovan så kommer du troligen att kunna undvika en hel del jQuery-junk.

Här är ett exempel på ca 30 rader som följer beskrivningen ovan, och som fungerar fint (om och om igen) på den givna markupen:

Kod:
window.onload = function () {
  var doc = document, editables = doc.querySelectorAll(".editable");

  for (var idx=0, len=editables.length; idx<len; ++idx) {
    editables[idx].onclick = edit;
  }

  function handleForm(e) {
    e || (e = window.event);
    var src = e.target || e.srcElement, cmd = src.getAttribute("data-cmd");
    if (!cmd) {return;}
    var form = src.form, elem = form.previousSibling;
    "submit"==cmd && (elem.innerHTML = form.elements.content.value);
    elem.style.display = "";
    form.parentNode.removeChild(form);
    return false;
  }

  function createForm(content) {
    var form = doc.createElement("form");
    form.innerHTML = "<textarea name=content rows=5 cols=40>"+content+"</textarea><br><input type=submit data-cmd=cancel value=Avbryt> <input type=submit data-cmd=submit value=Redigera>";
    form.onclick = handleForm;
    form.onsubmit = function () {return false;};
    return form;
  }

  function edit() {
    var elem = this, target = elem.nextSibling, form = createForm(elem.innerHTML);
    elem.style.display = "none";
    if (target) {elem.parentNode.insertBefore(form, target);}
    else {elem.parentNode.appendChild(form);}
  }
}; 


Lämna nu inte in detta som svar på din uppgift. Det brukar märkas ganska tydligt när elever inte gjort sina uppgifter själva. Detta är bara ett försök att genom nyttiga länkar och exempel svara på frågan du ursprungligen ställde.

/p
Citera
2013-06-25, 20:07
  #11
mario19
Medlem
Citat:
Ursprungligen postat av Povel
Det är som sagt ofta bra att först reda ut vad som behöver göras för att lösa uppgiften.
Ibland behöver man göra en lista i på vanlig (nåja) svenska (sällan borde man dock (enlig mig) blanda in jQuery):

För att leta reda på alla element med klassen .editable, använd t.ex. document.querySelectorAll(), som har bra stöd tillbaka till IE8:
https://developer.mozilla.org/en-US/...erySelectorAll

Loopa över den NodeList du får tillbaka med en for-loop:
https://developer.mozilla.org/en-US/...deList#Example

För varje element i listan, lägg till en lyssnare för klick:
https://developer.mozilla.org/en-US/...lement.onclick

Funktionen som körs vid klick skall (om jag förstått uppgiften rätt) göra elementet "redigerbart" genom att det byts ut mot en textarea och Spara/Avbryt-knappar.

Den funktionen borde då:
Formuläret borde hindras från att skickas normalt, så hindra submit genom att returnera false från en onsubmit-handler:
http://msdn.microsoft.com/en-us/libr...=vs.85%29.aspx

Man vill veta om någon av knapparna klickats, så de kan ha varsitt attribut med respektive kommandonamn (t.ex. data-cmd="submit", data-cmd="cancel"):
http://www.javascriptkit.com/dhtmltu...tributes.shtml

Formuläret har också en klicklyssnare, i vilken man kollar efter vilket element som klicket kom ifrån, och om det var någon av knapparna utför man det kommando som just den knappen står för.

Vid "Spara":
  1. Ta innehållet i formulärets textarea och lägg tillbaka i det "redigerbara" elementet.
  2. Ta bort formuläret ur dokumentet med funktionen removeChild() (https://developer.mozilla.org/en-US/...de.removeChild)
  3. Återställ visningen av det redigerade elementet genom att åter manipulera dess style.display-property (se ovan)
Vid "Avbryt" gör man endast steg 2 och 3 ovan.

Det vore väldigt onödigt att använda jQuery till något sådant här (särskilt om man bara åstadkommer något som fungerar halvbra), och jag hoppas verkligen att det inte är ett tillåtet "verktyg" i en kurs om DOM-programmering.

Läs det som står i dokumentationen i länkarna ovan så kommer du troligen att kunna undvika en hel del jQuery-junk.

Här är ett exempel på ca 30 rader som följer beskrivningen ovan, och som fungerar fint (om och om igen) på den givna markupen:

Kod:
window.onload = function () {
  var doc = document, editables = doc.querySelectorAll(".editable");

  for (var idx=0, len=editables.length; idx<len; ++idx) {
    editables[idx].onclick = edit;
  }

  function handleForm(e) {
    e || (e = window.event);
    var src = e.target || e.srcElement, cmd = src.getAttribute("data-cmd");
    if (!cmd) {return;}
    var form = src.form, elem = form.previousSibling;
    "submit"==cmd && (elem.innerHTML = form.elements.content.value);
    elem.style.display = "";
    form.parentNode.removeChild(form);
    return false;
  }

  function createForm(content) {
    var form = doc.createElement("form");
    form.innerHTML = "<textarea name=content rows=5 cols=40>"+content+"</textarea><br><input type=submit data-cmd=cancel value=Avbryt> <input type=submit data-cmd=submit value=Redigera>";
    form.onclick = handleForm;
    form.onsubmit = function () {return false;};
    return form;
  }

  function edit() {
    var elem = this, target = elem.nextSibling, form = createForm(elem.innerHTML);
    elem.style.display = "none";
    if (target) {elem.parentNode.insertBefore(form, target);}
    else {elem.parentNode.appendChild(form);}
  }
}; 


Lämna nu inte in detta som svar på din uppgift. Det brukar märkas ganska tydligt när elever inte gjort sina uppgifter själva. Detta är bara ett försök att genom nyttiga länkar och exempel svara på frågan du ursprungligen ställde.

/p

jag ska följa alla hemsidorna som du har lagt för att lösa uppgiften hoppas att löser sig.
Tack för hand.
Citera
2013-06-26, 14:28
  #12
mario19
Medlem
Citat:
Ursprungligen postat av Povel
Det är som sagt ofta bra att först reda ut vad som behöver göras för att lösa uppgiften.
Ibland behöver man göra en lista i på vanlig (nåja) svenska (sällan borde man dock (enlig mig) blanda in jQuery):

För att leta reda på alla element med klassen .editable, använd t.ex. document.querySelectorAll(), som har bra stöd tillbaka till IE8:
https://developer.mozilla.org/en-US/...erySelectorAll

Loopa över den NodeList du får tillbaka med en for-loop:
https://developer.mozilla.org/en-US/...deList#Example

För varje element i listan, lägg till en lyssnare för klick:
https://developer.mozilla.org/en-US/...lement.onclick

Funktionen som körs vid klick skall (om jag förstått uppgiften rätt) göra elementet "redigerbart" genom att det byts ut mot en textarea och Spara/Avbryt-knappar.

Den funktionen borde då:
Formuläret borde hindras från att skickas normalt, så hindra submit genom att returnera false från en onsubmit-handler:
http://msdn.microsoft.com/en-us/libr...=vs.85%29.aspx

Man vill veta om någon av knapparna klickats, så de kan ha varsitt attribut med respektive kommandonamn (t.ex. data-cmd="submit", data-cmd="cancel"):
http://www.javascriptkit.com/dhtmltu...tributes.shtml

Formuläret har också en klicklyssnare, i vilken man kollar efter vilket element som klicket kom ifrån, och om det var någon av knapparna utför man det kommando som just den knappen står för.

Vid "Spara":
  1. Ta innehållet i formulärets textarea och lägg tillbaka i det "redigerbara" elementet.
  2. Ta bort formuläret ur dokumentet med funktionen removeChild() (https://developer.mozilla.org/en-US/...de.removeChild)
  3. Återställ visningen av det redigerade elementet genom att åter manipulera dess style.display-property (se ovan)
Vid "Avbryt" gör man endast steg 2 och 3 ovan.

Det vore väldigt onödigt att använda jQuery till något sådant här (särskilt om man bara åstadkommer något som fungerar halvbra), och jag hoppas verkligen att det inte är ett tillåtet "verktyg" i en kurs om DOM-programmering.

Läs det som står i dokumentationen i länkarna ovan så kommer du troligen att kunna undvika en hel del jQuery-junk.

Här är ett exempel på ca 30 rader som följer beskrivningen ovan, och som fungerar fint (om och om igen) på den givna markupen:

Kod:
window.onload = function () {
  var doc = document, editables = doc.querySelectorAll(".editable");

  for (var idx=0, len=editables.length; idx<len; ++idx) {
    editables[idx].onclick = edit;
  }

  function handleForm(e) {
    e || (e = window.event);
    var src = e.target || e.srcElement, cmd = src.getAttribute("data-cmd");
    if (!cmd) {return;}
    var form = src.form, elem = form.previousSibling;
    "submit"==cmd && (elem.innerHTML = form.elements.content.value);
    elem.style.display = "";
    form.parentNode.removeChild(form);
    return false;
  }

  function createForm(content) {
    var form = doc.createElement("form");
    form.innerHTML = "<textarea name=content rows=5 cols=40>"+content+"</textarea><br><input type=submit data-cmd=cancel value=Avbryt> <input type=submit data-cmd=submit value=Redigera>";
    form.onclick = handleForm;
    form.onsubmit = function () {return false;};
    return form;
  }

  function edit() {
    var elem = this, target = elem.nextSibling, form = createForm(elem.innerHTML);
    elem.style.display = "none";
    if (target) {elem.parentNode.insertBefore(form, target);}
    else {elem.parentNode.appendChild(form);}
  }
}; 


Lämna nu inte in detta som svar på din uppgift. Det brukar märkas ganska tydligt när elever inte gjort sina uppgifter själva. Detta är bara ett försök att genom nyttiga länkar och exempel svara på frågan du ursprungligen ställde.

/p

Hur gör jag om jag ska bara en p class ska ha redigering och avbryt knappar.
tack
Citera
Svara
  • 1
  • 2

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback