Angular Column is not Displayed when Toggle is Open - javascript

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.

Related

Javascript not functioning when clicking the back button

I have this code in place
let showAboutSection = () => {
if(userInfo.logged && userInfo.subscriber && !userInfo.in_trial) {
let section = document.querySelector('.cbt-tabs')
if(section) {
if(!section.classList.contains('touched')) {
section.style.display = 'block'
section.classList.add('touched')
return
}
}
}
setTimeout(showAboutSection, 500)
}
showAboutSection()
But if you click on the back button or on one of my navigation tabs without refreshing the screen, it does not function. Please help!

How to disable or hide a button in intro.js for a specific step?

Currently, I am facing an issue, when I try to disabling a button in a particular step ?
my code is like this
var intro = introJs();
intro.setOptions({
steps: [
{
element: "#add_temp",
intro: "Add your template"
},
{
element: "#addButton",
intro: "Please click on add button ",
position:'left',
hideNext: true
}
],
})
I believe that is not possible. Why would you want to hide the next button anyway? You can, however, use hideNext to hide the next button on the last tip or use showButtons to hide all navigation buttons. Read Intro.js docs for available options.
The above method will not work if there is a run type of validation checking. For example, if that element is a check box or input field and until the user selects it or fill it up the next button will not be activated. In that scenario, we have to follow the below process.
.ts file
this.introJS.onafterchange(() => {
var original_onclick = $('.introjs-nextbutton').get(0).onclick;
// == taxId field checking ===
if (this.introJS._currentStep === 1) {
if (this.addEntityForm.controls.taxId.value !== '') {
$('.introjs-nextbutton').removeClass('introjs-disabled');
$('.introjs-nextbutton').get(0).onclick = original_onclick;
} else {
$('.introjs-nextbutton').addClass('introjs-disabled');
$('.introjs-nextbutton').get(0).onclick = null;
}
}
}
addTaxId(value: string): void {
if (value !== '') {
$('.introjs-nextbutton').removeClass('introjs-disabled');
$('.introjs-nextbutton').get(0).onclick = original_onclick;
} else {
$('.introjs-nextbutton').addClass('introjs-disabled');
$('.introjs-nextbutton').get(0).onclick = null;
}
}
HTML:
<input formControlName="taxId" type="text" class="form-border-bottom" #taxId (keyup)="addTaxId(taxId.value)">

Unwanted scroll after button click

I am not really sure what code to post here because I don't know what could cause this and the code for this page is quite long, there is still no live version.
Basically it's a form with a few panels, only 1 is visible, when you click next the user is moved to the next screen. What happens is that when you click next there is an unwanted scroll to the footer, any idea what could cause this? view gif below:
EDIT: This is the button code:
Next
and jQuery:
$('.btn-next').on('click', function(e){
if (!$("[name='amount_tobe_charged']").val()) {
alert('Please fill in amount');
} else if($("[name='amount_tobe_charged']").val() < 1) {
alert('Please enter amount');
} else {
var tab = $(this).closest('.tab-pane');
var nxt = $(tab).next();
var empty = $(tab).find('.required').filter(function(){
if($(this).attr('type') === 'email'){
return this.value.indexOf('#') < 0;
} else {
return $.trim(this.value) === '';
}
});
var error = $(empty[0]).attr('data-error') || 'Please fill in all fields';
if(nxt.attr('id') === 'finish-tab'){
submitForm(tab, nxt);
} else {
if(!empty.length) {
changeTab(tab, nxt);
} else {
alert(error);
}
}
}
You can see it happening in your gif. It's because you're hiding a column that comes before the form, therefore once the column does not exist. It will push you down. You can add a scroll to get around with issue with jQuery (or vanilla but I will only provide jQuery's smooth scroll). Either implement the below and remove the style="display: none;" that's causing it to shift.
$('html, body').animate({
scrollTop: $(".form-elem").offset().top
}, 2000);
You'll want to place this after the column is hidden in your JS code.

persist the checkbox selection in the multipage pagination

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

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