TIM Wiki / NEW TIM 6 Documentation

Um in Smart und Webformen HTML Elemente dynamisch wiederholen oder entfernen zu können benötigt man den sogenannten DomRepeater.
Dieser besteht aus einer JavaScript Datei und ist für Smart und Webformen geeignet.
\\»Achtung: jQuery wird dringend benötigt!!

domrepeater.zip

<table>
    <tBody class="repeatVar">
        <tr>
            <td>
                Var1: <input type="text" id="var1" name="var1"/>
            </td>
        </tr>
        <tr>
            <td>
                Var2: <input type="text" id="var2" name="var2"/>
            </td>
        </tr>
    </tBody>
    <tr>
        <td colspan="6" class="alignLeft">
            <img src="plus.png" name="repeatVar" id="repeatVar" class="domRepeater" start="3" callback="gadget.functions.addCallback" style="cursor:pointer" />
            <img src="minus.png" id="repeatVarRemover" name="repeatVarRemover" callback="gadget.functions.removeCallback" style="cursor:pointer" />
        </td>
    </tr>
</table>

Das plus.png benötigt dringend die class „domRepeater“!!»Die ID des Plus muss mit der class des zu wiederholenden Elements übereinstimmen!!»Die ID des Minus muss mit der class des zu wiederholenden Elements + „Remover“ übereinstimmen!!

Dem Plus kann das Attribut „start“ mitgegeben werden, welches dafür sorgt das das zu wiederholenden Element von Anfang an n-mal wiederholt wird!

Dem Plus kann das Attribut „callback“ mitgegeben werden, welches dafür sorgt das nach dem initialisieren des DomRepeaters und nach jedem Klick auf das Plus die übergebene Funktion aufgerufen wird!

Dem Minus kann das Attribut „callback“ mitgegeben werden, welches dafür sorgt das nach jedem Klick auf das Minus die übergebene Funktion aufgerufen wird!

var head = document.getElementsByTagName("head")[0];
var customUrl = "/loom-portal/custom/ERSETZMICH/";
scriptTag = document.createElement('script');
scriptTag.setAttribute("type", "text/javascript");
scriptTag.setAttribute("src", customUrl + "domRepeater.js");
head.appendChild(scriptTag);
 
gadget.functions.initFunction=function(){
    domRepeater.bind(this)();
}
 
gadget.functions.addCallback=function(){
 
}
 
gadget.functions.removeCallback=function(){
 
}

domRepeater.js

findChildren=function(source){
    var stack = new Array();
    var children = new Array();
    stack.push(source);
    children.push(stack[0]);
    while(stack.length!=0){
        if(stack[0].children.length!=0){
            if(stack[0].tagName=="textarea")
                children.push(stack.shift());
            if(stack[0].tagName=="label")
                children.push(stack.shift());
            if(stack[0].tagName=="option")
                children.push(stack.shift());
            if(stack[0].tagName=="SELECT")
                children.push(stack.shift());
            else{
                for(var i=0; i<stack[0].children.length; i++){
                    stack.push(stack[0].children[i]);
                }
                stack.shift();
            }
        }
        else{
            children.push(stack.shift());
        }
    }
    return children;
}
 
domRepeater=function(){
    window["entity"] = (this.entity!=undefined)?this.entity:undefined;
    if(entity!=undefined)
        jq = (this.form.ownerDocument.defaultView!=null) ? this.form.ownerDocument.defaultView.jQuery : this.form.ownerDocument.parentWindow.jQuery;
    else
        jq = jQuery;
    prepChildren=function(id){
        var original = jq("." + id);
        var clone = original.clone();
        var children = findChildren((window[id + "_REP"].length==0)?original[0]:clone[0]);
        for(var i=0; i<children.length; i++){
            if(children[i].id!="")
                children[i].setAttribute("id", children[i].id.split("[")[0] + "[" + window[id + "_REP"].length + "]");
            if(children[i].name!=undefined)
                children[i].setAttribute("name", children[i].name.split("[")[0] + "[" + window[id + "_REP"].length + "]");
            if(children[i].htmlFor!=undefined)
                children[i].htmlFor = children[i].htmlFor.split("[")[0] + "[" + window[id + "_REP"].length + "]";
            if(children[i].type=="radio" || children[i].type=="checkbox")
                children[i].checked = false;
            else
                children[i].value = "";
            if(children[i].className.match(/hasDatepicker/)!=null)
                children[i].className = children[i].className.replace(/.hasDatepicker/, "");
            if(entity != undefined){
                children[i]["entity"] = entity;
                if(entity.getValue(children[i].id)!=undefined)
                    children[i].value = entity.getValue(children[i].id);
                jq(children[i]).change(function(){
                    if(this.type=="radio" && this.type!=undefined)
                        entity.setValue(this.name, this.value);
                    if(this.type=="checkbox" && this.type!=undefined)
                        entity.setValue(this.id, this.checked);
                    else if(this.type!=undefined)
                        entity.setValue(this.id, this.value);
                });
            }
        }
        return (window[id + "_REP"].length==0)?original[0]:clone[0];
    }
    createHiddenCount=function(id, value){
        var hiddenInput = document.createElement("input");
        hiddenInput.style.display = "none";
        hiddenInput.setAttribute("id", id + "_Count");
        hiddenInput.setAttribute("name", id + "_Count");
        hiddenInput.value = value;
        return hiddenInput;
    }
    jq(".domRepeater").each(function(i, repeatImg){
        window[repeatImg.id + "_REP"] = new Array();
        if(entity != undefined && entity.getValue(repeatImg.id + "_Count")!=undefined){
            window[repeatImg.id + "_Count"] = entity.getValue(repeatImg.id + "_Count");
        }
        else if(this.getAttribute("start")!=undefined){
            window[repeatImg.id + "_Count"] = this.getAttribute("start");
            this.parentNode.insertBefore(createHiddenCount(repeatImg.id, window[repeatImg.id + "_Count"]), this);
        }
        else{
            window[repeatImg.id + "_Count"] = 0;
            this.parentNode.insertBefore(createHiddenCount(repeatImg.id, 1), this);
        }
        if(window[repeatImg.id + "_Count"]>0){
            for(var g=0; g<window[repeatImg.id + "_Count"]; g++){
                window[repeatImg.id + "_REP"].push(prepChildren(repeatImg.id));
                window[repeatImg.id + "_REP"][0].parentNode.insertBefore(window[repeatImg.id + "_REP"][window[repeatImg.id + "_REP"].length-1], window[repeatImg.id + "_REP"][window[repeatImg.id + "_REP"].length-((window[repeatImg.id + "_REP"].length<2)?1:2)].nextSibling);
            }
        }
        else
            window[repeatImg.id + "_REP"].push(prepChildren(repeatImg.id));
        if(this.getAttribute("callback")!=undefined)
            eval(this.getAttribute("callback"))();
        jq(repeatImg).click(function(){
            window[repeatImg.id + "_REP"].push(prepChildren(repeatImg.id));
            window[repeatImg.id + "_REP"][0].parentNode.insertBefore(window[repeatImg.id + "_REP"][window[repeatImg.id + "_REP"].length-1], window[repeatImg.id + "_REP"][window[repeatImg.id + "_REP"].length-((window[repeatImg.id + "_REP"].length<2)?1:2)].nextSibling);
            if(entity != undefined)
                entity.setValue(repeatImg.id + "_Count", window[repeatImg.id + "_REP"].length);
            else
                jq("#" + repeatImg.id + "_Count").val(window[repeatImg.id + "_REP"].length);
            if(this.getAttribute("callback")!=undefined)
                eval(this.getAttribute("callback"))();
        });
        jq("#" + repeatImg.id + "Remover").click(function(){
            if(window[repeatImg.id + "_REP"].length==1){
                alert("Es muss mindestens ein Element erhalten bleiben!");
                return false;
            }
            var last = window[repeatImg.id + "_REP"].pop();
            var children = findChildren(last);
            if(entity != undefined){
                for(var i=0; i<children.length; i++){
                    if(children[i].type=="RADIO" && children[i].type!=undefined)
                        entity.setValue(children[i].name, "");
                    else if(children[i].type!=undefined)
                        entity.setValue(children[i].id, "");
                }
            }
            last.parentElement.removeChild(last);
            if(entity != undefined)
                entity.setValue(repeatImg.id + "_Count", window[repeatImg.id + "_REP"].length);
            else
                jq("#" + repeatImg.id + "_Count").val(window[repeatImg.id + "_REP"].length);
            if(this.getAttribute("callback")!=undefined)
                eval(this.getAttribute("callback"))();
        });
    });
}