Avatar billede websam Nybegynder
02. oktober 2008 - 18:48 Der er 5 kommentarer og
1 løsning

Event handler og ajax kald ?

Jeg har læst i denne tråd http://www.eksperten.dk/spm/817625 hvordan men trækker data fra serveren i json format og ligger det i en tabel med dette :

// Et par handy DOM-wrappers:
var d=document;
function gE(id){return d.getElementById(id)};
function gA(o,t){return o.getElementsByTagName(t)};

function myCallBack(oHttp) {
    var oTmp = aTd = null, oCont = oDispl.cloneNode(false);
    eval("var oResp = " + oHttp.responseText);
    var aRows = oResp.rows;
    for (var i=0,j=aRows.length; i<j; i++) {
        oTmp = oTempl.cloneNode(true);
        oCont.appendChild(oTmp);
        aTd = gA(oTmp, "td");
        aTd[0].firstChild.nodeValue = aRows[i].user;
        aTd[1].firstChild.nodeValue = aRows[i].age;
        aTd[2].firstChild.nodeValue = aRows[i].sex;
    }
    oDispl.parentNode.replaceChild(oCont, oDispl);
    oDispl = oCont;
}

function getUsers() {
    new AjaxReq("POST", sUrl, null, myCallBack);
}

var oTempl = oDispl = null;
window.onload = function() {
    oDispl = gE("userDispl");
    oTempl = gA(oDispl, "tr")[0];
    oDispl.removeChild(oTempl);
}

Men hvis nu jeg vil have nogle event handler på nogle knapper hvordan bære jeg mig så ad med det uden at få problemer med leaks i IE ?

Hvis jeg har et par functioner til hådtering af handlerne, noget i stil med :

function addEvent(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else {
        if (!handler.$$guid) handler.$$guid = addEvent.guid++;
        if (!element.events) element.events = {};
        var handlers = element.events[type];
        if (!handlers) {
            handlers = element.events[type] = {};
            if (element["on" + type]) {
                handlers[0] = element["on" + type];
            }
        }
        handlers[handler.$$guid] = handler;
        element["on" + type] = handleEvent;
    }
}

addEvent.guid = 1;
function removeEvent(element, type, handler) {
    if (element.removeEventListener) {
        element.removeEventListener(type, handler, false);
    } else {
        if (element.events && element.events[type]) {
            delete element.events[type][handler.$$guid];
        }
    }
}

function handleEvent(event) {
    var returnValue = true;
    event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
    var handlers = this.events[event.type];
    for (var i in handlers) {
        this.$$handleEvent = handlers[i];
        if (this.$$handleEvent(event) === false) {
            returnValue = false;
        }
    }
    return returnValue;
}

function fixEvent(event) {
    event.preventDefault = fixEvent.preventDefault;
    event.stopPropagation = fixEvent.stopPropagation;
    return event;
}

fixEvent.preventDefault = function() {
    this.returnValue = false;
};

fixEvent.stopPropagation = function() {
    this.cancelBubble = true;
};

function getTarget(x){
    x = x || window.event;
    return x.target || x.srcElement;
}

Disse handlere er i øvrigt fundet i denne tråd http://www.eksperten.dk/spm/845354

Er det muligt at lave noget fornuftigt med dette ?
Avatar billede websam Nybegynder
02. oktober 2008 - 18:50 #1
Hov jeg glemte lige at smide html'en med, den kommer her :

<button onclick="getUsers()">Hent brugere</button>

<table>
<thead>
<tr>
    <th>Navn</th><th>Alder</th><th>Køn</th>
</tr>
</thead>
<tbody id="userDispl">
<tr>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
</tbody>
</table>
Avatar billede olebole Juniormester
02. oktober 2008 - 20:57 #2
<ole>

IE havde specielt tidligere alvorlige problemer med sin garbage collection. Det er dog efterhånden et pænt stykke tid siden, MS kom med en sikkerhedsopdatering, som samtidig tog sig af disse problemer.

P.gr.a. webbanker o.lign. opdaterer gennemsnitsbrugeren sin browser langt oftere end for blot få år siden. Derfor er problemerne omkring memory-leaks i IE/DOM ret små, så det er ikke længere nødvendigt at lave den store 'efterårsrengøring'  =)

Derudover sætter scriptet expando properties på DOMElementet, hvilket er en no-go under XHTML. Skal den model implementeres validt (i følge DOM Level 2+ ... og robust), bør der oprettes et abstrakt objekt for hvert element, der tildeles en handler. Objektet kan så tilknyttes elementet ved dettes ID - eller en specialattribut efter eget ønske.

- og så er der (som jeg også nævner i den anden tråd) lige detaljen med, at IE bruger attachEvent/detachEvent ... som scriptet ikke tager højde for

/mvh
</bole>
Avatar billede websam Nybegynder
02. oktober 2008 - 21:36 #3
Ok det var da rart at IE har fået styr på det ;o)

Men hvordan laver jeg f.eks en <input type="image" /> i callback functionen ovenfor og sætter event på den ?
Avatar billede websam Nybegynder
02. oktober 2008 - 21:45 #4
Hvis ikke de ovenstående event metoder er gode nok (selv med attachEvent/detachEvent) har du så nogle forslag til hvad der skal til, evt. et link hvor jeg kan læse om det ?
Avatar billede websam Nybegynder
03. oktober 2008 - 22:09 #5
Ok så har jeg prøvet mig lidt frem med følgende :

function myCallBack(oHttp) {
    var oTmp = aTd = null, oCont = oDispl.cloneNode(false);
    eval("var oResp = " + oHttp.responseText);
    var aRows = oResp.users;
    for (var i = 0, j = aRows.length; i < j; i++) {
        oTmp = oTempl.cloneNode(true);
        oCont.appendChild(oTmp);
        aTd = byTag(oTmp, "td");
        aTd[0].firstChild.nodeValue = aRows[i].id;
        aTd[1].firstChild.nodeValue = aRows[i].firstname;
        aTd[2].firstChild.nodeValue = aRows[i].lastname;
        var btn = document.createElement("input");
        btn.type = "submit";
        btn.value = "Go";
        aTd[3].appendChild(btn);
        addEvent(btn,
                "click",
                function(){
                    ajaxDelete()
                });
    }
    oDispl.parentNode.replaceChild(oCont, oDispl);
    oDispl = oCont;
}

Metoden der tilføjer en event ser således ud :

function addEvent(elm, evnt, func)
{
    if(elm.addEventListener && !elm.attachEvent){
        elm.addEventListener(evnt, func, true);
    }
    else if(elm.attachEvent){
        elm.attachEvent("on"+evnt, func);
    }
    else{
        elm["on"+evnt] = func;
    }
}

Og så den metode jeg prøver at tilføje :

function ajaxDelete(intId)
{
    alert("Dette vil med tiden slette en record med id " + intId + " !");
}

Og så længe jeg ikke sender noget med som parameter, så virker den event tilføjelse fint, men så snart jeg forsøger at sende en parameter med så virker det ikke hvad skal der til for at få det til at virke ?
Avatar billede websam Nybegynder
20. februar 2009 - 01:49 #6
lukker
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