1. Dator och IT
  2. Systemutveckling

Redigerbara ytor med JavaScript

Svara
  • 1
  • 2
2013-06-21, 15:00
  #1
mario19
Medlem
Hej!
Jag har frskt och frskt, det gick inte behver era hjlp.

Nr ett av text styckena under rubriken Redigerbara stycken klickas skall texten bytas ut mot en textruta som innehller den text som fanns i stycket. Texten skall i textrutan g att frndra och det skall ven finnas tv knappar under denna ruta fr att "redigera" s att texten sparas eller fr att "Avbryt" avbryta s att ingen frndring sker.

hur gr jag fr att gra Redigerbara knapp och avbryt knapp med javascript.

Tack Frhand
Citera
2013-06-21, 16:10
  #2
winINC
Medlem
winINCs avatar
mmmmmhm.. dligt med information, eller s r jag bara fr korkad fr att fatta ett jtteltt problem

Du har frskt, vad har du kommit fram till n s lnge 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 ngon databas eller bara hllas i en cookie kanske? r det bara den enskilde anvndaren som ser sin redigerade text?
Citera
2013-06-21, 18:01
  #3
mario19
Medlem
Citat:
Ursprungligen postat av winINC
mmmmmhm.. dligt med information, eller s r jag bara fr korkad fr att fatta ett jtteltt problem

Du har frskt, vad har du kommit fram till n s lnge 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 ngon databas eller bara hllas i en cookie kanske? r det bara den enskilde anvndaren som ser sin redigerade text?

Jag dligt, nr det gller frklaring.

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


Tack frhand
Citera
2013-06-21, 20:10
  #4
TexasSwede
Medlem
TexasSwedes avatar
Citat:
Ursprungligen postat av mario19
Hej!
Jag har frskt och frskt, det gick inte behver era hjlp.

Nr ett av text styckena under rubriken Redigerbara stycken klickas skall texten bytas ut mot en textruta som innehller den text som fanns i stycket. Texten skall i textrutan g att frndra och det skall ven finnas tv knappar under denna ruta fr att "redigera" s att texten sparas eller fr att "Avbryt" avbryta s att ingen frndring sker.

hur gr jag fr att gra Redigerbara knapp och avbryt knapp med javascript.

Tack Frhand

Om du ska kunna frga efter hjlp mste du kunna specifiera:
* exakt vad du vill gra
* vad du har testat
* vad som hnde (inklusive eventuella felmeddelanden)
* hur du har frskt hitta problemet (Firebug, etc)

Frst, skriv ner p papper vad det r du vill gra. Frst 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 fr problemet.

Min misstanke r du hade skrivit fljande om du du tnkt efter lite innan:

Citat:
Jag har en div som innehller text. Nr man klickar ngonstans i texten s dljs texten, och en annan div visas. Denna div innehller en textarea och tv knappar, "Spara" och "ngra". I textarean ska texten frn den ursprungliga div:en visas.
Anvndaren ska kunna redigera/ndra texten, och sedan antingen vlja "Spara" eller "Avbryt".
Knappen "Avbryt" gmmer textarean och visar den ursprungliga <div>-sektionen igen.
Knappen "Spara" skickar texten i fltet till en server via HTTP GET och lser in nya vrdet frn server som returneras av anropet. Det nya vrdet/texten erstter texten i den ursprungliga div:en, gmmer textarean/knapparna och visar den urprungliga div-sektionen igen.

Nt 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 br du vid laddning av sidan lsa in vrdet frn database...

Jag skulle rekommendera att du anvnder jQuery, eventuellt i kombination med Bootstrap, kommer bli mycket enklare d.

Sjlva HTML-koden skulle kunna se ut nt i den hr stilen (jag anvnder 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 sjlva koden, som gr vad du vill gra. Kanske nt i den hr 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 stt att skriva koden, men med tanke p att du verkar vara nybrjare p webbutveckling s tycker jag det r bttre att visa lttlst kod som du kan frst och modifiera, istllet fr att komma med optimerad kod som du inte kan anvnda, d du inte begriper vad den gr.

Dessutom mste du skriva tv php-script (GetText.php och UpdateText.php) som jobbar mot databasen dr texten lagras.

Jag skulle helt klart rekommendera att du lr dig jQuery. Men du mste ven frst grundlggande programmering (vilket inte r sprkberoende). 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 gr.
__________________
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 frga efter hjlp mste du kunna specifiera:
* exakt vad du vill gra
* vad du har testat
* vad som hnde (inklusive eventuella felmeddelanden)
* hur du har frskt hitta problemet (Firebug, etc)

Frst, skriv ner p papper vad det r du vill gra. Frst 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 fr problemet.

Min misstanke r du hade skrivit fljande om du du tnkt efter lite innan:



Nt 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 br du vid laddning av sidan lsa in vrdet frn database...

Jag skulle rekommendera att du anvnder jQuery, eventuellt i kombination med Bootstrap, kommer bli mycket enklare d.

Sjlva HTML-koden skulle kunna se ut nt i den hr stilen (jag anvnder 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 gra den hr koden i separat inplaceEditor.js fil.

Nu r det bara att skriva sjlva koden, som gr vad du vill gra. Kanske nt i den hr 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 stt att skriva koden, men med tanke p att du verkar vara nybrjare p webbutveckling s tycker jag det r bttre att visa lttlst kod som du kan frst och modifiera, istllet fr att komma med optimerad kod som du inte kan anvnda, d du inte begriper vad den gr.

Dessutom mste du skriva tv php-script (GetText.php och UpdateText.php) som jobbar mot databasen dr texten lagras.

Jag skulle helt klart rekommendera att du lr dig jQuery. Men du mste ven frst grundlggande programmering (vilket inte r sprkberoende). 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 gr.

Du har rtt jag r nybrjare med javascript frsta gng.
grejen r att jag r inte bra p ett separat css fil eller js fil, den koden jag behver hjlp med ska skrivas i separat js fil.
jag anvnder Notepad++.

Tack frhand.
Citera
2013-06-21, 23:11
  #6
TexasSwede
Medlem
TexasSwedes avatar
Citat:
Ursprungligen postat av mario19
Du har rtt jag r nybrjare med javascript frsta gng.
grejen r att jag r inte bra p ett separat css fil eller js fil, den koden jag behver hjlp med ska skrivas i separat js fil.
jag anvnder Notepad++.

Vilken editor du anvnder r irrelevant.

Jag freslr att du stter dig ner och gnar lite tid t grunderna innan du programmerar mer.
1) Lr dig HTML och CSS, inklusive hur man anropar externa filer med CSS och Javascript.
2) Lr dig grunderna i programmering, bland annat funktioner, olika sorters loopar (do-until, while, for-next, etc), och grunderna i objektorienterad programmering.
3) Lr dig vad DOM r och hur det fungerar.
4) Lr dig hur taggar och klasser fungerar i HTML/CSS och hur det appliceras i Javascript.
5) Lr dig grunderna i Javascript. Lr dig sedan mer. Om du inte frstr Javascript s kommer du inte att bli bra p jQuery.
6) Lr dig jQuery.
7) va dig i att skriva programspecifikationer. Det r ofta folk kommer till mig med vldigt lsa tankar om hur ett program ska fungera, och jag mste tvinga ur dem en massa detaljer. Sedan skriver jag (som utvecklare) en specifikation som jag mailar till dem, och som de mste godknna innan jag brjar p koden. D kan de aldrig sga att de menade nt helt annat eftert. :-)

Nu kan du brja fundera p att skriva program.
Men du brjar med ngot ltt, som du klarar av. Jag ser massor av folk som vill "bli programmerare" och som tror de har vrldens bsta id fr en applikation eller ett spel, men har ingen aning om programmering. De gr direkt p ett komplicerat program, utan att lra sig stegen mellan. Det tar tid och mda att lra sig programmering, du behver erfarenhet.
Jag satt 3-4 timmar per dag i skolas datorrum, fem dagar i veckan, under nstan 7 r. Dr lrde jag mig massor. ven efter att jag slutat skolan la jag ner en massa tid p att lra mig saker, och att programmera och testa saker.

Det finns ytterligare ngra saker som du behver fr att bli en bra programmerare:
* Du mste ha en nstan OCD-liknande attityd till detaljer. Sitter du till exempel och flyttar grafik en pixel hit eller dit fr att se vad som ser bst ut, d har du lite av den personligheten.
* Du mste vara en problemlsare. Har du inte den mentaliteten s kommer du inte att bli bra.
* Du mste "vara" en programmerar frn fdseln. Det r inget man kan lra sig om man inte nar rtt anlag/personlighet/mentalitet. Ls grna det hr: http://www.codinghorror.com/blog/200...ing-goats.html


Citat:
Ursprungligen postat av mario19
Tack frhand.

Allt/det mesta du behver finns i mitt svar ovan, s du behver inte tacka p frhand, finns inte s mycket mer att tillgga. :-)

r det hr hndelsevis nt skoluppgift eller liknande, och du mste ha in uppgiften p mndag? ;-)
Citera
2013-06-22, 00:25
  #7
mario19
Medlem
Citat:
Ursprungligen postat av TexasSwede
Vilken editor du anvnder r irrelevant.

Jag freslr att du stter dig ner och gnar lite tid t grunderna innan du programmerar mer.
1) Lr dig HTML och CSS, inklusive hur man anropar externa filer med CSS och Javascript.
2) Lr dig grunderna i programmering, bland annat funktioner, olika sorters loopar (do-until, while, for-next, etc), och grunderna i objektorienterad programmering.
3) Lr dig vad DOM r och hur det fungerar.
4) Lr dig hur taggar och klasser fungerar i HTML/CSS och hur det appliceras i Javascript.
5) Lr dig grunderna i Javascript. Lr dig sedan mer. Om du inte frstr Javascript s kommer du inte att bli bra p jQuery.
6) Lr dig jQuery.
7) va dig i att skriva programspecifikationer. Det r ofta folk kommer till mig med vldigt lsa tankar om hur ett program ska fungera, och jag mste tvinga ur dem en massa detaljer. Sedan skriver jag (som utvecklare) en specifikation som jag mailar till dem, och som de mste godknna innan jag brjar p koden. D kan de aldrig sga att de menade nt helt annat eftert. :-)

Nu kan du brja fundera p att skriva program.
Men du brjar med ngot ltt, som du klarar av. Jag ser massor av folk som vill "bli programmerare" och som tror de har vrldens bsta id fr en applikation eller ett spel, men har ingen aning om programmering. De gr direkt p ett komplicerat program, utan att lra sig stegen mellan. Det tar tid och mda att lra sig programmering, du behver erfarenhet.
Jag satt 3-4 timmar per dag i skolas datorrum, fem dagar i veckan, under nstan 7 r. Dr lrde jag mig massor. ven efter att jag slutat skolan la jag ner en massa tid p att lra mig saker, och att programmera och testa saker.

Det finns ytterligare ngra saker som du behver fr att bli en bra programmerare:
* Du mste ha en nstan OCD-liknande attityd till detaljer. Sitter du till exempel och flyttar grafik en pixel hit eller dit fr att se vad som ser bst ut, d har du lite av den personligheten.
* Du mste vara en problemlsare. Har du inte den mentaliteten s kommer du inte att bli bra.
* Du mste "vara" en programmerar frn fdseln. Det r inget man kan lra sig om man inte nar rtt anlag/personlighet/mentalitet. Ls grna det hr: http://www.codinghorror.com/blog/200...ing-goats.html




Allt/det mesta du behver finns i mitt svar ovan, s du behver inte tacka p frhand, finns inte s mycket mer att tillgga. :-)

r det hr hndelsevis nt skoluppgift eller liknande, och du mste ha in uppgiften p mndag? ;-)

Det var bra rd, om jag hade tid skulle grna gra precis som du gjorde, men tyvrr jag gr p Vuxenutbildning det e p distans det svrt att trffa lraren personligt annars kunde jag ha ftt hjlp av lraren lra mig mer.
jag gde 4 dagar att lsa den hr uppgiften, men det gick inte.


Till uppgiften skriver du ven en projektrapport.

Nr ett textstycke blir klickat s skall en yta fr att redigera dyka upp. Texten som fanns i stycket skall flyttas in i den ytan samt att knappar fr olika kommandon skall tillkomma. Texten gr d att ndra och nr knappen fr "redigera" klickas ska de nya ndringarna erstta den text som fanns dr.

Till denna uppgift anvnder 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>Nedanstende &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 rd, om jag hade tid skulle grna gra precis som du gjorde, men tyvrr jag gr p Vuxenutbildning det e p distans det svrt att trffa lraren personligt annars kunde jag ha ftt hjlp av lraren lra mig mer.

Internet r fullt av resurser, du behver inte lraren. Finns hur mnga sidor som helst om webbutveckling, javascript, etc. Och ngon slags kursbok/litteratur mste vi vl ha ftt?

Citat:
Ursprungligen postat av mario19
jag gde 4 dagar att lsa den hr uppgiften, men det gick inte.

S du sger att lraren gav dig en uppgift som omfattar saker som inte lrts ut?
Jag tvivlar p att lraren sger "hr r en uppgift, leta p ntet fr att klura ut hur ni ska gra".
Jag tror att ni har lrt er allt som behvs fr att lsa uppgiften.

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

Nr ett textstycke blir klickat s skall en yta fr att redigera dyka upp. Texten som fanns i stycket skall flyttas in i den ytan samt att knappar fr olika kommandon skall tillkomma. Texten gr d att ndra och nr knappen fr "redigera" klickas ska de nya ndringarna erstta den text som fanns dr.

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

Se dr, du har hela specifikationen snyggt och prydligt frpackad.

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

Vad tror du den raden gr? Lter som om du redan har all kod klar dr, bara att lsa dokumentatione, eller titta i Javascript-filen.

Annars r Google din vn. Hr finns det tio olika jQuery-plugin som gr vad du frsker gra: 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...
Hr har du brjan till koden. Bara att fortstta, och fixa till det sista, till exempel knapparna.
Om man ska vara petig s fungerar koden per specifikationen (frutom knapparna), men du kan bara ndra varje stycke en gng. :-) Str dock inget i uppgiften att man kunna ndra flera gnger.
Nu har jag frskt skriva koden s att du inte behver rra HTML-koden. Men om du fr lgga in lite extra taggar dr s blir det mycket enklare.

Nu har jag flickvnnen ver, s ska vara lite social istllet fr att lsa dina hemuppgifter. :-)

Lgg in koden nedan hgst upp i HTML-filen, och erstt allt ovanfr 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 frst reda ut vad som behver gras fr att lsa uppgiften.
Ibland behver man gra en lista i p vanlig (nja) svenska (sllan borde man dock (enlig mig) blanda in jQuery):

Fr att leta reda p alla element med klassen .editable, anvnd t.ex. document.querySelectorAll(), som har bra std tillbaka till IE8:
https://developer.mozilla.org/en-US/...erySelectorAll

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

Fr varje element i listan, lgg till en lyssnare fr klick:
https://developer.mozilla.org/en-US/...lement.onclick

Funktionen som krs vid klick skall (om jag frsttt uppgiften rtt) gra elementet "redigerbart" genom att det byts ut mot en textarea och Spara/Avbryt-knappar.

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

Man vill veta om ngon 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

Formulret har ocks en klicklyssnare, i vilken man kollar efter vilket element som klicket kom ifrn, och om det var ngon av knapparna utfr man det kommando som just den knappen str fr.

Vid "Spara":
  1. Ta innehllet i formulrets textarea och lgg tillbaka i det "redigerbara" elementet.
  2. Ta bort formulret ur dokumentet med funktionen removeChild() (https://developer.mozilla.org/en-US/...de.removeChild)
  3. terstll visningen av det redigerade elementet genom att ter manipulera dess style.display-property (se ovan)
Vid "Avbryt" gr man endast steg 2 och 3 ovan.

Det vore vldigt ondigt att anvnda jQuery till ngot sdant hr (srskilt om man bara stadkommer ngot som fungerar halvbra), och jag hoppas verkligen att det inte r ett tilltet "verktyg" i en kurs om DOM-programmering.

Ls det som str i dokumentationen i lnkarna ovan s kommer du troligen att kunna undvika en hel del jQuery-junk.

Hr r ett exempel p ca 30 rader som fljer 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);}
  }
}; 


Lmna nu inte in detta som svar p din uppgift. Det brukar mrkas ganska tydligt nr elever inte gjort sina uppgifter sjlva. Detta r bara ett frsk att genom nyttiga lnkar och exempel svara p frgan du ursprungligen stllde.

/p
Citera
2013-06-25, 20:07
  #11
mario19
Medlem
Citat:
Ursprungligen postat av Povel
Det r som sagt ofta bra att frst reda ut vad som behver gras fr att lsa uppgiften.
Ibland behver man gra en lista i p vanlig (nja) svenska (sllan borde man dock (enlig mig) blanda in jQuery):

Fr att leta reda p alla element med klassen .editable, anvnd t.ex. document.querySelectorAll(), som har bra std tillbaka till IE8:
https://developer.mozilla.org/en-US/...erySelectorAll

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

Fr varje element i listan, lgg till en lyssnare fr klick:
https://developer.mozilla.org/en-US/...lement.onclick

Funktionen som krs vid klick skall (om jag frsttt uppgiften rtt) gra elementet "redigerbart" genom att det byts ut mot en textarea och Spara/Avbryt-knappar.

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

Man vill veta om ngon 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

Formulret har ocks en klicklyssnare, i vilken man kollar efter vilket element som klicket kom ifrn, och om det var ngon av knapparna utfr man det kommando som just den knappen str fr.

Vid "Spara":
  1. Ta innehllet i formulrets textarea och lgg tillbaka i det "redigerbara" elementet.
  2. Ta bort formulret ur dokumentet med funktionen removeChild() (https://developer.mozilla.org/en-US/...de.removeChild)
  3. terstll visningen av det redigerade elementet genom att ter manipulera dess style.display-property (se ovan)
Vid "Avbryt" gr man endast steg 2 och 3 ovan.

Det vore vldigt ondigt att anvnda jQuery till ngot sdant hr (srskilt om man bara stadkommer ngot som fungerar halvbra), och jag hoppas verkligen att det inte r ett tilltet "verktyg" i en kurs om DOM-programmering.

Ls det som str i dokumentationen i lnkarna ovan s kommer du troligen att kunna undvika en hel del jQuery-junk.

Hr r ett exempel p ca 30 rader som fljer 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);}
  }
}; 


Lmna nu inte in detta som svar p din uppgift. Det brukar mrkas ganska tydligt nr elever inte gjort sina uppgifter sjlva. Detta r bara ett frsk att genom nyttiga lnkar och exempel svara p frgan du ursprungligen stllde.

/p

jag ska flja alla hemsidorna som du har lagt fr att lsa uppgiften hoppas att lser sig.
Tack fr hand.
Citera
2013-06-26, 14:28
  #12
mario19
Medlem
Citat:
Ursprungligen postat av Povel
Det r som sagt ofta bra att frst reda ut vad som behver gras fr att lsa uppgiften.
Ibland behver man gra en lista i p vanlig (nja) svenska (sllan borde man dock (enlig mig) blanda in jQuery):

Fr att leta reda p alla element med klassen .editable, anvnd t.ex. document.querySelectorAll(), som har bra std tillbaka till IE8:
https://developer.mozilla.org/en-US/...erySelectorAll

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

Fr varje element i listan, lgg till en lyssnare fr klick:
https://developer.mozilla.org/en-US/...lement.onclick

Funktionen som krs vid klick skall (om jag frsttt uppgiften rtt) gra elementet "redigerbart" genom att det byts ut mot en textarea och Spara/Avbryt-knappar.

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

Man vill veta om ngon 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

Formulret har ocks en klicklyssnare, i vilken man kollar efter vilket element som klicket kom ifrn, och om det var ngon av knapparna utfr man det kommando som just den knappen str fr.

Vid "Spara":
  1. Ta innehllet i formulrets textarea och lgg tillbaka i det "redigerbara" elementet.
  2. Ta bort formulret ur dokumentet med funktionen removeChild() (https://developer.mozilla.org/en-US/...de.removeChild)
  3. terstll visningen av det redigerade elementet genom att ter manipulera dess style.display-property (se ovan)
Vid "Avbryt" gr man endast steg 2 och 3 ovan.

Det vore vldigt ondigt att anvnda jQuery till ngot sdant hr (srskilt om man bara stadkommer ngot som fungerar halvbra), och jag hoppas verkligen att det inte r ett tilltet "verktyg" i en kurs om DOM-programmering.

Ls det som str i dokumentationen i lnkarna ovan s kommer du troligen att kunna undvika en hel del jQuery-junk.

Hr r ett exempel p ca 30 rader som fljer 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);}
  }
}; 


Lmna nu inte in detta som svar p din uppgift. Det brukar mrkas ganska tydligt nr elever inte gjort sina uppgifter sjlva. Detta r bara ett frsk att genom nyttiga lnkar och exempel svara p frgan du ursprungligen stllde.

/p

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

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Det är enkelt att registrera ett nytt konto

Bli medlem

Logga in

Har du redan ett konto? Logga in här

Logga in