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.
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