jQuery not all tables rows are getting selected - javascript

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.

Related

Dynamic HTML rows, with List items which cascade with the Dynamic rows

I am wondering if any of you guys can help me with the issue I am having. Basically, I have a table which has a button to add dynamic rows with a index from 0- to the last row number.
I have added a JS fiddle here: jsfiddle.net/mfbcvprc/4
What I am looking for, is when a new table row is added to the dynamic table, the dropdown menu which is present in the first row of the table, gets copied so it can be used in the next new row which has been added.
Would someone kindly be able to show me an example of how this would be done? At this stage I have exhausted my knowledge of Javascript and HTML, so seek a bit of guidance!
Check this answer first:
https://stackoverflow.com/a/17378538/1800668
I have updated jsfiddle.. but was having wierd issues with jquery that I havent seen before so see this codepen instead:
https://codepen.io/anon/pen/YqKEJq
Basically the change I made was this:
$(document).ready(function() {
$('.btnAdd').click(function() {
addRow();
var newDropDown = $('#table1 tr:last').find('input[name*=area]');
newDropDown.attr('list', 'areaList').removeAttr('type');
});
It adds the new row, as you have done, and then finds the newly entered input, and updates its attributes so that it's identical to the previous one. Ive never worked with your datalist types of control so not sure if this approach is good.. but it works in the pen.

Rerender Dynamic Elements when using jQuery Plugin Selectize and Bootstrap-Switch

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();
...
});

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.

Why filter and paging are not working together

I have a function which has to filter and display the result by pages. On document ready everything seems fine. The items are separated by pages. If I click on checkbox or date it is filtering elements as I want, so it's working too. But the problem is that when the function filter items a new pagination is not creating. For example: I have 28 items. They display 3 pages - 10items/page. If I filter and the filter result is 12 items the function doesn't make 2 pages: 10 items on first and 2 on second ... but everything is on the first page and the number of pages are not changing. This is my code:
jsFiddle
I was trying to make the 'click' function 'live' like this:
$('label.check, .calendar a').live('click', function(){
//the code
})
but I don't know why it is not working and it is braking.
I also tried to replace this match-es:
var pages = Math.ceil(match.length/page);
and
match.slice(first_item, last_item).show();
with $('.widget.left:visible') but it still didn't work.
So why is live not working? I think if it does, and give my match a live result, the rest will work but ... Can someone help?
edit: I don't know but my js doesn't run in the jsfiddle. I've tried both jsfiddle and jsbin but still doesn't. Sorry for that I don't know how to fix it but the code runs for sure. It is copy/pasted.
You said :
but everything is on the first page and the number of pages are not
changing.
Because in your JSBin $ is not defined. It means that JQuery is not defined, all others library also BTW.
I quickly add JQuery and JQuery UI, it is working the first time (when I click on americana for example). After it seems freezed. As I don't have all your dependencies, I stopped the debugging.
http://jsbin.com/oqufun/4/edit

Sum of column of nested grid using JQuery

Please see this fiddle, I want sum of nested grid and put sum value
in text box of parent grid. This structure can repeat so I can't
hard-code textbox name.
HTML in fiddle is very messy but that is what generated from my page.
Fiddle:
http://jsfiddle.net/kashifnadeem/kGzFL/8/
One another problem is that if I put this in Ajax (update panel) then
this html is not generated why is that and how to use JQuery in that
case.
Regards,
Try this: http://jsfiddle.net/NyHa6/1/
Don't know whether this is what you want.

Categories