Re: [Proto-Scripty] observing click event not invoking on click

[Walter Lee Davis]

On Jun 22, 2012, at 7:05 AM, AnichoCode wrote:

> Hello All,
>
> First time posting on prototypes mailing list please forgive me if I do not provide the right type of information.
>
> At current I am struggling to get the code below running, it works in jsfiddler using <input and works in other locations of my development build where we use <asp:imagebutton.
>
> However on this one page it doesn't seem to execute/fire. There is nothing I can see in asp.net c# that will stop the below from running. However there is some javascript that could quite possibly affect it but because of my lack of knowledge in prototype I am struggling to find the answer.
>
> Thanks for your help in advanced.
>
> Kind Regards,
>
> Anis Ahmed Chohan
>
> My asp/html:
> <div class="submitContainerConfirm" id="submit_Div">
>
> <asp:PlaceHolder runat="server" id="phContinue">
>
> <asp:ImageButton CssClass="ShowPleaseWait button" runat="server" ID="ibtnContinue" OnClientClick="return false;" />
>
> </asp:PlaceHolder>
>
> </div>
>

Can you show what this ASP will render into? (View Source and create a static HTML version that fails, and post that somewhere.) It's very hard for those of us who don't use ASP to translate this into the HTML DOM elements that Prototype (and JavaScript) care about.

My eye is drawn to that return false bit above, since I think that's going to stop any event from bubbling up, but without seeing how this renders, it's impossible to say.

Walter

>
> I have the below in an external .js file this is what I am trying to run:
>
>
> 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');
>
>
> });
>
>
> });
>
>
> }
>
>
> The following is javascript put on the page by other developers in the past:
>
> <
>
>
>
> script type="text/javascript">
>
> <!--
>
>
>
> var btnConfirm = $('<%= ibtnContinue.ClientID %>');
>
>
>
> var defaultImage = $('<%= ConfirmImage.ClientID %>');
>
>
>
> var greyImage = $('<%= ConfirmImageGrey.ClientID %>');
>
> btnConfirm.src = defaultImage.src;
>
>
>
> // When the button needs to be enabled / disabled
>
> document.observe(
>
>
> "rate:changed", function(event) {
>
>
>
> if (!btnConfirm)
>
>
>
> return;
>
> setTimeout(
>
>
> function() {
>
> btnConfirm.disabled =
>
>
> false;
>
> btnConfirm.src = defaultImage.src;
>
> btnConfirm.setStyle({ cursor:
>
>
> 'pointer' });
>
> }, 800);
>
> });
>
> document.observe(
>
>
> "rate:beforeChange", function (event) {
>
>
>
> if (!btnConfirm)
>
>
>
> return;
>
>
>
> //TYM - don't allow the user to click on the grey image
>
>
>
> if (greyImage)
>
> greyImage.disabled =
>
>
> true;
>
> btnConfirm.disabled =
>
>
> true;
>
> btnConfirm.src = greyImage.src;
>
> btnConfirm.setStyle({ cursor:
>
>
> 'progress' });
>
> });
>
> //-->
>
> </
>
>
>
> script>
>
>
>
>
>
> --
> You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
> To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/aPsACpAYAy4J.
> To post to this group, send email to prototype-s...@googlegroups.com.
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

[AnichoCode]

Hello Walter,

Thank you for getting back to me so quickly.

<div class="submitContainerConfirm" id="submit_Div">      

        <input type="image" name="centrecolumn_0$dealingcentrecolumn_0$ibtnContinue" id="centrecolumn_0_dealingcentrecolumn_0_ibtnContinue" class="ShowPleaseWait button" src="/-/media/Images/UnitedKingdom/Mint/buttons/bt-confirm-pay.ashx?20110125T1124290821" onclick="StopTimer();" style="border-width:0px;" />
    </div>

 

That is the above asp rendered.

I have removed teh OnClientClick, this was uneeded legacy attribute removal made no difference though.

 

Kind Regards,

 

Anis Ahmed Chohan

> To post to this group, send email to prototype-scriptaculous@googlegroups.com.
> To unsubscribe from this group, send email to prototype-scriptaculous+unsub...@googlegroups.com.

[Walter Lee Davis]

What does StopTimer() return? Any way you can make a cut-down model of the page in jsbin or another live-code site? It would be interesting to follow the path of the code in Firebug or Web Inspector to see where the hang-up is happening.

Walter

> > To post to this group, send email to prototype-s...@googlegroups.com.
> > To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.

> > For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
>
>

> --
> You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

> To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/u0KuI65AViQJ.
> To post to this group, send email to prototype-s...@googlegroups.com.
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.

[AnichoCode]

http://jsfiddle.net/twh6Z/5/ I put everything in but it gave me the same result as this condensed version. 

 

http://jsfiddle.net/twh6Z/7/ added javascript for StopTimer(); function.

Anis

> > To post to this group, send email to prototype-scriptaculous@googlegroups.com.
> > To unsubscribe from this group, send email to prototype-scriptaculous+unsub...@googlegroups.com.

> > For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
>
>
> --
> You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
> To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/u0KuI65AViQJ.

> To post to this group, send email to prototype-scriptaculous@googlegroups.com.
> To unsubscribe from this group, send email to prototype-scriptaculous+unsub...@googlegroups.com.

[Walter Lee Davis]

Well, you had a consistent error in the script, owing (possibly) to the way that jsfiddle renders the script. The function StopTimer() wasn't declared in the global scope, so your inline handler couldn't see it or use it. I fixed that by moving it into a script block at the top of your HTML, but that didn't seem to change anything else about the page. I'm not clear what it's supposed to do in any case.

One thing you could try is to remove the onclick inline handler, and change it to an unobtrusive observer:

$('centrecolumn_0_dealingcentrecolumn_0_ibtnContinue').observe('click', function(evt){
//do something here
});

Observers can be "stacked", so as long as this handler doesn't clobber the event with stop() or return false, you should be able to have more than one event handler respond to the one event should you need to.

Walter

> > > To post to this group, send email to prototype-s...@googlegroups.com.
> > > To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.

> > > For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
> >
> >
> > --
> > You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
> > To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/u0KuI65AViQJ.

> > To post to this group, send email to prototype-s...@googlegroups.com.
> > To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.

> > For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
>
>
> --
> You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

> To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/1AXUsXbYHZ8J.
> To post to this group, send email to prototype-s...@googlegroups.com.
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.

[AnichoCode]

Hello Walter,

 

I noticed that consistent error in the script too, the script should when the button is clicked hide the button and in the same place display a processing image a little gif.

The same script works on pages but not in jsfiddle or that particular page for some odd reason.

With your code from previous post for consistency with other functions can I do the below or will that not work?

 

$('.ShowPleaseWait').observe('click', function(evt){
//do something here
});

[Walter Lee Davis]

On Jun 22, 2012, at 11:14 AM, AnichoCode wrote:

> Hello Walter,
>
> I noticed that consistent error in the script too, the script should when the button is clicked hide the button and in the same place display a processing image a little gif.
>
> The same script works on pages but not in jsfiddle or that particular page for some odd reason.
>
> With your code from previous post for consistency with other functions can I do the below or will that not work?
>
> $('.ShowPleaseWait').observe('click', function(evt){
> //do something here
> });
>

That's a jQuery selector, it won't do what you expect in Prototype. Here's the equivalent:

$$('.ShowPleaseWait').invoke('observe', 'click', function(evt){
//do something here
});

View source on this page: http://scripty.walterdavisstudio.com/button.html

The click handler on the button is using the ID style selector, and the handler on the reset is using the class-style selector to clean up the span. So you can see both styles at work here.

Walter

> On Friday, June 22, 2012 3:39:31 PM UTC+1, Walter Lee Davis wrote:
> Well, you had a consistent error in the script, owing (possibly) to the way that jsfiddle renders the script. The function StopTimer() wasn't declared in the global scope, so your inline handler couldn't see it or use it. I fixed that by moving it into a script block at the top of your HTML, but that didn't seem to change anything else about the page. I'm not clear what it's supposed to do in any case.
>
> One thing you could try is to remove the onclick inline handler, and change it to an unobtrusive observer:
>
> $('centrecolumn_0_dealingcentrecolumn_0_ibtnContinue').observe('click', function(evt){
> //do something here
> });
>
> Observers can be "stacked", so as long as this handler doesn't clobber the event with stop() or return false, you should be able to have more than one event handler respond to the one event should you need to.
>
> Walter
>

> --
> You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

> To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/cTtUIKhgkCMJ.

[Miguel Beltran R.]

Sometimes when firebug don't show me an error I use the "error console" and saw things like ") not close" or something like that

are you tried it?

2012/6/22 AnichoCode <anis.ahm...@googlemail.com>

--

You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/cTtUIKhgkCMJ.

To post to this group, send email to prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

--
________________________________________
Lo bueno de vivir un dia mas
es saber que nos queda un dia menos de vida

[Anis Ahmed Chohan]

Nope haven't tried console log. Will give it a go.

@Walter same results using invoke. does prototype have a submit alternative to click event? 

Sent from Samsung Mobile

[Walter Lee Davis]

Sure. You can use the form itself for that:

$('id_of_form').observe('submit', function(evt){
//your code here
});

I'd seriously recommend a quick read of the entire API Docs site: http://api.prototypejs.org/ -- it shouldn't take more than an hour -- which will acquaint you with the basics and show you examples of each of the methods.

Did you look at my example? That has a very succinct approach to busying out a button, which you might want to try.

Walter

[AnichoCode]

@Walter Lee Davis,

Thanks for your demo I see it works but I can't get it working with the class selector. Class selector is a requirement since we cannot use ID or ClientID(id selector provided for javascript in asp.net) because of our current setup. 

I have gone back to my original and am trying to debug why this doesn't work: http://jsfiddle.net/VUPKx/3/ 

@YourPadre

Error console did not show me any errors I was hoping error log would show a syntax issue the very least.

Thanks for your recommendations.

[AnichoCode]

@Walter Lee Davis,

Got it working  http://jsfiddle.net/VUPKx/5/ still fails to work on my aspx page. So will get this over to my aspx page experts.

@YourPadre

Error Console is much better then firebug for general syntax errors, thanks for pointing me in the right direction. 

[Walter Lee Davis]

I find that it helps to try both when you have a tricky problem. Sometimes Error Console will skip right over the actual problem and show something else, while Firebug sees the real blocker problem. And sometimes it's vice-versa.

Walter

[AnichoCode]

Yeah Walter your correct I wouldn't dismiss either of the tools use both for best results!

Turns out .OnClientClick gets set from code behind which is blocking the click event. Also Page Caching was stopping the click function from loading in the first place.

Thanks for all your help Walter much appreciated. I will be sure I stick around in the community now! I quite like it.