[JS/Prototype] scope gerelateerde vraag

[Verwijderd]

Hi,

Beetje lastig verhaal ben ik bang, daarom probeer ik het maar even uit te leggen. Ik heb een formulier waarbij ik real-time validatie doe door middel van Form.Element.Observer die bij wijzigingen een Ajax.Request doet. De feedback van de Ajax kan ofwel true zijn (het veld is akkoord) ofwel string zijn (bij foutief), waarbij de string de te tonen error message bevat. Deze error message geef ik vervolgens weer met Prototip (een tooltip voor Prototype)

Wat is nu het probleem?

Ik gebruik drop-downs die velden toevoegen/verwijderen van het formulier (bijvoorbeeld de vraag bank of giro, die ofwel een veld voor bank ofwel een veld voor giro toont (hier heb ik zo m'n redenen voor)). Het probleem zit hem nu in het feit dat als de user bijvoorbeeld eerst foutief een banknummer invoert, vervolgens een prototip te zien krijgt met een foutmelding en daarna kiest voor Giro, het veld wel netjes verdwijnt maar de Prototip niet! Ik heb al vanuit de functie geprobeerd het object met de prototip te benaderen, maar ben zelf meer een PHP'er dus kom er niet echt uit.

Iemand die ff onderstaande code kan bekijken?

JavaScript:

// functie die de drop-down van de keuze voor banktype in de gaten houdt
function toggleBankForm(fieldName, toggleElement1, toggleElement2, toggleDiv1, toggleDiv2, errorImage1, errorImage2) {
    $(toggleDiv2).hide();
    new Form.Element.EventObserver(fieldName, function(element, value) {
        if(value == 1) {
            $(toggleDiv2).hide();
            $(toggleDiv1).show();
        } else if(value == 2) {
            $(toggleDiv1).hide();
            $(toggleDiv2).show();
        }
    })
}

// Functie die het invoer veld voor banknummer in de gaten houdt en de ajax validatie start bij een wijziging

function checkfield(fieldName, data, action, update, use_tip) {
    var tip;
    var params;
    
    if(use_tip === undefined) {
        use_tip=false;
    } else {
        use_tip=true;
    }
    
    if(data === undefined) {
        data = fieldName;
    }

    new Form.Element.EventObserver(fieldName, function(element, value) { 
        
        new Ajax.Request(action, {asynchronous:true, evalScripts:true, onComplete:function(request, json) {
            if(request.responseText == '1' || request.responseText == '2') {
                // Dit is als het veld akkoord is, code niet boeiend
            } else {
                if(use_tip) {
                    tip = new Tip(update, request.responseText, { 
                                                effect: 'appear',
                                                showOn: 'click', 
                                                offset: {x:40, y:-8}, 
                                                className: 'error', 
                                                hideOn: {event: 'custom'}, 
                                                hideAfter: 0,
                                                hook: {target: 'middleRight', tip: 'middleLeft'}
                                                });
                    $(update).simulate('click');
                }
            }
            return tip;
        
        }, parameters:serialize_fields(data)})})

}

// hier de 'calls' naar de functies

var check_bank_account_number = new checkfield('OrderBankAccountNumber', 'OrderBankAccountNumber','/orders/validate_field','bank_account_number',true);
var check_giro_account_number = new checkfield('OrderGiroAccountNumber', 'OrderGiroAccountNumber','/orders/validate_field','giro_account_number',true);
var toggle_account_number = new toggleBankForm('OrderAccountType','OrderBankAccountNumber','OrderGiroAccountNumber','DivBankAccountNumber','DivGiroAccountNumber','bank_account_number','giro_account_number');

Wat hier nog ontbreekt zijn eerder pogingen om de variabelen check_bank_account_number en check_giro_account_number (die volgens mij beiden een instantie van het object Tip bevatten) mee te geven aan de toggleBankForm en vanuit daar proberen te 'hiden'. Echter allemaal zonder resultaat. Iemand een idee?

[crisp]

Wellicht kan je voor een select beter voor onchange kiezen dan voor onclick

[Verwijderd]

@Crisp, ik begrijp je niet zo... naar welke 'onclick' refereer je?

[crisp]

nevermind, het laten zien werkt wel natuurlijk, maar wat is dit precies:

JavaScript:

hideOn: {event: 'custom'}

?

[Verwijderd]

Dat was een custom event die ik geprobeerd heb te definieren, als het goed is zou er nu een 'listener' op de Prototip moeten zitten die in het geval dat het 'custom' event getriggered wordt, de prototip zou moeten laten verdwijnen... met nadruk op moeten laten, want het is me nog niet gelukt dit event te 'triggeren'.

Ik zou namelijk verwachten dat ik vanuit een andere functie nu iets kan doen als:

code:

$(ID_van_prototip_element).fire('custom');

echter... ik weet niet precies op welk element ik nou die .fire() moet doen. Prototip genereerd namelijk een eigen DIV met 'onbekend' ID.

Kortom... mijn kennis van JS is blijkbaar niet toereikend, vandaar mijn verzoek om hulp/tips/pointers

[crisp]

Je kan natuurlijk een object method maken die de referentie naar je tip-object teruggeeft:

JavaScript:

function checkfield(...)
{
    var tip;
    // ...
    this.getTip = function()
    {
        return tip;
    }
}

en ik verwacht dat zoiets dan wel mogelijk zou moeten zijn:

JavaScript:

check_bank_account_number.getTip().hide();

[ Voor 22% gewijzigd door crisp op 17-06-2009 11:14 ]

[Verwijderd]

topper!! You did it

inderdaad de functie getTip toegevoegd, die geeftblijkbaar wel het goede object terug waar ik inderdaad de method hide() kan gebruiken. Begin steeds meer lol te krijgen in Javascript!