[js]id nog onbereikbaar

[Verwijderd]

Ik heb een html-pagina index.html met wat javascript mbv jQuery. In het javascript wordt een class beschreven die een popup op de pagina creeert, daarmee wordt het object settingsPopup gemaakt. De inhoud van de popup staat in een apart bestand settingsPopup.html, deze wordt via load() in de div 'settingsPopup' in de index.html geladen. Ergens op index.html wordt op een link geklikt waardoor DisplayPopup() gaat werken en een popup verschijnt. In settingsPopup.html staat de div met het id "popupClose". In de javascriptcode wordt een click event aangemaakt om de popup weer te sluiten. Dit werkt alleen niet. Ik denk dat dat komt doordat op de moment aan het aanmaken van het click-event, het bestand settingsPopup.html nog helemaal niet is ingeladen en daarom is ook de div met het id 'popupClose' beschikbaar. Iemand een idee hoe ik dit kan oplossen?

index.html

HTML:

...
<div id="settingsPopup"></div>
...

settingsPopup.html

HTML:

<a id="popupClose">x</a>  
allemaal tekst voor in de popup

JavaScript:

function PopupPanel(popupName, button) {
    var self = this;
    
    //Members
    this.name = popupName;
    this.button = button;
    this.status = 0; //0 = disabled, 1 = enabled
     
    //Methods
    function DisplayPopup() {
        if(self.status==0){
            $("#backgroundPopup").css({
                "opacity": "0.7"
            }).fadeIn("slow");
            var filename = self.name.substring(1) + ".html";
            $(self.name).load(filename);
            $(self.name).fadeIn("slow");  
            self.status = 1;
        }
    };
    function DisablePopup() {
        if(self.status == 1) {
            $(self.name).fadeOut("slow");
            $("#backgroundPopup").fadeOut("slow");
            self.status = 0;
         }
    }       
    $(this.button).click(function() {
        DisplayPopup();
    });
        
    $("#popupClose").click(function() {
        DisablePopup();
    });

}

settingsPopup = new PopupPanel("#settingsPopup", "#settings");

[NMe]

Waar hoort mijn topic?

PRG>>WEB

[storeman]

Ik weet niet precies hoe jQuery werkt. Maar met normaal javascript kun je dmv window.opener weer terug naar het scherm dat de popup heeft geopend. Wellicht kun je het object ook doorgeven naar de popup en de methode aanroepen. Het object kun je misschien doorgeven door:

$(self.name).openObject = self;

// In de popup
self.openObject.DisablePopup();


Ik weet het fijne er niet van mbt tot jQuery, maar misschien helpt het je op weg .

[MueR]

Je zal inderdaad bij het aanmaken van de popup de close events moeten plaatsen. De browser kan niet veel met onbestaande elementen, waarschijnlijk gooit ie er zelfs een error op (dit zou je moeten kunnen zien in Firebug). Alternatief is het direct aanmaken van de popup met een style display:none;, en die togglen tijdens de weergave.

[Verwijderd]

storeman schreef op zaterdag 07 februari 2009 @ 21:53:
Ik weet niet precies hoe jQuery werkt. Maar met normaal javascript kun je dmv window.opener weer terug naar het scherm dat de popup heeft geopend. Wellicht kun je het object ook doorgeven naar de popup en de methode aanroepen. Het object kun je misschien doorgeven door:

$(self.name).openObject = self;

// In de popup
self.openObject.DisablePopup();


Ik weet het fijne er niet van mbt tot jQuery, maar misschien helpt het je op weg .

Dit is op zich niet nodig, omdat de popup zich gewoon op dezelfde pagina bevindt. Het is namelijk gewoon een divje dat bovenop de pagina verschijnt en een ander divje dat de rest van de pagina doet vervagen. Dat object is wel toegankelijk, het probleem is meer dat de div met het id 'popupClose' nog niet op de pagina is ingeladen op het moment dat de click-callback wordt aangemaakt.

MueR schreef op zaterdag 07 februari 2009 @ 22:20:
Je zal inderdaad bij het aanmaken van de popup de close events moeten plaatsen. De browser kan niet veel met onbestaande elementen, waarschijnlijk gooit ie er zelfs een error op (dit zou je moeten kunnen zien in Firebug). Alternatief is het direct aanmaken van de popup met een style display:none;, en die togglen tijdens de weergave.

Ja, maar als je de bovenstaande code uitvoert, wordt de callback voor de popup eerst aangemaakt, daarna pas die voor de click-event. Ik heb dus zo'n idee dat 'ie dat element al moet kunnen zien. Ik zou 'display: none' kunnen toepassen. Maar het gaat in totaal om best veel popups en die wil ik niet allemaal al hoeven laden bij het opstarten van de pagina. 't gaat veel sneller als ik die op een ajax-achtige manier pas aanroep wanneer nodig.

@ Moderator: excuses, niet goed opgelet met plaatsen.

[MueR]

Je wil toch een close event aanroepen op een element wat je pas aanmaakt wanneer dat nodig is? Met andere woorden wanneer de parent zichtbaar is? Wat is er dan op tegen om bij het maken van die popup pas je close button te maken en bijbehorend event? Zonder element kan ie geen event maken op dat ding.

[Verwijderd]

MueR schreef op zondag 08 februari 2009 @ 00:24:
Je wil toch een close event aanroepen op een element wat je pas aanmaakt wanneer dat nodig is? Met andere woorden wanneer de parent zichtbaar is? Wat is er dan op tegen om bij het maken van die popup pas je close button te maken en bijbehorend event? Zonder element kan ie geen event maken op dat ding.

In principe wel, maar ik weet dan niet zo goed waar ik het moet neerzetten zonder een puinhoop van de code te maken. Suggestie?

[MueR]

In je DisplayPopup functie lijkt me

[Verwijderd]

MueR schreef op zondag 08 februari 2009 @ 19:11:
In je DisplayPopup functie lijkt me

Dat werkt niet. Denk omdat hij dan nog steeds die .click event aanmaakt voordat daadwerkelijk die pagina is ingeladen toch?

[MueR]

Je roept dergelijke functies toch pas aan wanneer de dom klaar is met laden (ondomready)? Dan is al je HTML in ieder geval klaar en moet dit gewoon allemaal werken.

[Bosmonster]

JavaScript:

$(self.name).load(filename); 

vervangen door:

JavaScript:

$(self.name).load(filename,{},function(){
   $(this).find('#popupClose').click(function(){
      // sluit je popup
   });
}); 

?

Maar beter kun je imho de sluitknop zelf toevoegen, ipv deze door je load extern in te laden. Het is per slot van rekening een interface element, geen content.

[ Voor 26% gewijzigd door Bosmonster op 10-02-2009 11:06 ]