Oprettet tir. d. 09. februar 2010 kl. 18:57:31

Nicklas_J
Nicklas_J (3.625 point. Point ude: 235)

JavaScript Instant Edit med button?

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();

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+'" />' +
                  '<input type="submit" value="Edit" name="Submit"' +
                  'onclick="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;
    }
  }

}

1. Her er scriptet til at starte med, som jeg har problem med
2. http://jsbin.com/ (...) for at gøre det lettere, så har jeg lavet en demo på JSBIN, klik på linket så kan i se hvordan scriptet virker.
3. Spørgsmål:
Det er sådan at jeg har dette script, som gør at du kan klikke på "field1" så bliver den til en input redigerings felt samt kommer der en submit button. Dette script VIRKER uden den der submit button, men jeg vil gerne have at scriptet ska virke MED submit button, Altså, at efter man har ændret teksten, så når man klikker på "Edit" (submit button) så ændres teksten og den ud fra "redigeringsmode".
Som sagt virker det UDEN den der button, og i kan se her hvordan det virker uden den button: http://jsbin.com/ (...) der 'gemmer' den osv gennem med OnBlur.

Håber i forstod mig, på forhånd tak!!

Skrevet tir. d. 09. februar 2010 kl. 23:01:31| #1

tjens
tjens (32.505 point)
<input type="submit" value="Edit" name="Submit" onclick="myEditable(this, 'edit')"/> ;

this er submitknappen selv, og derfor giver e.value teksten #Edit#.

Giv dit input tekstfelt en Id, og brug getElementById i stedet for this.

Skrevet tir. d. 09. februar 2010 kl. 23:10:42| #2

tjens
tjens (32.505 point)
eller find tekstfeltets indhold med:

parentElement.firstChild.value;

Skrevet ons. d. 10. februar 2010 kl. 12:04:09| #3

Nicklas_J
Nicklas_J (3.625 point)
Forstår ikke helt? Så det skal være:
Så det skal være:
    e.innerHTML = '<input type="text" id="felt1" value="'+e.innerHTML+'" />' +
                  '<input type="submit" value="Edit"name="Submit"' +
                  'onclick="myEditable(GetElementById(\'felt1'/), \'edit\')"/> ';

Eller er jeg helt væk..

Skrevet ons. d. 10. februar 2010 kl. 18:36:27| #4

Nicklas_J
Nicklas_J (3.625 point)
FIk prøvet det nu når jeg er hjemme, og det lader ikke til at virke.

Skrevet ons. d. 10. februar 2010 kl. 21:08:46| #5

tjens
tjens (32.505 point)
Har ændret lidt: onclick sender nu this.parentNode, så e bliver span-elementet i begge tilfælde.
Dermed bliver den nye tekst til e.firstChild.value.
(Har fjernet det med httprequest for at kunne teste på egen maskine):
function myEditable(e, act) {
  if (act == 'click') {
    e.innerHTML = '<input type="text" value="'+e.innerHTML+'" />' +
                  '<button onclick="myEditable(this.parentNode, \'edit\'); ">Edit</button> ';
    e.onclick = null;
  } else if (act == 'edit') {
    var tekstny= e.firstChild.value;
    // Opdater span teksten, til nye værdi 
    e.innerHTML = tekstny; 
    // placer onclick eventen igen på span elementet     
    setTimeout( "document.getElementById('EditableSpan').onclick =  function () { myEditable(this, 'click');}", 10 );
  }
}

Men jeg fik et mærkeligt problem med at span straks ændrede sig til input igen, som om at onclick-eventen ikke er "helt død".

Derfor har jeg givet span et id, så jeg kan sætte onclick på igen med setTimeout efter nogle splitsekunder som det ses ovenfor.
<span id="EditableSpan" onclick="myEditable(this, 'click');">Field1(clickthis)</span>

Skrevet tor. d. 11. februar 2010 kl. 16:38:39| #6

Nicklas_J
Nicklas_J (3.625 point)
Tusinde tak tjens! Du har virkelig styr på det.

Skrevet tor. d. 11. februar 2010 kl. 16:59:19| #7

Nicklas_J
Nicklas_J (3.625 point)
Hej igen.
Hmm, efter at man har trykket 1 gang på span elementet, og ændrer, så kan man ikke ændre igen(gennem at klikke på det)..

Hvad skal ændres i koden?

Skrevet tor. d. 11. februar 2010 kl. 17:02:40| #8

Nicklas_J
Nicklas_J (3.625 point)
My bad, det virker uden problem :)! Takker!

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

Tabindex!

Oprettet den 11. februar 2012 kl. 11.37
thomasfricke giver 30 point for svar | Giv et svar »

skal frem brugernavn ned og sige om den har eller ej

Oprettet den 11. februar 2012 kl. 02.44
tobrukDk giver 20 point for svar | Giv et svar »

Muligvis script-konfllikt i jquery. Min slider vises...

Oprettet den 9. februar 2012 kl. 23.00
Peterjakobsen giver 30 point for svar | Giv et svar »

Seneste guides

Installer win 7
Den gode bruger


   




Tips & Tricks fra PC World

Teaser billede

Her er fem sjove danske websider du skal kende

Trænger dine lattermuskler til en omgang fitness på dansk? Vi viser vej til fem websider fyldt med humor og vanvittig satire.


Anmeldelser fra PC World

Teaser billede

Test: Denne super-tablet er iPads hårdeste konkurrent

Eee Pad Transformer Prime er frygtindgydende med sin quadcore processor og evne til at trylle sig om til bærbar. Apple bør kigge i bagspejlet, for Asus' tablet-pc kommer buldrende - og gør det...


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

Nu kan du snart hente Windows 8

Den nye offentlige betaversion af Windows 8 er klar i denne måned.


Nyheder fra Computerworld

Teaser billede

Måske snart slut med Androids helt store problem

Android-platformen har længe været plaget af et særligt problem. Men måske er problemet nu ved at være elimineret.


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