Develop Reference

JSGrid - Change cell value after page is changed (onPageChanged method) not working

I'm using JS-Grid and I want to update a specific cell value right after i change a page.
Looking at the documentation , onPageChanged method seems like the right way to do it, but it doesn't work properly.
I have the following JS-Grid code:
$("#itemsListGrid").jsGrid({
width: "100%",
filtering: true,
sorting: !0,
viewsortcols : [true,'vertical',true],
paging: true,
autoload: true,
pageSize: 9,
pageButtonCount: 5,
controller: db,
fields: jsGrid_fields_mapping,
onPageChanged: function() {
alert("START onPageChanged");
var archiveRNTable = document.getElementsByClassName("jsgrid-table")[1];
archiveRNTable.rows[0].cells[2].innerText="valueIsChanged"
alert("END onPageChanged");
}
});
Running my app, i see that the alerts are popping BEFORE the page actually change. I'm trying to find a workaround to make it work.

Maybe not the most clean way to do it, but have you tried using setTimeout()?
So, in your case:
onPageChanged: function(args) {
alert("START onPageChanged");
// Wait some time to render table, then call function
setTimeout(function() {
var archiveRNTable = document.getElementsByClassName("jsgrid-table")[1];
archiveRNTable.rows[0].cells[2].innerText="valueIsChanged"
alert("END onPageChanged");
}, 300);
},
Background: the docs of JSGrid say that the event fires immediately after the page index is changed and doesn't wait for the data to load.

Javascript stops working after page-redirection (ANGULAR)

I'm using angular 6 to create a testimonial slider.
It looks great, but the problem is... I'm using RouterLink in my header, so everything loads at once. When you open the page with testimonial javascript for the first time it works, but then when you go onto another page and re-direct back it does not work.
Has anyone encountered a similar issue?
Is there a way to modify this function so it loads on page-view rather than page-load?
Thanks
JS Code:
function mfnSliderTestimonials(){
var pager = function( el, i ){
var img = $( el.$slides[i] ).find('.single-photo-img').html();
return '<a>'+ img +'</a>';
};
$('.testimonials_slider_ul').each(function(){
var slider = $(this);
slider.slick({
cssEase : 'ease-out',
dots : true,
infinite : true,
touchThreshold : 10,
speed : 300,
adaptiveHeight : true,
appendDots : slider.siblings( '.slider_pager' ),
customPaging : pager,
autoplay : window.mfn_sliders.testimonials ? true : false,
autoplaySpeed : window.mfn_sliders.testimonials ? window.mfn_sliders.testimonials : 5000,
slidesToShow : 1,
slidesToScroll : 1
});
});
}
EDIT: WORKS
All working fine now. Even when re-routing. In thecomponent I've declared the javascript function in such way:
declare function YOURFUNCTION(): any;
#component......
ngOninit
YOURFUNTION()
and obviously import * as $ from 'jquery'; was also necessary!
Thanks

DataTables menu for select items to show per page doesn't work

On my DataTable the box where you can select how many items per page you want to show doesn't work. It is showing me this:
[[5,10],[5,10]] instead to show me only the numbers.
I tried to understand what caused this issue but without any success.
If I click on the menu one of the options I have this error also: Showing NaN to NaN of 2 entries
I'm using this in my Rails 4 app.
this is my js:
var dtMainDataTable; // Reference to main table
var dtSecondaryDataTable; // Reference to secondary table
var dtTertiaryDataTable; // Reference to tertiary table
var dtMainOrder; // Main table ordering
/*
* Create tables on document ready
*/
$(document).ready( function() {
// Set the order of the main table and update if overridden by page.
dtMainOrder = [0, 'asc'];
if (typeof dtMainOrderUpdate !== 'undefined') {
dtMainOrder = dtMainOrderUpdate;
}
dtMainDataTable = $('#main').DataTable({
columnDefs: [],
"pageLength": pageLength,
"lengthMenu": pageSettings,
"order": dtMainOrder,
responsive: true
});
dtSecondaryDataTable = $('#secondary').DataTable({
columnDefs: [],
"pageLength": pageLength,
"lengthMenu": pageSettings,
responsive: true
});
dtTertiaryDataTable = $('#tertiary').DataTable({
columnDefs: [],
"pageLength": pageLength,
"lengthMenu": pageSettings,
responsive: true
});
});
/**
* Show all items in the main table.
* Really only for testing purposes.
*
* #return [Null]
*/
function dtMainTableAll() {
dtMainDataTable.page.len(-1).draw();
}

I resolved my own question and hope will be useful for others.
I had this in my code: var pageLength = '#{current_user.table_rows}';
I dleeted the '' and started working again
So the result working for me is:
var pageLength = #{current_user.table_rows};

jQuery/JS keeping count of selectivity plugin boxes for tag limit

I'm currently trying to find the best (easiest) way to do the following.
I have 2 input boxes on my page and each has a data attribute of data-cnt. This starts with 0 and goes for however many boxes are on the page.
<p><span id="bomtags" data-powertip="" style="width: 150px;" data-cnt="0"></span></p>
<p><span id="bomtags1" data-powertip="" style="width: 100px;" data-cnt="1"></span></p>
As with the example above, I only have 2 boxes (0 and 1).
Currently I am keeping up with the limit count like so:
var tagLimit = 0;
var theOptions;
....more code within here....
_itemRemoveClicked: function (event) {
tagLimit--;
this.remove(this._getItemId(event));
this._updateInputWidth();
$.powerTip.hide();
return false;
},
....more code within here....
_open: function () {
toolTip(false);
$('#' + this.$el[0].id).data('powertip', '<p style="top: -10px; position: relative;">Max limit of ' + this.options.limit + ' tags reached!<br/>Delete a tag in order to add again.</p>');
if (this.options.showDropdown !== false) {
if (tagLimit != this.options.limit) {
console.log(this.$el.attr('data-cnt'));
this.open();
} else {
toolTip(true);
}
}
},
....more code within here....
_resultSelected: function (event) {
if (tagLimit < this.options.limit) {
if (this._value.indexOf(event.id) === -1) {
this.add(event.item);
tagLimit++;
} else {
this.remove(event.item);
tagLimit--;
}
}
},
....more code within here....
if (tagLimit != this.options.limit) {
//console.log('opened');
console.log(this.$el.attr('data-cnt'));
this.open();
} else {
//console.log('hit');
toolTip(true);
}
The this.options.limit houses the MAX number allowed tags in the box.
The this.$el.attr('data-cnt'); is the value for the data attribute of that current selected box.
$('#bomtags').select3({
items: cities, //['red', 'green', 'blue'],
multiple: true,
allowClear: true,
placeholder: 'No permissions selected',
limit: 3, //<--- the custom jQuery option
tokenSeparators: ['|']
})
$('#bomtags1').select3({
items: cities,
multiple: true,
allowClear: true,
bgColor: 'rgba(255, 255, 255, 0.5)',
placeholder: 'No color selected',
limit: 3, //<--- the custom jQuery option
tokenSeparators: ['|']
});
Now that works just fine if I only have 1 box on the page. But if I have multiple boxes on the page then the count gets off course.
In the GIF animation up above, you see that in the first box when I add 3 tags it tells me on the 4th tag that 3 have already been selected and is the MAX. Then you see me try to insert 1 tag in the 2nd box but gives me an message of already chosen 3. Once I delete one form box 1 I can add another to box 2. This can go on and on where one box can have 3 tags while the other is stuck with nothing (because the tagLimit had already been reached).
I'm trying to figure out a way in order to keep the limit count for each box that's on the page but can not seem to come up with a solution.
If you need to know, I am using the jQuery plugin for the tags called Selectivity. However, I created the limit option myself as it did not include anything like that out-of-the-box.

I'm thinking that #JasonP meant this:
$('#bomtags').select3({
items: cities, //['red', 'green', 'blue'],
multiple: true,
allowClear: true,
placeholder: 'No permissions selected',
limit: 3,
tagLimit: 0, //<--- added custom jQuery option
tokenSeparators: ['|']
})
$('#bomtags1').select3({
items: cities, //['red', 'green', 'blue'],
multiple: true,
allowClear: true,
bgColor: 'rgba(255, 255, 255, 0.5)',
placeholder: 'No color selected',
limit: 3,
tagLimit: 0, //<--- added custom jQuery option
tokenSeparators: ['|']
})
The code above is where I placed the tagLimit option instead of a global variable that it used to be (var tagLimit = 0;).
And all tagLimit are turned into this.options.tagLimit.
Worked just fine after that :)
Thanks for the push in the right direction, Jason.

Jquery Datatable Page Number Issue

I am using Jquery Datatable in Asp.net Page. As we know that at bottom it shows message like "Showing 1 to 10 of 100" . But i am getting issue that whenever Page size is less than total records then at bottom i always get Message ""Showing 1 to 010 of 100". 0 is getting prefixed before End records. My code is as below
var pagesize = jQuery('#hdpagesize').val();
jQuery('#dyntable').dataTable({
"sPaginationType": "full_numbers",
"iDisplayLength": pagesize,
"aaSortingFixed": [[0, 'asc']],
"aoColumnDefs": [
{ 'bSortable': true, 'aTargets': [1] }
],
"fnDrawCallback": function (oSettings) {
jQuery.uniform.update();
}
});

I believe this is where iDisplayLength is being processed as a string as opposed to an integer.
Try using parseInt(pagesize, 10) and see what result is returned.
If that fixes the problem, then try and apply a server-side fix so that pagesize is processed and served as an integer.