Anzeige

Easy AJAX inline text edit 2.0: CSS ID-Problem lösen

Easy AJAX inline text edit 2.0: CSS ID-Problem lösen | PSD-Tutorials.de

Erstellt von ezekiel23, 20.08.2009.

  1. ezekiel23

    ezekiel23 Nicht mehr ganz neu hier

    Dabei seit:
    07.11.2008
    Beiträge:
    149
    Geschlecht:
    männlich
    Software:
    Creative Suite CS5
    Kameratyp:
    Nikon D40
    Easy AJAX inline text edit 2.0: CSS ID-Problem lösen
    Hallo,

    habe ein (hoffentlich) kleines Problem bei der Verwendung von Easy AJAX inline text edit 2.0, allerdings is mir das kleine Problem schon zu groß :(

    Ich lasse mir mehrere <span>'s mit einer for-schleife erstellen (smarty und php). Innerhalb dieser <span>'s lässt sich der Text ja dann prima editieren.
    Das Problem is nur, die <span>'s müssen alle von unterschiedlichen ID's sein und ich kann unmöglich für jeden <span> ne eigene CSS-ID anlegen.

    Hab mir also überlegt die .js Datei umzuschreiben, dass die <span>'s alle die gleiche ID haben können. Da ich darin noch nicht so gut bin, hoffe ich wir können das Problem zusammen lösen, da sicher auch der ein oder andere schon vor dem gleichem Problem saß (und hat es vielleicht auch gelöst?) :)

    Hier der Code -Ausschnitt aus der .js Datei:

    Code (Text):
    1. //edit field created
    2. function editBox(actual) {
    3.     //alert(actual.nodeName+' '+changing);
    4.     if(!changing){
    5.         width = widthEl(actual.id) + 20;
    6.         height =heightEl(actual.id) + 2;
    7.  
    8.         if(height < 40){
    9.             if(width < 100)    width = 150;
    10.             actual.innerHTML = "<input id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" maxlength=\"254\" type=\"text\" value=\"" + actual.innerHTML + "\" onkeypress=\"return fieldEnter(this,event,'" + actual.id + "')\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\" />";
    11.         }else{
    12.             if(width < 70) width = 90;
    13.             if(height < 50) height = 50;
    14.             actual.innerHTML = "<textarea name=\"textarea\" id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\">" + actual.innerHTML + "</textarea>";
    15.         }
    16.         changing = true;
    17.     }
    18.  
    19.         actual.firstChild.focus();
    20. }
    21.  
    Vor dem Klick auf die <span>'s:
    [​IMG]

    Nach dem Klick auf die <span>'s:
    [​IMG]

    LG
     
    #1      
  2. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    Easy AJAX inline text edit 2.0: CSS ID-Problem lösen
    AW: Easy AJAX inline text edit 2.0: CSS ID-Problem lösen

    Mehrere Elmemente, die die gleiche ID haben, sind meines Wissens nach nicht erlaubt (So kann man per javascript zB nur ein Element mit einer ID ansprechen).
    Du kannst alle IDs mit einem gemeinsamen Namen beginnen lassen und hinten dran dann eine Zahl anhängen.

    Der Codeausschnitt hat damit übrigens nichts zu tun (Der Funktion wird das Objekt und somit auch dessen ID übergeben.) Wichtig wäre hier das Script, welches es aufruft.
     
    #2      
  3. ezekiel23

    ezekiel23 Nicht mehr ganz neu hier

    Dabei seit:
    07.11.2008
    Beiträge:
    149
    Geschlecht:
    männlich
    Software:
    Creative Suite CS5
    Kameratyp:
    Nikon D40
    Easy AJAX inline text edit 2.0: CSS ID-Problem lösen
    AW: Easy AJAX inline text edit 2.0: CSS ID-Problem lösen

    Danke, das hat schonmal funktioniert. Genau das war auch das Problem, dass eine ID nicht mehrfach vorkommen darf.
     
    #3      
  4. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    Easy AJAX inline text edit 2.0: CSS ID-Problem lösen
    AW: Easy AJAX inline text edit 2.0: CSS ID-Problem lösen

    Es würde höchstens gehen, wenn du es entweder per name oder class löst.
     
    #4      
  5. ezekiel23

    ezekiel23 Nicht mehr ganz neu hier

    Dabei seit:
    07.11.2008
    Beiträge:
    149
    Geschlecht:
    männlich
    Software:
    Creative Suite CS5
    Kameratyp:
    Nikon D40
    Easy AJAX inline text edit 2.0: CSS ID-Problem lösen
    AW: Easy AJAX inline text edit 2.0: CSS ID-Problem lösen

    Die class muss "editText" sein.
    Die .js Datei such nach <span>'s die eine ID haben und die class="editText".
    hier ist übrigens mal die gesamte Datei: instandedit.js

    An die IDs ne Zahl anhängen funktioniert schon ganz gut..mal schaun obs später noch mehr Probleme gibt, wenn es darum geht den Inhalt auszulesen und an die DB zu senden :rolleyes:
     
    #5      
Seobility SEO Tool
x
×
×