We all use and like that to handle click event for button we can just click it and write a handler with server code in C# or vb.net.
But if we want to handle client event, javascript comes for help. And I wonder, how can we add designer ability to generate client handlers with javascript or some popular library like jquery.
So how I see it in perfect world, I'm selecting the button in designer, go to it's properties, then choose events like hover, enter or click and have a handler function in which I can write my code to handle it.
So the question is - how can it be done, to make this ability to autogenerate this empty function and make sure it will handle the exact event I need? I know how to handle this events in javascript, but this way seems more intuitive to me.
Microsoft's Glimmer writes jQuery. They also have a nice demo video on their frontpage. Glimmer is free, by the way.
Related
I have been asked to build code where I can intercept the click of a button, stop the function that fires on the click, run an analytics script, then fire the original click function. I can do this with JS/jQuery on a standard button when using onClick, but this button is built in Angular and using an ng-click instead, so I am a little out of my element.
The button I am trying to intercept is this:
<input id="btn-hero-form-try" class="btn btn-solid" data-ng-disabled="trialForm.buttonDisabled" data-ng-click="trialForm.submitTrialForm('personal')" type="submit" value="Download Free Trial">
A few things make this more difficult: I have no access to the HTML code on the CMS, so I can't add any additional parameters that way, and have been asked not to inject any via script from the page.
I have been playing with the ng-click-interceptor, but have not gotten it to work yet.
Any help, or pointing in the right direction would be greatly appreciated.
You are free to upgrade common directive ngClick - just create your own!
In common words - they share same event but called separately.
It will not affect default, it will be called later so you need to mess with priority, and you will be needed to append it to existing application.
If you are aware of changing existing code - then you need jQuery, selector like [ngClick] to find any clickable item and run asynchronous .on(click) events depending on target content or value of ngClick attribute.
I don't think to sync analytics with callbacks of actual clicks is good idea, due to possible side effects on any step.
I want to create a "confirm plugin" that will fire first and ask the user if "they are sure". Just to be clear, I will be using a custom made confirm box, not a the default Window confirm() Method.
If yes then it will fire all the other events that have been bound to it. If no then it will do nothing.
A use case would be a delete button that has a separate click event bound to it, which when pressed will delete an element.
If I attach my plugin to the button then it will bind another click event and by using the events info inside $._data I can send my even to the top of the list (making it fire first), I then stop propagation (this stops the other binding firing which deletes the element). If the user clicks ok on my confirm box, I trigger a click again this time just bypass the stop stuff and it will then fire the original events
I am using a slightly modified version of https://github.com/private-face/jquery.bind-first
The only way it can access this info on an element is by using:
$._data($(this)[0]).events
I want to know how "future proof" this is as I know this changed already since 1.7. Are there any plans to officially support a similar thing.
If all else fails, I know I can just make sure that the plugin and the bindings happen first in the code, but this is not really the most flexible solution.
Using $._data is a smelly solution, hence this post. Maybe there are some fancy custom event things I can do?
The short and simple answer is not at all. Using, or more importantly relying on undocumented features is never a good idea.
It sounds like you have an XY Problem here. There are likely many other ways to achieve what you're trying to do here, and using $._data is almost certainly not the best solution.
I've encountered an annoying issue while working on YUI.
I have a main area and a navigation block. The elements in the main area can be activated with a direct click or by clicking an element in the navigation block that triggers the appropriate element in the main area.
As it turns out, triggering a click event programmatically in YUI isn't as simple as I thought it might be. Looking at the documentation I found pleanty of information on how to attach and delegate events but not how to call one.
I found this question, but it deals with creating a new custom event and not calling an existing one.
All other similar questions are answered with using .simulate(), but this is actually not the best option for compatability reasons and it's also not recommended by YAHOO itself for client-side use http://yuilibrary.com/yui/docs/event/simulate.html#faking. EDIT: After re-reading the section I realized the warning is irrelevant for the subject of this question.
I found a solution by calling the click() command in the node's DOM element, but this is really a last resort and I would like to know if there's a more "clean" way to do it through YUI.
Here is an example of what I'm doing now: http://jsfiddle.net/3fso2dg8/
In the example, the second button is triggering the click event of the first button by using the DOM element
Y.one('#clickme')._node.click();
CONCLUSIONS
After more fiddling with the code I came to realize simulate() is the preferred option in most cases, but not all.
The YUI vesrion I'm required to work with (3.14) has a known issue on simulating a click event in IE9 and above. Since - for other technical reasons - I cannot upgrade to whatever version this issue was fixed and I need to keep a multi-platform compatibility, my original solution is still the best option. Anyone else that uses YUI components that don't respond well on IE, maybe you stumbled upon the same issue so this is one way to solve it.
After looking for exactly the same functionality I just used simulate in user-facing code - where It would just mimic clicking with no return method etc. (simple submit button or choose fil trigger).
When I would needed "complex" functionality I would just add a class or new ID and add new delegate or "on" method in my code - following the: "If a function needs to respond to user action or be called programmatically, it should be written accordingly and called directly in the latter case." prinsipp.
So to summarize - I use simulate for very simple effects with no callbacks or other "advanced" stuff and (sadly) duplicate other delegate/on elements where simulating would be tricky...
Had also looked into your method (._node.click();) and I can't see no obvious difference comparing to simulate()...
Why use buttons within form for submitting a piece of data (such as for favorite-ing an question here on SO), when simply icon image with on-click JS handler function may work as well ?
Here the buttons I am referring to are like 'Vote-up' buttons, or 'Favorite a question' buttons on stack overflow. & not the Submit an answer button for which I would defintiely use forms and buttons.
I would like to simply put the icon images in place of my 'vote up' or 'favrorite' buttons and attach a click event handling function which would update my server via ajax. The reason being this reduces & cleans-up my markup
EDIT :
I guess most of the biggest sites today like fb/ twitter etc are relying on JS & as I have just noticed they dont provide a alternate way for some of the most basic features like liking a post when javascript is disabled. I obviously dont need to go beyond those users. Thus by limiting myself to JS enabled users I think I would be quite OK.
The vote-up & favorite button are anchor tags on stackoverflow (or I don't see what you're talking about!).
Also, I think it is better to use forms so that it degrades gracefully without JS.
I'd use an ajax post request for that, definitely. I think you're right. Use $.ajax or the shortcut $.post on the click event for the image. A loading effect is also important in terms of UX.
Why use buttons within form for submitting a piece of data (such as for favorite-ing an question here on SO), when simply icon image with on-click JS handler function may work as well ?
It might work. It might not work. HTML is solid and reliable. Build on things that work and don't fall foul of the Gawker problem
I'm working with ReCaptcha, ASP.NET and Gaia Ajax. It took me some time to use the ReCaptcha AJAX APIs combined with Gaia to retrieve the contents of the recaptcha_response_field text box in AJAX postback through a patch.
This was just to introduce you to the subject. Now I would like to apply another patch to ReCaptcha, without reimplementing it (a comprehensive open source library that works better than current ASP.NET implementation would be desirable, but I have no time for that): this question explains which.
Basically,
I need, after calling ReCaptcha.Create(), which renders the CAPTCHA during an AJAX postback, to hook to the OnKeyDown event of recaptcha_response_field and inject my Javascript snippet that prevents the form from being submitted.
You understand that since I don't render the <input> tag (I don't have control over it), I must hook from the external.
In general,
I think you may actually answer the general question: "how to set JavaScript event handlers programmatically?" because this surely applies to all classes of events.
Thank you
I wouldn't recommend on-the-fly checking of captcha, because then a program could just brute force it, after figuring out the basic characters of the picture.
I always use jquery for event handlers
something like:
$(function()
{
$("#{TEXTBOXID}").keydown(function(event)
{
alert(event.keyCode);
});
});
(taken from Why does JQuery keydown work for window but not textbox?)