Avatar billede Nicklas_J Nybegynder
09. februar 2010 - 18:57 Der er 7 kommentarer og
1 løsning

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/ofave 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/agoga der 'gemmer' den osv gennem med OnBlur.

Håber i forstod mig, på forhånd tak!!
Avatar billede tjens Nybegynder
09. februar 2010 - 23:01 #1
<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.
Avatar billede tjens Nybegynder
09. februar 2010 - 23:10 #2
eller find tekstfeltets indhold med:

parentElement.firstChild.value;
Avatar billede Nicklas_J Nybegynder
10. februar 2010 - 12:04 #3
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..
Avatar billede Nicklas_J Nybegynder
10. februar 2010 - 18:36 #4
FIk prøvet det nu når jeg er hjemme, og det lader ikke til at virke.
Avatar billede tjens Nybegynder
10. februar 2010 - 21:08 #5
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>
Avatar billede Nicklas_J Nybegynder
11. februar 2010 - 16:38 #6
Tusinde tak tjens! Du har virkelig styr på det.
Avatar billede Nicklas_J Nybegynder
11. februar 2010 - 16:59 #7
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?
Avatar billede Nicklas_J Nybegynder
11. februar 2010 - 17:02 #8
My bad, det virker uden problem :)! Takker!
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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