Pagina de start a forumului Forum PHP Romania - Discutii despre PHP, MySQL, Javascript, AJAX, etc Forum PHP Romania - Discutii despre PHP, MySQL, Javascript, AJAX, etc
Comunitatea PHP Romania
 

script ajax edit-in-place
Vezi mesajul original

 
       Pagina de start a forumului Forum PHP Romania - Discutii despre PHP, MySQL, Javascript, AJAX, etc -> AJAX
Subiectul anterior :: Subiectul următor  
Autor Mesaj
moonlord



Data înscrierii: 15/Iul/2007
Mesaje: 95

Trimis: Joi Oct 11, 2007 9:27 pm    Titlul subiectului: script ajax edit-in-place  

stitzi ceva script ajax edit-in-place fara folosirea prototype sau jquery?
Sus  
Copyright



Data înscrierii: 17/Dec/2006
Mesaje: 859
Locație: Bucuresti

Trimis: Joi Oct 11, 2007 10:07 pm    Titlul subiectului:  

Uite aici un exemplu banal, trebuie sa mai adaugi doar salvarea in baza de date via Ajax.

Cod:
function setEditableText(){
   var elems = document.body.getElementsByTagName("*");
   for(var i = 0, n = elems.length; i < n; i++){
      if(elems[i].className == "editable"){         
      
         elems[i].ondblclick = function(){
            var edit = document.createElement('input');
            edit.setAttribute("type", "text");
            edit.setAttribute("value", this.innerHTML);
            this.parentNode.insertBefore(edit,this);
            this.parentNode.removeChild(this);
            
            edit.onblur = function(){
               var text = document.createElement('span');
               text.appendChild(document.createTextNode(this.value));
               text.setAttribute("class", "editable");                              
               this.parentNode.insertBefore(text,this);
               this.parentNode.removeChild(this);
               setEditableText(); 
            }
         }
      }
   }   
}
window.onload = setEditableText;

................................................

<span class="editable">Double-click me to edit my text!</span>


Later.
Sus  
moonlord



Data înscrierii: 15/Iul/2007
Mesaje: 95

Trimis: Dum Oct 14, 2007 4:29 pm    Titlul subiectului:  

ok merge, am incercat eu sa fac partea cu ajax dar nu`mi iese.
Cod:
function trimitere() {
    var date=document.getElementById('vlad').value; 
    var url = "vlad.php";
    var urlc = url+"?date=" + date ;
    http.open("GET",urlc,true);
    http.onreadystatechange = useHttpResponse;
    http.send(null);
    }
function useHttpResponse() {
    if (http.readyState == 4) {
        if(http.status == 200) {
            var timeValue = http.responseText;
            document.getElementById('text').innerHTML = timeValue;
        }
    }
}


am mai adaugat la functia de sus edit.setAttribute("id", "vlad"); . Dar stiu ca nu avea cum sa mearga ca poate is mai multe field`uri si le da la toate id="vlad". Deci knd apas pe buton primesc eroarea asta in bugzilla:document.getElementById("vlad") has no properties
[Break on this error] var date=document.getElementById('vlad').value;

Presupun pt ca functia onblur face removeChild...
Sus  
andrei009



Data înscrierii: 16/Mar/2007
Mesaje: 211

Trimis: Dum Oct 14, 2007 5:17 pm    Titlul subiectului:  

uite aici un tutorial care foloseste jquery
Sus  
moonlord



Data înscrierii: 15/Iul/2007
Mesaje: 95

Trimis: Dum Oct 14, 2007 5:26 pm    Titlul subiectului:  

am precizat mai sus ca vreau fara jquery...
Sus  
Copyright



Data înscrierii: 17/Dec/2006
Mesaje: 859
Locație: Bucuresti

Trimis: Dum Oct 14, 2007 8:05 pm    Titlul subiectului:  

moonlord a scris: am mai adaugat la functia de sus edit.setAttribute("id", "vlad"); . Dar stiu ca nu avea cum sa mearga ca poate is mai multe field`uri si le da la toate id="vlad". Deci knd apas pe buton primesc eroarea asta in bugzilla:document.getElementById("vlad") has no properties
[Break on this error] var date=document.getElementById('vlad').value;

Presupun pt ca functia onblur face removeChild...

Nu inteleg de ce te complici cu id-uri, cand e mult mai usor sa folosesti direct referinta catre elementul respectiv pe evenimentul onblur.

Cod: edit.onblur = function(){
    var text = document.createElement('span');
    text.appendChild(document.createTextNode(this.value));
    text.setAttribute("class", "editable");
    this.parentNode.insertBefore(text,this);
    this.parentNode.removeChild(this);
    setEditableText();
   
    http = ...creaza obiectul xmlHttp
    http.open("GET", "vlad.php?date="+this.value, true);
    http.onreadystatechange = function() {
        if (http.readyState == 4 && http.status == 200) {
            text.innerHTML = http.responseText;
        }
    }
    http.send(null);
    }
}
Later.
Sus  
moonlord



Data înscrierii: 15/Iul/2007
Mesaje: 95

Trimis: Dum Oct 14, 2007 9:22 pm    Titlul subiectului:  

da...era simplu asa , nu m`am gandit :) ms mult ;)
Sus  
moonlord



Data înscrierii: 15/Iul/2007
Mesaje: 95

Trimis: Lun Oct 15, 2007 12:18 pm    Titlul subiectului:  

merge, doar ca imi introduce in baza de date de 2 ori aceasi valoare. De ex: daca vreau sa introduc valoarea Vlad, o introduce de 2 ori
Sus  
PHPRomania Bot
Bot Member


Data înscrierii: 27/Dec/2007
Mesaje: 1
Locaţie: Server Google
Trimis: Mie Dec 26, 2007 7:01 pm   Titlul subiectului: Ad  

Sus  
 
       Pagina de start a forumului Forum PHP Romania - Discutii despre PHP, MySQL, Javascript, AJAX, etc -> AJAX
Pagina 1 din 1


Powered by phpBB 2.0.22 © 2001, 2002 phpBB Group
Varianta în limba română: Romanian phpBB online community