innerHTML-be javascript betöltése

gege555 · 2008. Júl. 31. (Cs), 13.29

Sziasztok!

Volna egy olyan problémám, hogy szeretnék egy innerHtml-be úgy betölteni egy táblázatot, hogy a táblázat sorai kattintgatással kiválasztós lehessen. A táblázatban való navigáláshoz az alábbi linket használom:

http://projects.arkanis-development.de/table_navigation/example.html

A kódrészlet amivel próbálkozom:


        var keysHtml = "";
keysHtml +="<script type='text/javascript' src='jquery.js' ></script>";
keysHtml +="<script type='text/javascript' src='jquery2.js' ></script>";
keysHtml +="<script type='text/javascript'> jQuery.tableNavigation();</script>";
keysHtml +="<style type='text/css'>	tr.selected {background-color: red; color: white;} tr.selected a {color: white;} </style>";		
keysHtml +="	<thead>";
keysHtml +="		<tr>";
keysHtml +="			<th>Cell 01</th>";
keysHtml +="			<th>Cell 02</th>";
keysHtml +="			<th>Cell 03</th>";
keysHtml +="</tr>";
keysHtml +="	</thead>";
keysHtml +="<tbody>";
keysHtml +="		<tr>";
keysHtml +="			<td>Data 01-01</td>";
keysHtml +="			<td>Data 01-02</td>";
keysHtml +="			<td><a href='target01.html' class='korte'>Link 01</a></td>";
keysHtml +="</tr>";
keysHtml +="		<tr>";
keysHtml +="			<td>Data 02-01</td>";
keysHtml +="			<td>Data 02-02</td>";
keysHtml +="			<td><a href='target02.html' class='korte'>Link 02</a></td>";
keysHtml +="</tr>";
keysHtml +="		<tr>";
keysHtml +="			<td>Data 03-01</td>";
keysHtml +="			<td>Data 03-02</td>";
keysHtml +="			<td><a href='target03.html' class='korte'>Link 03</a></td>";
keysHtml +="</tr>";
keysHtml +="	</tbody>";
keysHtml +="</table>";
keysHtml += "</div>";
document.getElementById("keys").innerHTML = keysHtml;
document.getElementById("keys").style.display = "block";

A class='alma' illetve 'korte' definiálható a js-ben. (alapban navigateable ill. activation)

Esetleg van valakinek ötlete azzal kapcsolatban, hogy mit rontok el, illetve, hogy ilyenformán ezt meg lehet-e valósítani.

A segítséget előre is köszönöm.

Gergő

■

HTML, CSS, JavaScript, Ajax

csirip

már volt

jaczkog · 2008. Júl. 31. (Cs), 16.34

A múltkor hasonló témában ment a társalgás itt:
http://weblabor.hu/forumok/temak/21949

A hozzászóláshoz regisztráció és belépés szükséges
új téma

kösz

gege555 · 2008. Júl. 31. (Cs), 17.11

köszönöm a gyors választ. sajnos nem jutottam előbbre. még keresgélek. igazából nem vagyok ebben nagy guru, de ez a feladat meg kell oldanom :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

ezt így nem lehet.

solkprog · 2008. Júl. 31. (Cs), 18.18

Erre hibát dob a böngésző:


keysHtml +="<script type='text/javascript' src='jquery.js' ></script>";

Ajánlom figyelmedbe jaczkog hozzászólását hogy miért teszi.

üdv,
Balázs

A hozzászóláshoz regisztráció és belépés szükséges
új téma

És még egy gondolatébresztő...

Ustak · 2008. Aug. 1. (P), 10.51

A fentieken kívül még ilyet is tehetsz, ha már annyira innerHTML :-)

Elő a firebugot és próbáld ki


var cica=function(){
    alert('miáú');
};
var maindiv=document.getElementById('main'); //ez a weblabor main divje
var script=document.createElement('script'); 
script.innerHTML='('+cica+')();';  //ez az önmagát végrehajtó függvény minta (self execution function pattern :-))
maindiv.appendChild(script);

Lassan már kész a cikk, amit ilyesféle dolgokból írok, türelem :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

off off

solkprog · 2008. Aug. 1. (P), 13.06

Szívesen olvasnám már a cikked, de inkább lassan írd meg mind hogy összecsapd....
Abból amit egy két szóban itt-ott mondtál abból azt szűrtem le hogy nem pont erről fog szólni a cikked de szerintem nem volna rossz ezeket is egyszer és végleg tisztázni (fejekben, fejemben).
Akkor jöjjön még egy két egyszerű példa:


kutya=function () {
	alert(arguments[0]);
}
kutya('vau');	//lefut
(kutya)('vau');	//lefut. Ennek egyébként van valami különösebb értelme?
((kutya))('vau');	//lefut
(((kutya)))('vau');	//És ez is lefut.


kutya=function () {
	alert(arguments[0]);
}('vau');	//lefut


function kutya () {
	alert(arguments[0]);
}('vau');	//Fenti példával ellentétben nem fut le, de hibát nem dob.


kutya=(function () {
	alert(arguments[0]);
})('vau');	//lefut


(function kutya () {
	alert(arguments[0]);
})('vau');	//lefut. "Egyenértékű" a fenti példával


//És egy ráadás:
kutya=function () {
	return function () {
		alert(arguments[0]);
	};
}()('vau');	//lefut

üdv,
Balázs

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Utánanézek rendesen...

Ustak · 2008. Aug. 1. (P), 13.49

igazad van, utána fogok nézni a témának rendesen. Addig inkább nem is írok rá semmit, csak belezavarodnék úgyis :)
Azért még egy ráadás:


(function(){
    alert(arguments[0]);
})('Anonymus kutya vagyok vau!'); //lefut :-)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

(kutya)('vau'); //lefut. Ennek egyébként van valami különös

toxin · 2008. Aug. 1. (P), 13.50


(window.console && window.console.log || alert)("hello world");
(document.getElementById("foo").style.display ? hide : show )("someElem");

ilyesmik így hirtelen

üdv Csaba

A hozzászóláshoz regisztráció és belépés szükséges
új téma

:) erre nem gondoltam.

solkprog · 2008. Aug. 1. (P), 20.02

Köszönöm a példát. Be valóm férfiasan erre nem gondoltam (kicsit szégyen is...).
(Azt külön köszönöm hogy "használható" példát írtál.)

Ilyenkor jut eszme hogy hihetetlen az hogy egyesek hogy lehúzzák a JavaScript-et, közben ha az ember (ki) tudja használni akkor milyen sok mindent ki lehet belőle hozni. (Erre légyszíves ne válaszoljatok nem akarok még egy flame-t indítani. köszönöm)

szerkesztve
üdv,
Balázs

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Azért nem fut le, mert...

Török Gábor · 2008. Aug. 1. (P), 14.58

A function fv () {} csak egyszerűsített jelölése a var fv = function() {};-nek. Ezért nem a várt eredményt hozza az alábbi kódod, ahol a ('vau'); már mint a függvénydeklarációtól független kifejezés értékelődik ki. Szintaktikailag helyes, csak nincs látható kimenete.


function kutya () {  
     alert(arguments[0]);  
}('vau');   //Fenti példával ellentétben nem fut le, de hibát nem dob.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

new

toxin · 2008. Aug. 1. (P), 15.26

new operátornál mi a helyzet, csak mert alábbi kód


var fooObjCollection = {				
				fooObj : (function(){
					var priVar = "privát";
					return new (function(){
						this.writePriv = function(){
							alert(priVar);
						};
					});
				})()
			};
			
			fooObjCollection.fooObj.writePriv();

ill.


var fooObjCollection = {				
				fooObj : (function(){
					var priVar = "privát";
					return new function(){
						this.writePriv = function(){
							alert(priVar);
						};
					};
				})()
			};
			
			fooObjCollection.fooObj.writePriv();

példában müxik, de valós kódban (jóval komplexebb) alábbi már nem objektumot, hanem konstruktort ad vissza, de lehet, hogy ezek szerint el... valahol :)

üdv Csaba

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Nézd csak:

Ustak · 2008. Aug. 1. (P), 22.23


var fooObjCollection = {                  
                 fooObj : (function(){  
                     var priVar = "privát";  
                     return new function insideFoo(){  
                         this.writePriv = function(){  
                             alert(priVar);                       
                        };
                     
                     };  
                 })(),
                foo2Obj:function(){
                     
                    }                   
                
             };  
               
             fooObjCollection.fooObj.writePriv();
             alert(typeof fooObjCollection.fooObj); //object
             alert(typeof fooObjCollection.foo2Obj); //function

Olvastam ilyenről, úgy tudom, ha egy függvényt a new operátor segítségével adjuk értékül egy tulajdonságnak (ahogy a fooObj-nél teszed) akkor előbb a new egy üres objektumot "teremt" majd lefut a függvény, és ha volt a függvényben this kulcsszó, akkor az a new által létrehozott üres objektumra fog mutatni (tehát itt a fooObj-re). Azért adtam neki az insideFoo nevet, hogy lássuk, ez csak egy normál függvény, melyet nem neveztél el. Lehetne a deklarálva kód elején is, persze akkor nem működne a closure és a privát változót nem érnéd el. A második esetben nincs new kulcsszó, tehát nem üres objektum kreálással indítunk, és ezért a végén a két typeof operátor is helyesen a valós értékeket adja vissza: Először objectet (a new kulcsszó miatt) másodszor function-t, mivel tényleg azt adtunk értékül.
Ha nagybetűvel kezdjük (new Function("a","b","{//kód}") akkor az olyasmi mint az eval, és gyakorlatilag string-ként adom meg az argumentumokat majd a függvény kódját magát. Sosem használtam ilyet :-). Az biztos, hogy a closure-this es dologba én magam sokszor belekavarodok, de nagyon érdekes dolognak tartom mindazáltal -a nyelv sava borsa :-).
Egyébként nem valami ilyesmire gondoltál:


var Osztaly = (function(){
       //privát osztályszintű tulajdonságok, metódusok
       var objektumszam=0;
       function errorCheck() {
         //mitudomén mit ellenőríz...:-)
        return true;
        };
        
        //visszatérünk a konstructor kóddal
        return function(argumentum1,argumentum2) {
        
        //privát tulajdonságok
        var priv1,priv2;
        
        //'privilegied' metódusok- elérik a privát tul.-okat
        this.getPriv1=function() {
                return priv1;
        };
        this.getPriv2=function() {
                return priv2;
        };
        this.setPriv1=function(argumentum1) {
                if (!errorCheck(argumentum1)) throw new Error('Nana! Valamit rosszul adtál meg!');
                priv1=argumentum1;
        };
        this.setPriv2=function(argumentum2) {
                priv2=argumentum2;
        };
        //konstruktor kód...
        objektumszam++;
        alert('objektumok száma: '+objektumszam);
        this.setPriv1(argumentum1);
        this.setPriv2(argumentum2);
	}
})();
//osztályszintű publikus metódus:
Osztaly.fuggveny=function(){
};
//publikus objektum szintű metódusok
Osztaly.prototype={
      kiir:function(){
        alert('ihol arg1: '+this.getPriv1()+' és itt az arg2:  '+this.getPriv2()+''); 
        }
}  
obj1=new Osztaly('cica','mica');
obj1.kiir();
obj2=new Osztaly('kutya','mutya');
obj2.kiir();

Érdekesnek érdekes, de még nem használtam ezt sem :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

newszizás

toxin · 2008. Aug. 2. (Szo), 09.19

az én kódomban ez volt a különbség


new (function(foo){ this.foo = foo || "foo" })


new function(a){  this.foo = foo || "foo" }

mindkettő objektumot ad vissza, valós kódomban a lenti valamiért nem :S ,

Egyébként nem valami ilyesmire gondoltál:

http://yuiblog.com/blog/2007/06/12/module-pattern , http://weblabor.hu/blog/20080113/module-pattern , ill. valahol a Pro JavaScript™ Design Patterns Copyright © 2008 by Ross Harmes and Dustin Diaz könyvben is benne, de hamár előbbiből idézel akkor tudom mondani konkrétan, érdekel is kihogy csinálta volna :)

http://www.liligo.fr/homepage/hotel.jsp indítva keresést, a találati oldalon pl. Budapestre keresve, találkozhatsz google térképpel, m$ http://voyages.fr.msn.com/msn/hotels/ 'természetesen' nem járult hozzá előbbi térkép motornak saját oldalán történő szerepeltetéséhez, ergo nekem most a kódba egy térkép motor váltót kell beépítenem ami képes: térkép motor nélkül, google motorral ill. m$ virutal earth térkép motorral is, moduláris jelleggel, meghajtódni, egy külső paramétertől függően: "nomap","msmap","gmap". Az elképzelésem az volt, hogy mindkét motor api-ját becsomagolom adapter pattern/wrapper osztályba, egységes interfészt létrehozva számukra, majd paramétertől függően, factory pattern segítségével, aktuális wrapper-t átadom egy proxy pattern-ek lévén a térkép a találati oldal elindításakor nem, csak adott feltételek (térkép tabra, térkép linkre kattintva jelenik meg, nomap esetén meg soha). Itt jön a valószinű hiba, liligo, nem általam írt js framework-je képes Absztakt osztályok szimulálására, amit én az interfészek konzisztenciájának ellenőrzésére használtam (elv. Interfaces alatt van a fenti könyvben), azaz a framework alábbi esetben


            var fooAbstract = Abstract({
                interfaceMethod1 : null,
                interfaceMethod2 : null,
                interfaceMethod3 : null
            });
            
            var fooObject = new(Class(fooAbstract,{
                interfaceMethod1 : function(){
                    
                },
               interfaceMethod3 : function(){
                    
                }
            }));

hibát dobna: interfaceMethod2 nem szerepel a lenti példányosításban, liligo framwork Class függvénye pedig konstruktort ad vissza, ezért volt a fenti new-al kapcsolatos kérdésem, ha nem használok zárójelt tehát


 var fooObject = new Class(fooAbstract,{
                method1 : function(){
                    
                },
                method3 : function(){
                    
                }
            });

konstruktor kapok vissza, fooObject-em function volt :S , nézzük akkor a térképváltó implementálását zanzásítva


(function(){
    
    //mindenféle segéd függvény globális névteret nem szenyezve
    var fooUtilMethods; 
    //aktuális térkép motor api-ját elrejető wrapper interfészelemi
    var mapInterface = Abstract({
            mapInitMethod		: null,					
            mapInterfaceMethod1 : null,
            mapInterfaceMethod2 : null,
            mapInterfaceMethod3 : null
            /* stb... */
    });
    
    // aktuális térkép motort meghajtó objektum példányosítása				
    var mapFactory = function(){
        //mindenféle segéd függvény a térképeknek
        var fooUtilMethods;
        
        // aktuális térkép motor hívásokat rejtő wrapper objektumot ad vissza 
        return {
            // a visszaadott wrapper-ben minden interészelemnek szerepelni kell
            // akkor is ha nincs térkép, hiszen a külső kód, proxy-n keresztül
            // hivogatni fogja 
            nomap : (function(){
                var map = {};
                for (var method in mapInterface.prototype)
                    map[method] = function(){};
                return map;
            })(),
            
            gmap : (function(){
                //mindféle google maphoz kötődö priv segédfüggvény
                var somePrivatMethodForGmap;
                // gmap wrapperének implemtánciója, interfészellenőrzéssel
                // metódusban már konkért gmap ill. hozzá kötödő metódusokat szerepelnek
                // zárójel nélkül konstruktor jött vissza
                return new (Class(mapInterface,{
                    mapInitMethod		: function(){/*.....*/},
                    mapInterfaceMethod1 : function(){/*.....*/},
                    mapInterfaceMethod2 : function(){/*.....*/},
                    mapInterfaceMethod3 : function(){/*.....*/},
                    /* stb... */
                }));							
            })(),
            
            msmap : (function(){
                //mindféle msmap-hoz kötődö priv segédfüggvény
                var somePrivatMethodForVEmap;
                // VEmap wrapperének implemtánciója, interfészellenőrzéssel
                // metódusban már konkért VEmap ill. hozzá kötödő metódusokat szerepelnek
                // zárójel nélkül konstruktor jött vissza
                return new (Class(mapInterface,{
                    mapInitMethod		: function(){/*.....*/},
                    mapInterfaceMethod1 : function(){/*.....*/},
                    mapInterfaceMethod2 : function(){/*.....*/},
                    mapInterfaceMethod3 : function(){/*.....*/},
                    /* stb... */
                }));							
            })()						
        }[config.mapType/*nomap,msmap,gmap*/]				
    };
    
    //mivel a térkép nem a találati oldallal inicializálódik
    //szükség van egy proxy-ra, a külső kód ezen keresztül kommunikál
    //a wrapper objektummal, ez az egyetlen globál névtérbe kikerülő objektum
    //ebben a kódblokkban, 
    //  liligo framework képes objektumot
    // singleton-t is visszadni, init-je egyből lefut, absztarkt-ból
    // itt is történik interészellenőrzés 
     map = Singleton(mapInterface,{
        
        init : function(){
            // megkapjuk az aktuális paramnak megfelelő wrapper objektumot
            this.map = mapFactory();
            // csak adott konstelláció esetén indul a csak térkép el, addig a proxy
            // visszadobja a külső hivásokat
            this.initialized = false;
        },
        
        initialize : function(){
            if(this.initialized) return;
            this.initialized = true;
            this.map.mapInitMethod();
        },
        
        mapInterfaceMethod1 : function(){
            if (!this.initialized) return;
            //mindeféle adott metódussal kapcsolatos dolog
            //ill. a wrapper objektum is meghívásra kerül
            this.map.mapInterfaceMethod1();
        },
        mapInterfaceMethod2 : function(){
            if (!this.initialized) return;						
            //mindeféle adott metódussal kapcsolatos dolog
            //ill. a wrapper objektum is meghívásra kerül
            this.map.mapInterfaceMethod2();
        },
        mapInterfaceMethod3 : function(){
            if (!this.initialized) return;
            //mindeféle adott metódussal kapcsolatos dolog
            //ill. a wrapper objektum is meghívásra kerül
            this.map.mapInterfaceMethod3();
        }					
     });
    
})();

// kívűről, legyen ms,google vagy nomap már csak ennyi a többi kolléga dolga
config = {
    mapType : "gmap" //gmap,msmap,nomap
}            
// amig nincs a térkép elindítva nemsokat csinál
map.mapInterfaceMethod1();
map.initialize();
// ittmár annál inkább :)
map.mapInterfaceMethod2();
map.mapInterfaceMethod3();
/* stb */

nagyon jobban nem fejteném ki hiszen a Pro JavaScript™ Design Patterns Copyright © 2008 könyvben minden fenti pattern ill. megoldás részletesen kifejtve szerepel

üdv Csaba

elnézést a liligo framework-től függő kódért, és kódszinező is lenyelt egykét betűt, remélem azért érthető maradt vmmennyire

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Nem akartam...

Ustak · 2008. Aug. 2. (Szo), 10.30

okoskodni, még ha úgy is tűnt :) Én is láttam már a könyvet és tényleg abból loptam a mintát, hátha segít. Láttam a zárójelek különbségét, és már erről is valahol olvastam, de nem emlékszem pontosan, valami olyasmi rémlik hogy az interpreternek segítség a kiértékelésben, de nem találtam róla semmit...ez pedig érdekel nagyon, ha valaki egy linket tudna róla adni, jó lenne. És persze mint említettem gyakorlatban ilyen bonyolult mintát nem használtam még, gratulálok hozzá, hisz ez végre gyakorlati példa, és bocsi az okoskodásért.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

mintát lopni :))) azért vannak

toxin · 2008. Aug. 2. (Szo), 11.33

erről a Practical JavaScript™, DOM Scripting, and Ajax Projects könyvbeli ábra ugrott be :) bár ez a js framework-ökre vonatkozott. Egyébként az általad behozott minta inkább Singleton-ok gyártásakor hasznos szvsz, ilyen mintából a privát stb. változók miatt kicsit nehézkes örökíteni, arra inkább szintén a ProPattern könyvbeli klasszikus örökítést megvalósító minta alkalmas, összekötöttem http://www.crockford.com/javascript/inheritance.html#sugar Crockford method-method-jával, így viszonylag olvasható tradicionális OOP öröklődést megvalósító kódhoz jutunk, hasznos ha ezt szeretjük, de nem akarunk ilyet megvalósító framework-öt vmiért becsatolni. http://htmlinfo.polyhistor.hu/js13guide/obj2.htm#1008404 szereplő osztályhierarchia így néz ki benne:


/*
 * konstruktor függvény prototype-jának bővítése
 * FooClass.method("fooMethod",function(){...}).method...
 */             
Function.prototype.method = function(name/*string*/,method/*function*/){
    this.prototype[name] = method;
    //lehetőve teszi a láncolást
    return this;
};

/*
 * klasszikus öröklődést megvalósítő util függvény
 * extend(someClass,parentClass);
 */
var extend = function(klass/*function*/, parentClass/*function*/){
    // a parentClass konstruktorára nincs szükség, kiütjük   
    var F = function(){};			
    F.prototype = parentClass.prototype;
    // prototype láncolás létrehozása
    klass.prototype = new F;
    // konstruktor mutató átállítása
    klass.prototype.constructor = klass;
    // ősosztály mutató hozzáadása				
    klass.parentClass = parentClass.prototype;				           
};

/*--*/

var Employee = function(name,dept){
    this.name = name;
    this.dept = dept;
};
Employee.method(
    "getName",function(){
        return this.name;
    }
).method(
    "setName",function(pName/*string*/){
        this.name = pName;
    }
).method(
    "getDept",function(){
        return this.dept;
    }
);

/*--*/

var Manager = function(name,dept,reports){
    Manager.parentClass.constructor.call(this,name,dept);
    this.reports = reports;		
};
extend(Manager,Employee);
Manager.method(
    "getReports",function(){
        return this.reports;					
    }
).method(
    "setReports",function(reports/*array*/){
        this.reports = reports;					
    }
);

/*--*/

var WorkerBee = function(name,dept,projects){
    WorkerBee.parentClass.constructor.call(this,name,dept);
    this.projects = projects;		
};
extend(WorkerBee,Employee);
WorkerBee.method(
    "getProjects",function(){
        return this.projects;					
    }
).method(
    "setProjects",function(projects/*array*/){
        this.projects = projects;					
    }
);

/*--*/
            
var SalesPerson = function(name,dept,projects,quote){
    SalesPerson.parentClass.constructor.call(this,name,dept,projects);
    this.quote = quote;		
};
extend(SalesPerson,WorkerBee);
SalesPerson.method(
    "getQuote",function(){
        return this.quote;					
    }
).method(
    "setQuote",function(quote/*array*/){
        this.quote = quote;
    }
);

/*--*/

var Engineer = function(name,dept,projects,machine){
    Engineer.parentClass.constructor.call(this,name,dept,projects);
    this.machine = machine;		
};
extend(Engineer,WorkerBee);
Engineer.method(
    "getMachine",function(){
        return this.machine;					
    }
).method(
    "setMachine",function(machine/*string*/){
        this.machine = machine;
    }
);

/*--*/
var jim 	= new Employee("jim","Employee"),
    sally 	= new Manager("Sally","Manager",[]),
    mark 	= new WorkerBee("Mark","WorkerBee",[]),
    fred 	= new SalesPerson("Fred","SalesPerson",[],100),
    jane 	= new Engineer("Jane","Engineer",[],"");
    
console.log(jim.getName());
console.log(jim.getDept());
console.log("---");			

console.log(sally.getName());
console.log(sally.getDept());
sally.setReports(["a","b","c"]);
console.log(sally.getReports());									
console.log("---");

console.log(mark.getName());
console.log(mark.getDept());
mark.setProjects(["d","e","f"]);
console.log(mark.getProjects());
console.log("---");

console.log(fred.getName());
console.log(fred.getDept());
fred.setProjects(["g","h","i"]);
console.log(fred.getProjects());
console.log(fred.getQuote());
console.log("---");

console.log(jane.getName());
console.log(jane.getDept());
jane.setProjects(["j","k","l"]);
jane.setMachine("árvíztűrő tükörfúrógép");
console.log(jane.getProjects());
console.log(jane.getMachine());

üdv Csaba

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés