Search code examples
htmlprototypejs

prototype function not being invoked


Is there any reason why the below won't work, it seems to work on every scenario except the one below:

My html/asp.net

<div class="submitContainerConfirm" id="submit_Div">       
    <asp:PlaceHolder runat="server" id="phContinue">
        <asp:ImageButton CausesValidation="false" CssClass="ShowPleaseWait button" runat="server" ID="ibtnContinue" OnClick="ibtnContinue_OnClick" />
    </asp:PlaceHolder>
</div>

My prototype

function pageLoad() {

$$(".ShowPleaseWait").each(function (el) {
    el.observe("click", function (event) {
        if (Page_IsValid) {
            el.hide();
            el.insert({ after: '<img src="/content/images/processing.gif" /> Please Wait...' });
            alert('Is Valid');
        }
        alert('Is not Valid');
    });
});

}

Attempt two:

Event.observe(window, 'load', function () {

Event.observe("click", function (event) {
    if (Page_IsValid) {
        event.hide();
        event.insert({ after: '<img src="/content/images/processing.gif" /> Please Wait...' });
        alert('Is Valid');
    }
    alert('Is not Valid');
});

Event.observe("click", function (event) {
    if (Page_IsValid) {
        event.hide();
        event.insert({ after: '<img src="/content/images/processing.gif" /> Processing...' });
        alert('Is Valid');
    }
    alert('Is not Valid');
});

});

// This doesn't work either. No jquery please.

Example of asp rendered in html + prototypejs bizarrely not working.


Solution

  • In your second attempt, you are not specifying any element for the observe event to listen on, how will it know which element was clicked?

    Try this:

    Event.observe(window, 'load', function() {
        $$('.ShowPleaseWait').each(function(el) {
            el.observe('click', function(ev) {
                if (Page_IsValid) {
                    el.hide();
                    el.insert({ 
                        after: '<img src="/content/images/processing.gif" /> Please Wait...'
                    });
    
                    alert('Is Valid');
                }
    
                alert('Is not Valid');
            });
        }); 
    });
    

    UPDATE

    see screenshot of generated page by JSFiddle, this is the direct output of this fiddle