Bootstrap 5 collapse show/hide not working when invoked with JS - javascript

I am attempting to use javascript to show or hide a collapsable element but not both.
(that is to say i dont want toggle to be enabled)
according to the documentation
https://getbootstrap.com/docs/5.0/components/collapse/#via-javascript
i can do something like this to trigger toggling between shown and hidden
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: true
})
of course if i change toggle to false it stops it from doing anything - as expected.
however it also says i can use the show and hide properties on an object passed as the second array to enable/disable these behaviors
like so
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false,
show: true,
hide: false
})
but if i try to use these options only toggle works
I looked at the BS js and found that it does check the status of toggle
if (_this._config.toggle) {
_this.toggle();
}
however there is no equivalent for show and hide which suggests to me that the show and hide options of the bootstrap.Collapse() object do nothing.
Am I correct in my belief that the show and hide options dont work when using bootstrap.Collapse()?
If no what am i doing wrong.

toggle is both a config option, and a method .toggle()
show() and hide() are methods, not config options.
Therefore, using show and hide and as config options does nothing...
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false,
show: true, //useless
hide: false //useless
})
However, show and hide work as methods...
bsCollapse.show()
or
bsCollapse.hide()
Demo

If you want to toggle the collaspe :
new bootstrap.Collapse(myCollapse, {
toggle: true
});
- toggle option must be true.
=> Toggles the collapsible element on invocation of the instance constructor.
- no nead to point a variable to the collapse instance.
if you want to show or hide the collapse :
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
bsCollapse.show();
or
bsCollapse.hide();
- toggle option must be false.

Related

How Do I Manipulate UIkit confirm dialog while using it in angular

So I wanted to manipulate/customize UIkit confirm modal's styles on my own but I am not able to do it in angular
UIkit.modal.confirm('My message!', {
labels: {
cancel: 'No',
ok: 'Yes'
}
});
this i did but I wanna change the modal's background color, buttons color,font style,font color and I wanna make the confirm modal appear in the middle
I did things like adding 'cls' below the label object like
UIkit.modal.confirm('My message!', {
labels: {
cancel: 'Abort mission',
ok: 'Everthing is fine'
},
cls:'my-class'
});
and wrote a css for it in the corresponding css it didn't made a change
and i tried
var confirmBtn = document.querySelector('.uk-modal-footer .uk-button-primary'); confirmBtn.style.backgroundColor = '#ff0000'; var cancelBtn = document.querySelector('.uk-modal-footer .uk-button-default'); cancelBtn.style.backgroundColor = '#00ff00';
It's not working and also the 'promise' i.e. using of 'then' function is not working for the two buttons yes and no if I do any of these things

Angular Slickgrid | How to Enable/Disable checkbox dynamically (Not show/hide checkbox)

export class Example1 implements OnInit {
prepareGrid() {
this.gridOptions = {
enableRowSelection: true,
enableCheckboxSelector: true,
checkboxSelector: {
// you can override the logic for showing (or not) the expand icon
// for example, display the expand icon only on every 2nd row
selectableOverride: (row: number, dataContext: any, grid: any) => (dataContext.id % 2 === 1)
},
multiSelect: false,
rowSelectionOptions: {
// True (Single Selection), False (Multiple Selections)
selectActiveRow: true,
},
};
}
}
We can use enableCheckboxSelector to show/hide checkbox. But how to enable/disable checkbox based on some condition dynamically ?
The question is already answered in the Wiki documentations, you can use selectableOverride, refer to Row Selection - Wiki, but it seems that you already have that code, or maybe you didn't understand what that was for?
If you want to change the selected row(s) at any point in time, then simply use the built-in SlickGrid method setSelectedRows(rowIndexes) which requires an array of row indexes, passing an empty array will clear all selections.
<angular-slickgrid
gridId="grid4"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset"
(onAngularGridCreated)="angularGridReady($event)"> <!-- <<== you need this line !-->
</angular-slickgrid>
angularGridReady(angularGrid: AngularGridInstance) {
this.angularGrid = angularGrid;
}
changeRowSelection() {
angularGrid.slickGrid.setSelectedRows(rowIndexes);
}

Table Sorter sorting and filtering didn't work

I have dynamically table and I use table sorter pager is working well, but when I try to filter some columns it just returns me to page 0 and nothing happened. Somewhere I try to sort them by clicking on th and other strange thing is when I type in the input box debug mode on table sorter say is ok.
var $table = $(".track-grid table.tablesorter");
var pagesize = $('.pagesize').val();
$table.tablesorter({
widthFixed: true,
cssChildRow: 'infoRow',
widgets: ['filter'],
debug: true,
widgetOptions: {
filter_hideFilters: true,
// filter_anyMatch replaced! Instead use the filter_external option
// Set to use a jQuery selector (or jQuery object) pointing to the
// external filter (column specific or any match)
filter_external: '.search',
// add a default type search to the first name column
//filter_defaultFilter: { 1: '~{query}' },
// include column filters
filter_ignoreCase:false
}
});
$table.on('filterInit', function () {
$table.tablesorterPager({
container: $(".pager"),
ajaxUrl: `track/getEvents?page={page}&size={size}&totalCount=` + totalCount,
customAjaxUrl: function (table, url) {
return url;
},
ajaxProcessing: function (data) {
$('.tablesorter tbody').html(data.result.eventsHtml);
$('#trackOverlay').hide();
return [parseInt(data.result.totalEventsCount)];
},
page: 0,
processAjaxOnInit: true,
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
updateArrows: true,
fixedHeight: false,
removeRows: false,
savePages: false,
cssNext: '.next', // next page arrow
cssPrev: '.prev', // previous page arrow
cssFirst: '.first', // go to first page arrow
cssLast: '.last', // go to last page arrow
cssGoto: '.gotoPage', // page select dropdown - select dropdown that set the "page" option
cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
cssDisabled: 'disabled', // Note there is no period "." in front of this class name
cssErrorRow: 'tablesorter-errorRow' // error information row
});
});
The ajaxUrl option needs to include a filter value. If you look at the example in the documentation, you'll see this:
ajaxUrl: "http://mydatabase.com?page={page}&size={size}&{sortList:col}&{filterList:fcol}",
The {filterList:fcol} adds the filter to the server request.
If the built-in implementation doesn't work for you, use the customAjaxUrl callback to modify the ajax url.

Extjs 5.1 Dynamic addition of container to panel

What i am trying to do is dynamically add container to panel on click of button.
1st instance of container gets added and can be seen in the panel.items.length
2nd instance onwards the panel.items.length doesn't change. but the panel can be seen in dom and on screen.
Just wanted to know why the panel.items.length is not increasing. Is it a bug?
Fiddler link https://fiddle.sencha.com/#fiddle/p3u
Check for the line :
console.log(qitems);
below debugger; it is set to questionsblock.items.length that i am talking about.
Remove the itemId from QuestionTemplate and remove renderTo from the new instance.
Your click handler should look like this:
listeners: {
'click': function(button) {
var questionPanel = button.up('form').down('#questionsblock'),
qitems = questionPanel.items.length,
questiontemplate = Ext.create('QuestionTemplate', {
qid: qitems,
questiontype: 'text'
});
console.log(qitems);
questionPanel.add(questiontemplate);
questionPanel.doLayout();
}
}
Check this fiddle: https://fiddle.sencha.com/#fiddle/p47

Options not cleared from previous call jQuery

I've made this little plugin to show Twitter style alerts:
jQuery.fn.myAlert = function (options) {
var defaults = {
message: false,
class: 'normal',
timer: 500,
delay: 3000,
};
var options = $.extend(defaults, options);
if (!options.message || options.message == '') {
return false;
}
$('body').append('<div id="alert_notification" class="'+options.class+'"><div id="alert_message">' + options.message + '</div></div>')
$('#alert_notification').slideToggle(options.timer).delay(options.delay).slideToggle(options.timer);
return;
}
The problem is: first time it works great, but when I call again in the same page, the values are set from previous call.
Any ideas how to make it work?
My guess is that the slideToggle() isn't showing the <div> you are intending it to show because jQuery isn't appending new <div>s that don't have unique IDs. You should probably remove the originally appended <div>s from the page before appending the new ones. Or, make jQuery replace the existing ones.
$('#alert_notification').remove();
$('body').append(...);
In addition, class is a reserved word in JavaScript. I would change your defaults to:
var defaults = {
message: false,
'class': 'normal',
timer: 500,
delay: 3000,
};
And then access it with options['class'] instead of options.class, or pick a different name for the class property.

Categories