bind button onClick method to keypress action - button

I have a button b, I want the document to understand a key press action has been triggered whenever I click on that button.
For example, when i click on that button, i want the document to recognize that the left key has been pressed and whatever the java script has been written for it should work.
I am unable to figure out how to do this. Please help.

You need to add an event listener to look for a click action. You can do this for a specific button, the first button that your code finds, or all buttons on the page if they all perform the same action. Actually, you can add this listener to just about any html object. Here's a simple snippet I got from https://developer.mozilla.org/en-US/docs/Talk:DOM/element.addEventListener.
<div id="ear">Click me</div>
<div id="display"></div>
<script>
var ear = document.getElementById('ear');
ear.addEventListener("click", listener, false);
function listener() {
document.getElementById('display').innerHTML = "blah blah";
}
</script>
What this is doing is creating a variable called ear, and assigning the div with id='ear' to it. Again, you can just as easily do this with a button, or any other tag. Then ear.addEventListener adds a click event, tells it to run the listener function, and the boolean at the end says if the parent's handlers should be run, as well all ancestors going up. Setting this to true will cause only the tag that was clicked to run.

Related

Child controls in asp.net Blazor not refreshing. StateHasChanged() not working

Please refer to the following https://github.com/CD1010/BlazorWizard.git for this question. The sample is in StepActivations Branch
I have a page called DemoWizard, which incorporates a 3 step wizard. When i click the "Toggle Enabled" button, the second and third steps links should go to enabled or disabled state. It seems however, that the first time takes 2 clicks to turn off the headers, and the state is always behind.
So it appears that StateHasChanged() is not refreshing child states properly.
Note that the refresh() method was an attempt to get at least step2 to refresh properly, but to no avail.
Any idea why?
the click handler that does toggle is below.
void OnClick()
{
step2Enabled = !step2Enabled;
step3Enabled = !step3Enabled;
StateHasChanged();
Step2.Refresh();
}
Your code isn't showing up exactly as advertised, but i think what you need to do is add an event callback to the Blazorize CheckEdit component:
<Blazorize.CheckEdit #bind-Checked="#Parent.IsValid" CheckedChanged="#VerifyEnabledTabs">Check Me</Blazorise.CheckEdit>
where VerifyEnabledTabs is a method on the top level Wizard that can assess where you are and what is complete / filled / checked / whatever, to allow certain links to be active.

How can I simulate a click event on an anchor tag without actually calling click or refreshing?

I am using meteor with iron router and meteors standard blaze tempting.
I have an ul set up so that when one of my li items is clicked its containing anchor tag is clicked on using the function click. The only problem is that when that a is clicked with the function it counts as another click on my li and my menu isn't toggling right.
I am wondering if there is a way to call the pathFor without actually calling a click function.
Thanks for any help!
Update, here is the code its working along with a pretty standard drop down nav. I am not sure if I can catch that event the same as a jquery event since I think it is the standard browser click event working on the [0], but I think I should be able to make a function that matches href to route and call Router.go
Template.nav.rendered = () ->
# set initial page view and take care of refeshes
currentPageHtlm = getCurrentPage(window.location.pathname)
$('#currentPage').find('span').html(currentPageHtlm)
$("li").on "click", () ->
#simulate anchor click and set currentPage session
$(this).find("a")[0].click()
Session.set 'pageName', getCurrentPage($(this).find("a").attr("href"))
currentPageHtlm = Session.get 'pageName'
$('#currentPage').find('span').html(currentPageHtlm)
# toggle nav and arrow if mobile view
if $('.smOnly').css('display') != 'none'
$('#nav').slideToggle('slow')
$('#dropArrow').toggleClass('fa-caret-square-o-down fa-caret-square-o-up')
It sounds like you're looking for a way to programatically redirect from JS rather than via UI interaction, in which case you need to use Router.go('ROUTE_NAME'), as per the docs (you can use the route name as in pathFor as an alternative to supplying the actual path).

Capturing clicks in a column of buttons (with dojo)

I am trying to capture the click event of a row using a column of "use" buttons. This is similar to the "selectable" feature in the Kendo grid, but having a button makes it more obvious for the user in our case.
Because there are multiple buttons (and I don't know if you can dynamically assign button id values), I tied a CSS class to the button, and I will use that to determine what row I am on when the user clicks the USE button.
Here is a dojo of what I am trying to accomplish, but for some reason, the click event (alert statement) is never executed.
http://dojo.telerik.com/UkIW/2
Can anyone spot the problem?
As far as I can see you're using jQuery and no Dojo code so far. But there are some mistakes here, first of all, you should put the event handler for hte buttons in the ready() handler as well, so move it inside:
$(document).ready(function() {
// ...
});
And then second, if you're binding to dynamic elements with jQuery, the preferred way of doing so is by adding it to a parent element (for example the <body>) and then adding a second parameter as shown below:
$(document).ready(function() {
// ...
$("body").on("click", ".use", function() {
// ...
});
});
I created a milestone in your example: http://dojo.telerik.com/UkIW/5

Alternative method for creationcomplete

I am trying to load bunch of product detail into a canvas component from a List component.
Every time the user clicks on a product inside my List, the product detail will be displayed in the canvas component. The product detail might contain null and I want to check it before displaying in my canvas component.
In my canvas component, I use createcomplete to check if the productDetail==null then do something. My problem is if the user clicks the product with the non-null detail first time, the statement "if (productDetail==null) then do something" won't work if the user click a null product detail because the canvas component has been created the first time user clicks a non-null product detail.
I want to check if the productDetail==null every time the user click a product...I hope I explain my question well and appreciate any helps.
My code..
AS:
protected function changeHandler(event:IndexChangeEvent):void{
compDetailinfoResult.token=getCompList.compDetail(event.target.selectedItem.productId);//get the product detail clicked by the user
}
<s:List dataProvider={productData}/> //when user click a product,
//the canvas will show product detail..
<comp:productDetail productData={compDetailinfoResult.lastResult} //custom property
change="changeHandler"/> //if the product detail is
//null, the statement inside
//the canvas will check via
//creationComplete. but if the
//user click the non-null product,
//the creationComplete check pass. User clicks a null product again,
//the check won't work anymore...
code for my productDetail component:
public var productData:arrayCollection
protected function canvas1_creationCompleteHandler(event:FlexEvent):void
{
var undefinedBrand:String=dataFromClick.getItemAt(0).brand;
if(undefinedBrand==null){ // I want to check every time the user click a List item
brand.text="Brand: No Brand";
switchView.enabled=false;
displayPictureBig.source="assets/vacant.jpg";
}
}
<s:Panel>
<label id="brand" text="productDate.getItemAt(0).brand"/>
//I want the brand to be displayed..
//but if brand is null..it will display No Brand..
//see AC above...but createComplete only fire once.
//Anyway to keep tracking if the brand that is sent by List is null?
</s:Panel
Thanks for the helps..
I'm having some trouble understanding your issue. Are you referring explicitly to Canvas, the Halo container? Or did you name one of your custom components Canvas? If it is custom, as your code suggests, what is inside the component?
creationComplete is an event that only fires once, when the component finishes running the component lifecycle creation process for the first time. Your code snippets do not show any data being passed from the list into the canvas, so that could be one reason why the data is null.
If someone selects a new item on the list, the change event should dispatch. You can add an event listener to the change event and use it to update the data you are sending into your canvas component.

Can you force a hyperlink click event on page load

I've implemented a menu for my asp.net page containing some hyperlinks and loading different contents on their clicks, it's using jquery on behind for it's style mostly and it is working fine. But the problem is, what if a refer to this menu from the outside, i can refer to each of the menu items, i pass parameters on querystring, now i can find which item is clicked but how can i force that hyperlink menu item to be clicked on page load. I'm specifing just their navigation urls, how can i specify that if something is passed in querystring than that specific menu item should be forced clicked on pageload.
Any ideas? Thanks in advance.
The real question lies can you cuase a hyperlink click event?
Now I'm using
Page.ClientScript.RegisterStartupScript(typeof(Page),"test1", "<script>document.getElementById('linkButtonId').click();</script>"); but still nothing desirable happens, seems that this row has no effect at all.
Whether the functionality being executed is client side or server side, it might be a good idea to create a function that will accept the id or something of the menu item being clicked and then handle it appropriately.
Thus all the menu items will call the same function. And since you have the parameters in the query string just pass them through to the function which will handle it accordingly and display the correct content?
You need a bit of separation...
Whatever your click does can be moved into a function, then you can call the function on the click of the menu - but you can also call the function at other times as well.
Before:
<a ... onclick="alert('hello');">Click Me</a>
After:
<a ... onclick="fnSayHello();">Click Me</a>
...
var fnSayHello = function() { alert('hello'); };
fnSayHello();

Resources