dynamische liste in einem mootools css-popup

[Animal21]

hallo leute,
folgendes möchte ich realisieren:
in der db ist eine liste hinterlegt, eines der items wird auf der hp angezeigt (also link), wenn ich auf des item klicke, geht ein css-popup auf, in dieses soll nun die liste aus der db geladen werden. Klicke ich nun auf eins der items in der css-popup-liste, soll das gewählte mit dem item auf der hp ausgetauscht werden.

Das css-popup klappt schon wunderbar, wenn ich auf das item klicke. nun überlege ich aber noch, wie ich die liste aus de rdb in das popup bekomme, ich dachte an php, welches alles vorher läd un dann nur noch übergibt, oder vll an ein ajax-request...

hab auch noch keine richtige idee, wie ich das item auf der hp mit dem in der liste dann tausche (also es soll einfach nur das gewählte item dann eingesetzt werden...)

wie würedst ihr das so machen?

mfg
ani

 

[mermshaus]

Na ja, die entsprechenden HTML-Elemente mit den entsprechenden neuen Daten füllen. Der geschilderte Ansatz klingt ganz gut, denke ich. Probier es vielleicht erstmal so und melde dich bei konkreten Fragen (bitte mit Beispielcode) wieder.

 

[Animal21]

ok folgendes:
wie bekomme ich meine daten aus der db in das css-popup?:
am ende steht auf der seite ein a-tag, welcher in js folgendes auslöst:

    $('changeOwnerLink').addEvent('click', function(e){
        e.stop();
        var pageList = new Popup({
            'popupText': ''
        });
        pageList.addTitle('Page-List');
        pageList.addContent('Hallo Welt!'); //<--- hier muss nun die liste aus der db rein
        pageList.addButton('Cancle');
        pageList.addOverlay();
        pageList.display();
    });

 

[mermshaus]

Wie hast du die Liste aus der DB denn vorliegen? Beziehungsweise womit arbeitest du serverseitig? Das passende Austauschformat ist vermutlich JSON. In PHP siehe etwa json_encode.

 

[Animal21]

ich benutz mootools, da geht das etwas leichter xD
hab es hinbekommen, ich hab eine php-datei erstellt, welche mir alle daten holt, die ich per get möchte (also sogar wiederverwendbar) und die daten hole ich per ajax-request auf das popup, mein problem ist gerade ein warscheinlich recht banales, siehe bild im anhang:
die liste wird nicht als liste angezeigt, sondern als sonderzeichen
ImageShack® - Online Photo and Video Hosting

folgend die popup-klasse:

    var Popup = new Class({    
        Implements: [Options, Events],
        options: {
            'className': 'popup',
            'popupText': 'Hier fehlt Text! Bitte ändern!',
            'container': document.body
        },
        popup: null,
        overlay: null,
    
        // Initialisierung
        initialize: function(options){
            this.setOptions(options);
            this.popup = new Element('div', {
                'class': this.options.className,
                'text': this.options.popupText
            });
        },
    
        // Popup anzeigen
        display: function(){
            this.popup.inject(this.options.container);
        },
        // Eine zusätzliche Titelleiste
        addTitle: function(text){
            var titleBar = new Element('div', {
                'class': 'popupTitle',
                'text': text
            });
            titleBar.inject(this.popup, 'top');
        },
        
        addContent: function(text){
            var content = new Element('div', {
                'class': 'popupContent',
                'text': text
            });
            content.inject(this.popup);
        },
    
        // Und ein OK-Button
        addButton: function(text){
            var button = new Element('div', {
                'class': 'popupButton',
                'text': text
            });
            Popup.implement(Events);
            button.addEvent('click', function(){
                this.popup.destroy();
                if(this.overlay != null){
                    this.overlay.set('tween', {
                        onComplete: function(el){
                            el.destroy();
                        }
                    });
                    this.overlay.tween('opacity', 0);
                }                
            }.bind(this));
            button.inject(this.popup, 'bottom');
        },

        // Das Overlay
        addOverlay: function(){
            this.overlay = new Element('div', {
                'class': 'popupOverlay',
                'styles': {
                    'opacity': 0,
                    'height': this.options.container.getSize().y
                }
            });
            this.overlay.inject(this.options.container, 'top');
            this.overlay.tween('opacity', 0.5);
        }
    });

 

[Animal21]

OK, ich hab das problem gelöst...
mootools (vll auch js selbst, weis nich) parset html tag anscheind, wenn man sie direkt übergibt, also hab ich alles per mootools gebaut...

hab nur gerade ein problem damit, die daten beim click auf ein li zu übertragen...

        addContent: function(text){
            arr = text.split("|");
            var list = new Element("ul#pageListList");
            for(var i=0;i<arr.length;i++){
                var pItem = new Element("li");
                var pLink = new Element("a", {
                    href: '../php/getdata.php?data='+arr[i],
                    html: arr[i],
                    events: {
                        click:function(e){
                            e.stop();
                            $('#changeOwnerLink').set('text', [COLOR=red]???[/COLOR]);    
                        }
                    }
                });
                pItem.adopt(pLink);
                list.adopt(pItem, 'bottom');
            }         
            list.inject(this.popup);
        }

bei dem set-befehl, sollte jetzt natürlich das geclickte item rein, aber aus welcher variable kann ich das auslesen? bzw wenn ich testweise iwas anderes reinschreib, funktionuet der 'set'-befehl nicht... (is meine syntax falsch?)

mfg
ani