checking if all radio buttons are checked in jquery datatables - javascript

I have a datatable and i would like to check if all radio buttons are checked but this works only for the first paginated page but fails to check the other pages
this is my code:
var dt = $('#newtable').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false
});
This is what am using to check
$("input:radio").change(function() {
var all_answered = true;
dt.rows().nodes().each(function() {
if($(":radio:checked").length == 0)
{
all_answered = false;
}
})
if(all_answered==true ){
$('input[type=text]#general_comment').removeAttr("disabled");
approvebtn.removeAttr("disabled");
}else {
approvebtn.prop("disabled", "disabled");
}
});

You can bind a page event on your DataTable once the datatable is initialized, which on pagination (page change) will check what you want.
$('#newtable').bind('page', function () {
//call to check what you want.
});

Related

Datatables Interaction Disables Other Javascript Functions

I have an element that opens a modal:
<a style="color:#5cb85c" data-toggle="modal" data-target="#CallModal" data-id="#item.Supplier.Id" href="#CallModal" class="fas fa-phone-square"></a>
I have a Javascript listener on data-toggle=modal that passes the data-id into a field of id="CallSupplier" in the modal.
$(document).ready(function () {
$('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
var data_id = '';
if (typeof $(this).data('id') !== 'undefined') {
data_id = $(this).data('id');
}
$('#CallSupplier').val(data_id);
})
});
That all works great. but, I also have Datatables. Everything works great until i interact with Datatables via searching or pagination, and then the javascript for filling the modal stops working/firing.
Here is the full script element on my page. I'm thinking it has something to do with how I'm defining my JS functions:
<script type="text/javascript">
$(document).ready(function () {
$('#SupplierTable').dataTable({
searching: true,
lengthChange: false,
info: false,
pagingType: "first_last_numbers",
order: [2, 'desc'],
pageLength: 5,
dom: 'Bfrtip',
buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
"columnDefs": [{ "type": "date", "targets": 2 }]
});
});
//map the data-id fields to the objects
$(document).ready(function () {
$('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
var data_id = '';
if (typeof $(this).data('id') !== 'undefined') {
data_id = $(this).data('id');
}
$('#AttachmentSupplier').val(data_id);
$('#CallSupplier').val(data_id);
$('#CommentSupplier').val(data_id);
})
});
</script>
I found a very similar post that lead to me answering this.
Function stops working after table sort
I removed $(document).ready() from my function, and now it continues to work even after sorting or paging in Datatables.
$('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
var data_id = '';
if (typeof $(this).data('id') !== 'undefined') {
data_id = $(this).data('id');
}
$('#AttachmentSupplier').val(data_id);
$('#CallSupplier').val(data_id);
$('#CommentSupplier').val(data_id);
})

FixedHead in datatables doesn't work after removing pagination

When I delete the line “paginate”: false inside of the javascript box,
the Fixedheader doesn’t work anymore but I don’t want pagination. Is there any way to avoid this?
Here's the code: http://jsfiddle.net/xF8hZ/128/
$(document).ready(function() {
var table = $('#example').DataTable( {
"bSort": false
"paginate": false
} );
new $.fn.dataTable.FixedHeader( table, { "left": true } );
$('.filterName').on('click', function(e) {
e.preventDefault();
var filterValue = $(this).data('filter');
table.column(0).data().search(filterValue).draw();
});
} );
I assume you meant to say
When I put the line “paginate”: false inside of the javascript box...
That's because you missed a comma there, should look like this:
$(document).ready(function() {
var table = $('#example').DataTable( {
"bSort": false,
"paginate": false
} );

OWL Carousel 2 adding class to item

Im working on a slider that contains two synced owl-sliders.
sync1 is main slider and sync2 is thumbnails slider. When I click on one of elements of second slider sync1 goes to proper slide.
Now goes my issue:
When user clicks on any of thumbnail a green border should appear on clicked elemment and should stay there until another element is clicked.
I've tried to use jquery .addClass and .css but nothing happens.
I think that I should add div with "position: absolute" that holds up to clicked element, but I don't know how to do it. Please help! :)
Here is my js
$(document).ready(function() {
var sync1 = $("#sync1");
var sync2 = $("#sync2");
var index2=0;
var flag=true;
var slides = sync1.owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout:5000,
autoplayHoverPause:true,
nav: false,
mousedrag: false,
touchdrag: false,
pulldrag: false
});
$(document).on('click', '.prevbutton, .nextbutton',function() {
sync1.trigger('stop.owl.autoplay');
});
sync1.on('changed.owl.carousel', function(event) {
var index1=event.item.index;
var index11 = index1-2;
//console.log("index1", index1)
//console.log("index11", index11);
sync2.trigger("to.owl.carousel", [index11, 100, true]);
});
$('.nextbutton').click(function() {
//console.log(sync1);
sync1.trigger('next.owl.carousel');
});
$('.prevbutton').click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
//console.log(sync1);
sync1.trigger('prev.owl.carousel', [500]);
});
/* thumbnails*/
var thumbnails= sync2.owlCarousel({
items: 6,
loop: true,
autoplay: false,
mousedrag: false,
touchdrag: false,
pulldrag: false,
addClassActive: true
});
/*buttons*/
$('.nextbutton2').click(function() {
sync2.trigger('next.owl.carousel');
});
$('.prevbutton2').click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
sync2.trigger('prev.owl.carousel', [500]);
});
sync2.trigger("to.owl.carousel", [index2, 100, true]);
sync2.on('changed.owl.carousel', function(event) {
index2=event.item.index;
//console.log("index2", index2);
index22=index2-1;
// sync1.trigger("to.owl.carousel", [index22, 100, true]);
});
// console.log("index2", index2);
sync2.on('click', '.item', function(e) {
e.preventDefault();
sync1.trigger('to.owl.carousel', [$(e.target).parents('.owl-item').index()-6, 300, true]);
// console.log("clicked index", $(e.target).parents('.owl-item').index())
});
$('#stopcontainer').on('mouseover', function(){
if ($('#stopcontainer:hover').length != 0) {
flag=true;
console.log("flaga", flag);
}
if (flag==true) {
sync1.trigger('stop.owl.autoplay');
console.log("mousein");
}
}).on('mouseleave', function() {
setTimeout(
function()
{
if ($('#stopcontainer:hover').length == 0) {
flag=false;
console.log("flaga", flag);
}
if(flag==false){
console.log('mouse leave');
sync1.trigger('play.owl.autoplay');
}
}, 5000)}
);
});
Here is the solution:
sync2.on('click', '.owl-item', function(e) {
e.preventDefault();
$('.some-class').removeClass('active');
$(this).find('.some-class:first').addClass('active');
});
There is empty div with "some-class" inside carousel item, and when you click on this element class "active" is added

fancybox/jQuery: Why can't I abort after toclick in a button with some relation with fancybox?

If in the next table I have some rows selected:
<table id ="XX">
...
<tr>
<td><input type="checkbox" id="1"></td>
</tr>
...
</table>
I show this dialog:
jQuery("#btnActivar").fancybox({
content: jQuery("#ConfirmacionGuardar").html(),
modal: false,
showCloseButton: false,
onComplete: function () {
...
}
});
Always when I click in the button btnActivar open fancybox. I need to abort it when No rows are selected in the same click event of the button
Is it possible to do?
Try validating the condition (rows selected?) on click before deciding whether firing fancybox or not like :
jQuery("#btnActivar").on("click", function () {
// validate if rows are selected here
// returns either true or false, e.g.
var rows_selected = true;
// condition true? then fire fancybox programmatically
if (rows_selected) {
jQuery.fancybox({
content: jQuery("#ConfirmacionGuardar").html(),
modal: false,
showCloseButton: false,
onComplete: function () {...
}
}); // fancybox
}; // if
return false; // otherwise do nothing
}); // on click

jquery datatable's pagination on a select menu

I have a select menu with two options "All" and "test".....when I select "All" a datatable with 15 columns is shown and when "test" is selected, another datatable with 5 columns is selected....
When there are less than or equal to 5 items, the pagination should be disabled...
This is what I've done so far,
created the 2 datatables as mentioned,
function All(){
$('#All').dataTable({
"iDisplayLength": 5,
"sPaginationType": "four_button",
"bJQueryUI": true,
"bRetrieve": true,
"bAutoWidth": false,
"fnDrawCallback": function() {
if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
$('.dataTables_paginate').css("display", "block");
} else {
$('.dataTables_paginate').hide();
}
}
});
}
function Test(){
$('#Test').dataTable({
"iDisplayLength": 5,
"sPaginationType": "four_button",
"bJQueryUI": true,
"bRetrieve": true,
"bAutoWidth": false,
"fnDrawCallback": function() {
if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
$('.dataTables_paginate').css("display", "block");
} else {
$('.dataTables_paginate').hide();
}
}
});
}
$(document).ready(function(){
$('#List').val('All');
All();
$('#test').hide();
$("#List").change(function(){
if(this.value == 'All'){
All();
$('#All').show();
$('#Test_wrapper').hide();
}
else if (this.value == 'Test'){
Test();
$('#Test').show();
$('#All_wrapper').hide();
}
});
});
As you can see, I'm checking for the pagination in the "fnDrawCallBack" function......
The page loads find when called upon initially.....but when I select All after selecting test, the pagination disappears, understandably......
is there any work around for this? Any help is appreciated....
Thanks
Never mind, found a solution to implement this......
In documennt.ready function, put something like this inside the if condition for each table........
$("#productsList").change(function(){
if(this.value == 'All'){
All();
all.fnPageChange( 'first' );
$('#All').show();
$('#Test').hide();
if (Math.ceil((all.fnSettings().fnRecordsDisplay()) / all.fnSettings()._iDisplayLength) > 1) {
$('.dataTables_paginate').css("display", "block");
} else {
$('.dataTables_paginate').hide();
}
Also, you do a similar if loop when "test" is selected from drop down...
The other way that I tried doing it, (found the above solution more feasible, that's it)...
Try to identify if the child node is active using jQuery....by putting this inside your if condition of the documenty.ready function when the value changes,
if($('#Test_wrapper #paginate_next').hasClass('paginate_enabled_next') || $('#Test_wrapper #paginate_previous').hasClass('paginate_enabled_next')){
$('#Test_wrapper .dataTables_paginate').css("display", "block");
} else {
$('#Test_wrapper .dataTables_paginate').hide();
}
Note: The above mentioned method's only hides your pagination.....
I've tried, destroying my old table and recreating it but that was showing a javascript error, didn't have time to look into it....shall do when I've time :)
Please let me know, if there is a better solution to this......
Cheers and thanks for taking time to read this off :)

Categories

Resources