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.
Related
I am using Ajax Load More to load some tables on my WordPress website. I added a sorting function to the table using a plugin called sortable.
Before loading with ajax, I can sort out the table by simply adding data-sortable to the table tag like this <table class="uk-table uk-table-large" data-sortable>.
But it stopped working once I started using ajax to load the tables.
So I tried to initialize the sorting on each table loaded via ajax using the code below:
jQuery(document).on('click', '.floor .uk-table', function() {
Sortable.init()
});
The code seems to work but I had to click each tables' headers twice for each column to be sorted out. I am not an expert with javascript so I am not sure why this is happening.
Instead of adding a click event listener to the document you can just add it directly to the class itself.
Example:
jQuery('.uk-table').click(function() {
Sortable.init()
});
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
I am new to jQuery so please go easy, I have a form that will represent an Advanced Search. Users will be able to add rows to refine their specific search.
Each row has 3 elements: A Checkbox & 2 x Select boxes.
As can be seen in the fiddle I am using jquery to clone the row and place the cloned row after the last row.
Everything is working fine except visually I would like the checkbox to use Bootstrap-Switch http://www.bootstrap-switch.org/
And the select boxes to use Selectize https://github.com/brianreavis/selectize.js
Now, when I clone the row with these plugins not active, everything works.
I have NO idea how to re-render or re activate them once a new row is inserted.
Is this something that is plugin specific? Or kind of universal to jquery?
I have read HEAPS of answers on here about similar things but I cannot seem to get it right.
Here is the jquery snippet:
$adSearchForm = $('#adSearchForm');
$adSearchForm.on('click', 'button, input, select, option', function (event) {
console.log("Button Clicked", event)
});
$('#addSearchRow').click(function(event){
$('[data-content=adSearch-3]:first').clone().insertAfter('[data-content=adSearch-3]:last');
// $('.searchByField,.searchOperator').selectize({refreshItems: true});
// $('[data-toggle=switch]').bootstrapSwitch({refreshItems: true});
});
Here is the fiddle, hope its ok. http://jsfiddle.net/CkVQr/6/
Thankyou very much for your help.
Cheers
Plugins change your HTML
There are two major problems you may not be fully aware of with your code:
Whenever you do a .clone() it merely deep clones your DOM element subtree, but not any event handlers bound to cloned elements.
Your .selectize() plugin changes HTML of your form quite considerably, converting input elements to other things. So whenever you clone your already converted select filter row, and subsequently want to run .selectize() on it again, this particular plugin won't find any suitable input elements to convert. Hence it won't work. Everything will just look as it should but won't work.
What can be done?
The main idea is that whenever you clone your search filter row, you have to clone your original HTML and not after it was converted using your plugins.
HTML Templates to the rescue
One of the possibilities is to change you page (and functionality) a bit and put your search filter row in a template and always use that. When you create your first row, you should read the template (and cache it) and add+convert it on your page. When you'd add an additional row, just use the same cached template and add+convert it again.
HTML template
<script id="filterRow" type="text/x-template">
<!-- Your filter rown HTML goes in here -->
</script>
Some Javascript
var cachedTemplate = cachedTemplate || $("#filterRow").html();
...
$('#addSearchRow').click(function(evt) {
var newRow = cachedTemplate.clone(); // clone for reusability
newRow.insertAfter('[data-content=adSearch-3]:last');
newRow.selectize();
...
});
I am working on the enterprise application where I need to remove all the classes of a specific table rows.
I am using following jQuery selector for selecting all the rows
var bodyTable = $(".ui-jqgrid-bdiv table tbody");
var bodyRows = $(bodyTable).find("tr");
The HTML for the div in which table resides is in the following jsFiddle
jsFiddle
In jsFiddle it works as expected and returns all 11 rows but in the application it only selects the first row and the following code returns 1
$(bodyTable).find("tr").length;
I am not able to determine what could be stopping it.
Any pointers why jquery would only select first row?
if you want to execute something on each row ... try this
$(bodyTable).find("tr").each(function(){
//operation on each row
}
Well, It turned out be a case of putting the code in the wrong event.
Our application is event driven application and I was writing the code at initial event when the UI is being displayed.
#shhade slman comment made me look at the other events and after putting the same code in the data rendering event worked as expected. I knew it is something inside the application as the code in jsFiddle was working.
Thanks all for your input that nudged me into the right direction.
In Typeahead JS I'm trying to add an option that appears at the bottom of the dropdown after the user has started typing. Currently I'm using the 'onOpened' Custom Event to trigger adding some HTML after the 'tt-dropdown-menu' element is initialised.
.on('typeahead:opened', onOpened)
function onOpened($e) {
$('.tt-dropdown-menu').html( "Add Option" );
}
The problem is that the jQuery HTML is added when the dropdown is initialised, as expected, then when the user starts typing the new dataset element with the autocomplete results in is added below that jQuery HTML so the jQuery HTML can never appear at the bottom of the dropdown. You can't append the jQuery HTML to the dataset either as that element doesn't exist when the dropdown is initialised.
Is there an easier way around this? The other Custom Events don't seem to cover this scenario.
If you only have one dataset, you can do as I do: add a footer to the dataset, and add it as a DOM element, not plain HTML string. You can then change it at will (say on any event you wish) and your changes are reflected in the dropdown.
Example:
$('#myinput').typeahead({
// rest of your regular stuff, like 'name', 'remote', etc.
footer: $('#dropdown-footer'),
});
... where dropdown-footer is the ID of a div you have somewhere in your dom. You can then do things like:
$('#dropdown-footer').html('Hello')