persist the checkbox selection in the multipage pagination - javascript

i am trying to use the javascript for checkbox selection,
my pages are jsp pages, we have pagination but the checkbox selection is not persist when i move from one to another
can you some one help on this
var selectedUnits = [];
function selectCheckbox(data) {
if (selectedUnits.length < 1) {
selectedUnits.push(data.value);
}
else {
if (data.checked == true) {
if ($.inArray(data.value, selectedUnits) < 0) {
selectedUnits.push(data.value);
}
else {
selectedUnits.pop(data.value);
}
}
else {
selectedUnits.pop(data.value);
}
}
console.log(selectedUnits);
}

Could you use localStorage
https://developer.mozilla.org/es/docs/Web/API/Window/localStorage
becose you need to put the data array out of any navigation
and then "selectedUnits" put into
localStorage
Expect help you

Related

Angular Column is not Displayed when Toggle is Open

In my code, I have a grid list where the user can add a column by sliding a toggle button. The code works fine but when I refresh the page, the column is not there even though the toggle is open. I have to close the toggle and re-open it in order to see the column. Here is my code what should I fix?
HTML:
<mat-slide-toggle [(ngModel)]="this._materialPlan.IncludeAdditionalProduction"
(change)="toggleAdditionalProduction()" class="mr-8">Ek Üretim</mat-slide-toggle>
TS:
constructor() {
this.initializeGridColumns();
}
initializeGridColumns() {
this.displayedColumns = [
'Sequence',
'StockIntegrationCode',
'ReceiptName',
'PackagingTheoricYieldQuantity',
'GeoType',
];
let itemIndex = 0;
if (this._materialPlan.IncludeAdditionalProduction == true) {
this.displayedColumns.push("AdditionalProductionQuantity");
}
else {
itemIndex = this.displayedColumns.indexOf("AdditionalProductionQuantity");
if (itemIndex > 0) {
this.displayedColumns.splice(itemIndex, 1);
}
}
this.displayedColumns.push("Actions");
}
toggleAdditionalProduction() {
if (this._materialPlan.IncludeAdditionalProduction == true) {
this.form.controls["AdditionalProductionQuantity"].clearValidators();
this.form.controls["AdditionalProductionQuantity"].updateValueAndValidity();
} else {
this.form.controls["AdditionalProductionQuantity"].setValidators(Validators.required);
this.form.controls["AdditionalProductionQuantity"].updateValueAndValidity();
}
this.initializeGridColumns();
}
After toggle happens, you need to call " initializeGridColumns() " to initialize the columns again.
This is based on the explanation you had on your question. Also you dont really show what is the function does upon toggle.

How to synchronise ExtJS "checkboxes" (buttons) with Javascript/JQuery?

I am currently trying to synchronize two checkboxes on a page.
I need the checkboxes to be synchronized - to this end, I'm using a Tampermonkey userscript to pick up when one of them is clicked. However, I'm at a loss as to how to do it.
I believe they are not actually checkboxes, but ExtJS buttons that resemble checkboxes. I can't check whether they're checked with JQuery because of this: the checked value is appended to a class once the JS behind the button has run.
I have tried preventDefault and stopPropagation, but either I'm using it wrong or not understanding its' usage.
I'm not quite clever enough to just call the JS behind the box instead of an onclick event. Otherwise, that would solve my issue.
This is my code:
//Variables - "inputEl" is the actual button.
var srcFFR = "checkbox-1097";
var destFFR = "checkbox-1134";
var srcFFRb = "checkbox-1097-inputEl";
var destFFRb = "checkbox-1134-inputEl";
//This checks if they're synchronised on page load and syncs them with no user intervention.
var srcChk = document.getElementById(srcFFR).classList.contains('x-form-cb-checked');
var destChk = document.getElementById(destFFR).classList.contains('x-form-cb-checked');
if (srcChk == true || destChk == false) {
document.getElementById(destFFRb).click();
} else if (destChk == true || srcChk == false) {
document.getElementById(srcFFRb).click();
}
//This is where it listens for the click and attempts to synchronize the buttons.
$(document.getElementById(srcFFRb)).on('click', function(e) {
e.preventDefault();
if (document.getElementById(srcFFR).classList == document.getElementById(destFFR).classList) {
return false;
} else {
document.getElementById(destFFRb).click();
}
});
$(document.getElementById(destFFRb)).on('click', function(e) {
e.preventDefault();
if (document.getElementById(srcFFR).classList == document.getElementById(destFFR).classList) {
return false;
} else {
document.getElementById(srcFFRb).click();
}
});
I'm at a bit of a loss...any help would be greatly appreciated.
Figured it out - I was comparing class lists without singling out what I wanted to actually match.
My solution:
$(document.getElementById(srcFFRb)).on('click', function(){
if (document.getElementById(srcFFR).classList.contains('x-form-cb-checked')
== document.getElementById(destFFR).classList.contains('x-form-cb-checked')) {
return false;}
else {
document.getElementById(destFFRb).click();;
}});
$(document.getElementById(destFFRb)).on('click', function(){
if (document.getElementById(srcFFR).classList.contains('x-form-cb-checked')
== document.getElementById(destFFR).classList.contains('x-form-cb-checked')) {
return false;}
else {
document.getElementById(srcFFRb).click();;
}});

Hide navigation bar according to user role

Hey everyone i have tried to make three different navigationbars according to the users role. I only want one of the nav bars to be displayed according to if its a guest, user or admin. For now i just want to show the different navigationbar accoring to x=1 or not (se js code).
Can someone help me? I have tired everything by now. But it just wont work. Iam not that good at programming, so please dont make it to complicated.
Javascript file
x = 1
if (x==0) {
(#alle).show;
} else {
("#all").hide;
}
if (x==0){
("#user").show;
} else {
("#user").hide;
}
if (x==101){
("#admin").show;
} else {
("#admin").hide;
}
Use
document.querySelector('#all').style.display = 'none';
There is no built-in methods .hide() or .show() like jQuery has.
If I understand you correct then this is what you have to do:
x = 0;
//Check role, could also do this in switch statement.
//But for now like this since it might be easyer to understand.
//Probably if you copy paste this it wont work but I think this part is needed.
if (user == guest) {
x = 0;
} else if (user == user) {
x = 1;
} else if (user == admin) {
x = 2;
}
//Guest
if (x==0) {
(#alle).show;
} else {
("#alle").hide;
}
//user
if (x==1){
("#user").show;
} else {
("#user").hide;
}
//Admin
if (x==2){
("#admin").show;
} else {
("#admin").hide;
}

Prevent Looping in jQuery Advanced News Ticker (Forking/Modifying)

I realize this question is rather niche and should be directed at the author on github or otherwise.
But, the plug-in has not been updated in over 5 years, and, being a relatively straight forward plug-in, I"m trying to modify it so that it prevents it from looping elements when Previous or Next is clicked.
See here for a working example:
https://jsfiddle.net/zwb1vr96/2/
As you can see, hitting the Previous button while it is on 1 brings it to 3.
Similarly, if it's on 3 and you click Next, it loops back to 1.
As seen in the fiddle, I gave a length variable (var listlength = $("#newsticker li").length;) inside the plug-in function which tells me how many list (or li) items are in my list.
The next modification must be within these lines:
if(this.options.nextButton && typeof(this.options.nextButton[0]) !== 'undefined')
this.options.nextButton.click(function(e) {
this.moveNext();
this.resetInterval();
}.bind(this));
if(this.options.prevButton && typeof(this.options.prevButton[0]) !== 'undefined')
this.options.prevButton.click(function(e) {
this.movePrev();
this.resetInterval();
}.bind(this));
But I am kept up on the fact that this plug-in works by defining a set height and doesn't modify unseen li items.
Here's what I'm trying:
adding a var count = 0;
and to the next button
this.options.nextButton.click(function(e) {
if (count == 3) { return false; }
else { count++; }
as well as to the previous button
this.options.prevButton.click(function(e) {
if (count == 0) { return false; }
else { count--; }
It works to an extent-- but is still buggy and is not giving the proper count to return false on.
JsFiddle Attempt
How can I create a variable within these Previous and Next script functions above to know which list item it is currently on (in the jsfiddle example - 1, 2, or 3) and subsequently prevent the event from firing if my list item is on 1 when the Previous button is clicked as well as prevent the firing of the Next button if the list item being shown is at 3 (hence preventing the looping feature as described above).
Your problem is, that the ticker has no option to prevent the constant auto-removal/appending of ticker items as it animates:
you might consider this alternative plugin that has an option of autoAppend which you could set to false, then I would expect that the ticker stops at the end without looping (also if you manually control it).
Well I did find a solution -- it seems rather basic but it does function at least in my limited example:
https://jsfiddle.net/8fcz9470/5/
new variables in js function
var listlength = $("#newsticker li").length;
var count = 1;
And them modifying the Next Button
this.options.nextButton.click(function(e) {
if (count == 3) {
alert(count);
return false;
}
else if (count < 3) {
count++;
alert(count);
this.moveNext();
this.resetInterval();
}
}.bind(this));
And Previous button
this.options.prevButton.click(function(e) {
if (count == 1) { alert(count); return false; }
else if (count > 0) {
count--;
alert(count);
this.movePrev();
this.resetInterval();
}
}.bind(this));
If anyone sees any potential issues with this method, feel free to chime in with a better answer (as like I said, it does seem rather basic)! Thanks.
edit:
Actually, for dynamic variables, this seems to be working within the js code:
. . . . .
Plugin.prototype = {
init: function() {
var count = 1;
var listlength = $("li").length;
. . . . .
. . . . .
. . . . .
. . . . .
if (this.options.nextButton && typeof(this.options.nextButton[0]) !== 'undefined')
this.options.nextButton.click(function(e) {
if (count == listlength) {
return false;
} else if (count < listlength) {
count++;
this.moveNext();
this.resetInterval();
}
}.bind(this));
if (this.options.prevButton && typeof(this.options.prevButton[0]) !== 'undefined')
this.options.prevButton.click(function(e) {
if (count == 1) {
return false;
} else if (count > 0) {
count--;
this.movePrev();
this.resetInterval();
}
}.bind(this));

Changing jqtransform radio button class via JavaScript

I am trying to get my jqtransform'd radio buttons to switch to "checked" via my rowover javascript that I was already using.
Here is the script for the row over effect without the jqtransform:
function selectRowEffect(object, buttonSelect) {
if (!selected) {
if (document.getElementById) {
selected = document.getElementById('defaultSelected');
} else {
selected = document.all['defaultSelected'];
}
}
if (selected) selected.className = 'moduleRow';
object.className = 'moduleRowSelected';
selected = object;
// one button is not an array
if (document.checkout_address.shipping[0]) {
document.checkout_address.shipping[buttonSelect].checked=true;
} else {
document.checkout_address.shipping.checked=true;
}
}
function rowOverEffect(object) {
if (object.className == 'moduleRow') object.className = 'moduleRowOver';
}
function rowOutEffect(object) {
if (object.className == 'moduleRowOver') object.className = 'moduleRow';
}
//--></script>
Currently if I click on the row, it will actually select the radio button in my form but the jqtransform does not reflect that so it still looks like it is not clicked. I tried adding something like
jqTransformRadio.addClass("jqTransformChecked");
My JavaScript knowledge is quite limited. Any help is greatly appreciated.
I think you can change the your selectRowEffect() function like this:
function selectRowEffect(object, buttonSelect) {
if (!selected) {
if (document.getElementById) {
selected = document.getElementById('defaultSelected');
} else {
selected = document.all['defaultSelected'];
}
}
if (selected) selected.className = 'moduleRow';
object.className = 'moduleRowSelected';
selected = object;
// Get checkbox element inside the row, then trigger the 'click' event.
$('.jqTransformRadio', object).trigger('click');
}
I haven't tested the code yet, but I think it will work

Categories