jQuery on 'click' not triggering after change to a bootstrap table - javascript

situation
I am using bootstrap to render a table based on values in an array of objects. I have a select which has a jQuery on ('change') method attached so that when an item from the list is selected, a new table is rendered based on the selected value.
the table uses bootstrap collapse to show/hide rows from the table when the top row is clicked. the last item in the row has a glyphicon arrow which shows the row can be folded/unfolded as the picture below shows
collapse with glyphicon
I am using the below jQuery to toggle the icon
$('#tog').on('click', function() {
console.log("tog clicked");
$(this).find('span').toggleClass('glyphicon-arrow-up glyphicon-arrow-down');
});
so far I have this all working as shown with this fiddle http://jsfiddle.net/vgfb74u0/
Problem
the issue I am facing is that when a new table is rendered based on the selected item the jQuery that changes the glyphic does not trigger so when the table unfolds the icon remains the same.
I have put in some console.log at the start of the method and I never see it firing. so to my newbie eyes the click event is never triggered.
I'm surprised that i've managed to get this far and at a loss to what the issue might be so any help, pointers or advise is most welcome!

You need to manually bind events to any dynamically created element, or let jQuery do that for you.
Changing
$('#tog').on('click', function() {});
To
$('html').on('click', '#tog', function() {});
Will tell JavaScript to delegate the event to any #tog that's created inside the <html> element.

The problem is the event handler is lost when the table is re-rendered.
The fix is to attach the handler in a different way: $('.table').on('click', '#tog', function() {...}
See the updated jsfiddle

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/

Can't toggle bootstrap dropdown nicely with knockout

I'm trying to nest a dropdown inside an element which already has a click event bound to it.
I have disabled bubbling on the dropdown and created a clickhandler to trigger it manually by calling $(...).dropdown()
When I try to trigger a dropdown the dropdown box requires two clicks at a minimum before it begins to work.
When you use $(...).dropdown('toggle') it works on the first click but after that the functionality is broken.
Here is a JSFiddle that exactly mimics my structure.
JSFiddle
Just add this function in your script it's work fine
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
I update your jsfiddle click here

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.

jQuery .change doesn't fire when table gets new rows?

I"m working on an asp.NET project. My code-behind page binds to a repeater control that fills a table on the page.
I've hidden the table with CSS while it's empty. I'd like to use jQuery to make the table visible when the repeater fills it, but I'm having trouble making that work. Here's a bare-bones example:
$('#MyTable').change(function () {
$('#MyTable').show();
})
I'm using a plain HTML table, not an asp:Table, so I don't need to use the .ClientID workaround and I can't manipulate it on the server side. I've also tried putting the .change event on the repeater control, but that doesn't work either. The table stays hidden after the new rows are added.
Can anyone suggest a way, hopefully straightforward, do do what I'm trying to do?
The change event fires for combobox, listbox when selected index fired, i dont't think it will fire when you append tr to tables.
However, you can have work around for this, take a asp:panel or simply a div that will contain your html table, and you can set this panel visibility to true when you append rows in your html table.
If you use plain HTML table, change will not work, try this solution:
HTML table onChange
you can use the livequery plugin which will detect the DOM change.
first add the livequery plugin to the page and then try this
$('#MyTable tr')
.livequery(function(event) {
$('#MyTable').show();
return false;
});
hope this helps.

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