Develop Reference

Dynamically populated bootstrap multiselect not displaying options when in a dropdown

When I place a dynamically populated multiselect in a dropdown overlay, the multiselect's dropdown does not display when clicked. The exact same multiselect works just fine when it's not in a dropdown. See a fiddle that reproduces the issue here http://jsfiddle.net/yhnukfsz/6/ (started with the answer to this question).
The broken multiselect in question:
<div class="btn-group">
<button type="button" id="dropBtn" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<form>
<select class="form-control" id="mult2" multiple="multiple">
</select>
<button>
foobar
</button>
</form>
</li>
</ul>
</div>
And the JS:
$('.dropdown-menu').on('click', function(event) {
event.stopPropagation();
});
$('.selectpicker').selectpicker({
container: 'body'
});
$('body').on('click', function(event) {
var target = $(event.target);
if (target.parents('.bootstrap-select').length) {
event.stopPropagation();
$('.bootstrap-select.open').removeClass('open');
}
});
setUpMultiselect('#mult1');
setUpMultiselect('#mult2');
function setUpMultiselect(id) {
$(id).multiselect({
enableFiltering: true,
includeFilterClearBtn:false,
enableCaseInsensitiveFiltering: true,
selectAllJustVisible : true,
includeSelectAllOption : true,
nonSelectedText:"Filter ...",
numberDisplayed : 1
});
const options = [
{
title: 'title1', label: 'label1', id: 'id1', selected: true,
},{
title: 'title2', label: 'label2', id: 'id2', selected: true,
},{
title: 'title3', label: 'label3', id: 'id3', selected: true,
}]
$(id).multiselect('dataprovider', options);
$(id).multiselect('rebuild');
}
$('#dropBtn').click(() => {
setTimeout(() => {
setUpMultiselect('#mult1');
setUpMultiselect('#mult2');
}, 500)
})
Additional things I've tried that haven't fixed the issue include rebuilding/reinitializing the multiselect on the dropdown click event with and without a delay.

Conditional button in columns Grid

I'm trying to include a button in Columns Grid using Syncfusion GRID for Javascript (ejGrid) :
$("#Grid").ejGrid({
dataSource: ej.DataManager({
.
columns: [
.
.
{ headerText: 'Detail', template: '<a class="btn btn-info" rel='nofollow'
rel='nofollow' href="/ServicesOrder/Detail/{{:ServicesOrderId}}">Detail</a>,<a class="btn btn-sucess" >Finish</a> ,
'<a class="btn btn-danger" >In progress</a>' },
Indeed, i have a variable Rest (rest of payment) in my table ServicesOrder, my goal is to display one of the two butons (finish or In progress) :
if (Rest == 0)
Only display -->
{ headerText: 'Detail', template: '<a class="btn btn-info" rel='nofollow'
rel='nofollow' href="/ServicesOrder/Detail/{{:ServicesOrderId}}">Detail</a>,<a class="btn btn-sucess" >Finish</a> ' },
Else
Only display -->
{ headerText: 'Detail', template: '<a class="btn btn-info" rel='nofollow'
rel='nofollow' href="/ServicesOrder/Detail/{{:ServicesOrderId}}">Detail</a>,<a class="btn btn-danger" >In progress</a>' }, `

We have achieved your requirement using columnTemplate feature and JS render if else condition. Based on the Verified column value, button will be rendered.
Refer the below code example
`<script type="text/x-jsrender" id="columnTemplate">
{{if Verified}}
<a class="btn btn-info" rel='nofollow' rel='nofollow' href="/ServicesOrder/Detail/{{:ServicesOrderId}}">Detail</a>,<a class="btn btn-sucess">Finish</a>
{{else}}
<a class="btn btn-info" rel='nofollow' rel='nofollow' href="/ServicesOrder/Detail/{{:ServicesOrderId}}">Detail</a>,<a class="btn btn-danger">In progress</a>
{{/if}}
</script>
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
// the datasource "window.employeeView" is referred from jsondata.min.js
dataSource: window.gridData,
allowPaging: true,
pageSettings: { pageSize: 4 },
columns: [
{ field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 90 },
{ field: "CustomerID", headerText: "Customer ID", width: 150 },
{ field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 100 },
{ field: "OrderDate", headerText: "Order Date", textAlign: ej.TextAlign.Right, width: 100, format: "{0:MM/dd/yyyy}" },
{ field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, format: "{0:C}" },
{ field: "Verified", headerText: "Verified", width: 100 },
{ headerText: "Employee Image", template: "#columnTemplate", textAlign: "center", width: 110 },
]
});
});
</script>`
Refer the below sample
Sample: https://jsplayground.syncfusion.com/x33fazrh
Refer the help documentation for your reference
https://help.syncfusion.com/js/grid/columns#column-template
https://www.jsviews.com/#iftag

bootstrap confirmation is not working in partial view

I am working in one project with ASP.NET MVC having bootstrap, jquery and I have one main page inside that I have bind one partial view.
I have used bootstrap.confirmation in my application and it is working fine in all the main pages but when I try to implement in partial view html, it is not working.
My Code:
HTML
<a class="tooltips deleteOrg" data-container="body" data-placement="bottom" data-toggle="confirmation" data-original-title="Delete organization" data-id="#organization.Id">
<i class="fa fa-trash"></i>
</a>
JavaScript
$(document.body).on('confirmed.bs.confirmation', '.deleteOrg', function () {
var id = $(this).data('id');
});

$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
onConfirm: function() {
var id= $(this).data('id');
alert(id);
},
buttons: [
{
class: 'btn btn-primary',
label:"yes",
icon:"glyphicon glyphicon-ok"
},
{
class: 'btn btn-danger',
label:"no",
icon: 'glyphicon glyphicon-remove',
}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mistic100-Bootstrap-Confirmation/2.4.0/bootstrap-confirmation.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<a class="tooltips deleteOrg" data-container="body" data-placement="bottom" data-toggle="confirmation" data-original-title="Delete organization" data-id="test">
Click
</a>

Bootstrap table actions not working on next page

Currently I am working on a page with Bootstrap tables. These tables are autofilled. On the first page there are no problems to eliminate an element, because there is a confirmation message to eliminate.
When I go to the next page, and I want to eliminate the click on the "x" to eliminate it makes the action of deleting, but no confirmation message appears.
Here is the code
can('delete', $unit)
<form id="{{ $unit->id }}" style="display: inline-block;" method="post" action="{{ url("estates/$estate->uid/units/$unit->uid") }}">
{{ csrf_field() }}
<input type="hidden" name="_method" value="delete">
<button id="deleteUnit-{{ $unit->id }}" class="btn btn-simple btn-danger eliminar" rel="tooltip" data-placement="left" title="Eliminar" name="eliminar" data-id="{{ $unit->id }}">
<i class="fa fa-times"></i>
</button>
</form>
#endcan
and
$().ready(function(){
window.operateEvents = {
'click .edit': function (e, value, row, index) {
info = JSON.stringify(row);
// swal('You click edit icon, row: ', info);
console.log(row.actions);
},
'click .remove': function (e, value, row, index) {
console.log(row);
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
});
}
};
$table.bootstrapTable({
toolbar: ".toolbar",
showRefresh: false,
search: true,
showToggle: false,
showColumns: true,
pagination: true,
searchAlign: 'left',
pageSize: 10,
clickToSelect: false,
pageList: [10, 15, 20],
formatShowingRows: function(pageFrom, pageTo, totalRows){
$(window).resize(function () {
$table.bootstrapTable('resetView');
});
//do nothing here, we don't want to show the text "showing x of y from..."
},
formatRecordsPerPage: function(pageNumber){
return pageNumber + " rows visible";
},
icons: {
refresh: 'fa fa-refresh',
toggle: 'fa fa-th-list',
columns: 'fa fa-columns',
detailOpen: 'fa fa-plus-circle',
detailClose: 'fa fa-minus-circle'
}
});
//activate the tooltips after the data table is initialized
$('[rel="tooltip"]').tooltip();
$(window).resize(function () {
$table.bootstrapTable('resetView');
});
$('[id^="deleteUnit-"]').on('click', function (e) {
event.preventDefault();
var id = $(this)[0].getAttribute('data-id');
swal({
title: '¿Estás seguro?',
text: "No es posible deshacer esta acción!",
type: "warning",
showCancelButton: true,
cancelButtonText: "Cancelar",
confirmButtonClass: "btn btn-info btn-fill",
confirmButtonText: "Si, eliminar",
cancelButtonClass: "btn btn-danger btn-fill",
closeOnConfirm: false,
closeOnCancel: true
}, function(isConfirm){
if (isConfirm){
document.getElementById(id).submit();
}
});
});
});
Here is an imageScreenshoot

Load menu just when it is needed

I get my page overloaded after I add to many contents
I'm calling contextmenu (righmenu) via javascript but when it haves many contents pages loads so slowly
here is my JavaScript rightClick menu:
<script>
$(document).ready(function() {
context.init({preventDoubleContext: false});
context.attach('#ID', [
{text: '<i class="el-icon-download-alt" style="color: #1AADC1"></i> Download', href: '#', extra: 'target="_blank"'},
{divider: true},
{text: '<i class="el-icon-link" style="color: #3CC8DB"></i> Export Link', href: '#link_ID', extra: 'class="popup-with-form"'},
{text: '<i class="el-icon-share-alt" style="color: #3CC8DB"></i> Share', subMenu: [
{text: '<i class="fa fa-envelope fa-lg" style="color: #009688"></i> Email', href: '#', target:'_blank', },
{text: '<i class="fa fa-facebook fa-lg" style="color: #0D47A1"></i> Facebook', href: '#', target:'_blank', },
{text: '<i class="fa fa-google-plus fa-lg" style="color: #F44336"></i> Google+', href: '#', target:'_blank', },
{text: '<i class="fa fa-twitter fa-lg" style="color: #42A5F5"></i> Twitter', href: '#', target:'_blank', }
]},
{divider: true},
{text: '<i class="el-icon-remove" style="color: #DB3C4C"></i> Delete', href: '#del_ID', extra: 'class="modal-basic"'},
{text: '<i class="el-icon-font" style="color: #3CDBAE"></i> Edit', href: '#', extra: 'class="simple-ajax-popup"'},
{divider: true},
{text: '<i class="el-icon-cog" style="color: #48A360"></i> Properties', href: '#info_ID', extra: 'class="popup-with-form"'},
]);
context.settings({compress: true});
});
</script>
ID is different on all.
HTML code:
<div id="ID" class="thumbnail">
<label for="cID"><div class="thumb-preview">
<a class="thumb-image" href="<TMPL_VAR img_preview>">
<img src="#" class="img-responsive" alt="Project">
</a>
<div class="mg-thumb-options">
<div class="mg-toolbar">
<div class="mg-option checkbox-custom checkbox-inline">
<input type="checkbox" name="demo" id="cID" value="ID">
<label for="c<TMPL_VAR file_id>">SELECT</label>
</div>
</div>
</label>
</div>
<h5 class="mg-title text-weight-semibold">Demo Test</h5>
So I have that it's okay if i have just 4 or 5 content but up of that its slow down my site,
I want to have just one dropdown menu, menus I dont need to add JavaScript code for all HTML content.

Don't put your HTML code in jQuery function. Instead use jQuery to only hide or show the drop down menu. No need to add HTML inside it. Put the HTML back wrap it with a div. Show/hide that div using jQuery $(#id).show()/hide().