jQuery: issue with clickable rows - javascript

I have a table with a class "myClass" on each row that triggers a jQuery function by click on the table row.
This works fine so far, the only problem I have is that some of the table cells contain buttons and then a click on a button also triggers the above event.
Is there a way I can prevent that the row click event is triggered when I click on a button in that row ?
I only want the event to fire by click on the row background but not by click on any button within a row.
Many thanks for any help with this, Tim.

At the top of your click event handler, put the following:
if ($(event.target).prop('type').toLowerCase() !== 'table' ||
! $(event.target).hasClass('myClass')) {
event.stopImmediatePropagation();
return;
}
What this does is say 'if the actual element isn't a table or doesn't have the class "myClass" then stop the event here and now (the return part). The stopImmediatePropagation() means that it won't propagate back up to the original selector (your 'table.myClass' in this case).
If you want the user to be able to click on ANYTHING inside your table except buttons, you would use this:
if ($(event.target).prop('type').toLowerCase() === 'button') {
event.stopImmediatePropagation();
return;
}
This will allow clicks on other elements like inputs, images, spans, divs, etc. to still trigger it. If this is not the desired behavior, you should consider putting your click event on the table cells instead of the entire table, and then just check that the target type isn't a td.

Related

Link inside jQuery UI Accordion

Using jQuery UI Accordion to create dropdowns for a filter list.
http://89.151.89.43/uk/trade-essentials-column-radiators-1.html#usestorage
Inside the Header there is also a clear button (You need to select an option for it to appear) The CMS is generating this automatically, unfortunately it doesn't function because it's inside the H4 tag surrounding it.
You will see an onclick function on the clear-button, I would like to keep the button where it is but just allow it to function.
To recreate:
Go to the above link
Select an option on the left
Clear button should appear
Try click the 'Clear' button
The accordion should then close
What I want:
The function contained in the 'onclick' to clear all checkboxes that are under that header
Without seeing the source code, I can't give you an exact answer, but in general you want to do something like this:
$("#clear-button").click(function(event){
event.stopPropagation();
event.preventDefault();
log("clicked!");
});
Looking at your example page, there seems to be a lot code missing.
I would suggest something like:
$(".clear-button").on("click", function(event) {
event.preventDefault();
$(this).parent().parent().find(":checked").prop("checked", false);
});
When the button is clicked, after being generated dynamically, you will want to find the input elements that are within the parent div element. Since the button is within the h4, you have to find that parent div.
An example, not working, since I cannot find the OnFilter() function code. You could assign the click callback when the button is added instead of using the .on().
https://jsfiddle.net/Twisty/o4L504ya/

Do something with the particular element even though click event is fired on class name

I have a scenario where a dropdown launcher menu should appear on every row in a list page. I have tweaked the code here.
I want the popover (open) behavior be restricted for the click on the particular launcher-icon, though close action is perfect here.
the problem is when any icon is clicked, it shows all menus. My page has rows inflated from a database and every row has three such launcher icons.
I guess this block of code needs some tweaks:
// Click event handler to toggle dropdown
$(".button").click(function(event){
event.stopPropagation();
// How can I call toggle for the specific div element?
$(".app-launcher").toggle();
});
How can it be done?
You need to traverse the DOM to find the .app-launcher instance which is related to the clicked .button element, to do that use closest() and find(), like this:
$(".button").click(function(event){
event.stopPropagation();
$(this).closest('.launcher').find(".app-launcher").toggle();
});
Updated CodePen
I would also suggest looking in to using a single instance of .app-launcher and moving it around the DOM as required to DRY up your HTML code.

In a jqGrid, how can I get the row that another element is in?

I have a jqGrid which has a column called "Actions". In this column, each row has a number of buttons which are supposed to perform various functions on the data in that row.
Unfortunately, the only grid parameter I've found that remotely matches what I want to do is selrow. This gets the selected row. But if the user clicks one of the action buttons, this doesn't necessarily mean that row is "selected" (i.e., the user has clicked on it previously).
Is there a way I can get the row of the button the user presses? Or does it not make sense to have buttons inside of the jqGrid to begin with?
If you would use for example onCellSelect to detect which button is clicked you will have directly the rowid of the button which is clicked. The answer will get you more details about the implementation.
If you would prefer to implement custom click event handler you can just find the closest <tr> element. It's id is the rowid of the clicked button. So you can use something like $(e.target).closest("tr.jqgrow").attr("id") where e is the event of the click handler.

How to select <table> like <div> in the MS Html editor?

If a tag like DIV, MARQUEE or IMG is inserted, it can be selected when clicking anywhere in the tag area. However, if a TABLE is inserted, it can only be selected when clicking on the border of tag area. I have searched for the possible event (onclick, keydown) defined for DIV, but unfortunately no relevant Javascript code was found. DesignMode is used for the editor. Anyone knows how to make TABLE easier to be selected just like a DIV?
You can do it using a ControlRange and selecting it. Assuming the table element is stored in a variable called "table":
table.onclick = function() {
if (document.selection.type != "Control") {
var range = document.body.createControlRange();
range.add(this);
range.select();
}
};
jsFiddle: http://jsfiddle.net/DTK8j/
It probably means that table was created so that an event was defined for each cell and possibly each row has an event also. When you click on any area in the row (if there was not padding given for the cell) the cell event was fired up and detect the cell event first not the row event. Likewise the click on the row will trigger the row event rather than the table event.
So it's difficult, but if you didn't define any event like onclick or any event on each row or cell then you only get the table event; otherwise the defined event on any row or cell will be activated in preference to the table event.

Wire up button click events after AJAX post

I have an HTML table with various rows, each has a delete button with a class.
On the DocumentReady event I wire up all buttons with this class to handle the click event.
On the click event, it does a jQuery POST which deletes data from the database and returns the table with the removed row.
If I go to click another delete button it doesn't do anything as if the click event is not wired up. I have tried wiring it up in the OnSuccess event as well as DocumentReady but nothing.
Please do post your jQuery code responsible for that whole logic. Just as a shot in the dark I'd suggest you'll have to use:
$(".button").live("click",function(){...})
instead of
$(".button").click(...)
I would use the live binding function in jquery to be able to bind to all specified elements at any time of creation:
http://docs.jquery.com/Events/live
Sounds like you are removing the entire table (with the buttons that have events attached to them) and replacing it with a new table (with new buttons that don't have buttons attached).
You have a couple of options.
Just remove the row that you delete - don't replace the entire table
Use event delegation and put the event handler on the element containing the table
Rerun the code that attaches the events every time you rebuild the table

Categories