We Keep Coding

Buttons in the first column disappear when sorting the table

I have a datatable that shows mock json data retrieved from a text file. I have removed the first column as it contains the id and it isn't ideal to display the id on the table. I appended a buy button on each row on the first column only. However, when I sort the table the button disappears and the original first column data also appears.
JavScript:
$(document).ready(function() {
$.getJSON('/apps/mchp/clientlibs/clientlib-site/components/parametrictable/data.txt', function(json) {
var data = json.data;
var $thead = $('#parametrictable').find('thead');
var tr = $("<tr>");
$thead.append(tr);
var columns = [];
var obj = Object.keys(data[0]);
console.log(data[0])
var button = '<div class="left-btn"><i class="download fas fa-file-download"></i></div><div class="right-btn"><div class="input-group"><div class="input-group-area"><input type="text" value="100"></div><div class="input-group-icon">BUY</div></div></div>';
$.each(data[0], function(name, value) {
var column = {
"data": name,
"title":name
};
$('tr').find('th:first-child',).remove();
columns.push(column);
});
for (i=1; i<obj.length; i++) {
$(".dropdown-content").append('<li><input type="checkbox" class="dropcheck" data-column="'+i+'"/>'+obj[i]+'</li>');
}
var table= $('#tableId').DataTable({
data: data,
columns: columns,
columnDefs: [ {
orderable: true,
className: 'select-checkbox',
targets: 1
} ],
select: {
style: 'multi',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]]
});
$('tr').find('th:first-child').remove();
$('tr').find('td:first-child').remove();
$('tr').find('td:first-child').append(button);
$('tr').on('change', function(e){
e.preventDefault();
console.log('change!');
});
$('input[type=checkbox]').on( 'change', function (e) {
e.preventDefault();
var column = table.column( $(this).attr('data-column') );
column.visible( ! column.visible() );
} );
$('.show-all').on( 'click', function (e) {
e.preventDefault();
var obj = Object.keys(data[0])
for (i=1; i<obj.length; i++) {
var col = table.columns([i]);
if (col.visible().join(', ') == 'false') {
col.visible(true);
$(".dropcheck").prop("checked", false);
}
}
} );
});
})

First, it is not a good practice to hide datatable columns by .remove(), datatables have a built-in code for that by columnDefs refer:
https://datatables.net/examples/basic_init/hidden_columns.html
Second, that is not the right way to append data/html in datatable columns, use rowCallback function for datatable, see:
columnDefs: [
{
"targets": [ 0 ],
"visible": false,
"searchable": false
},
],
rowCallback: function(row, data, index) {
if($('td:eq(1)', row).find('.download').length == 0)
{
$('td:eq(1)', row).append(button);
}
},
When using datatable sort or search or any datatable actions it always refreshes the table therefore, any initialization before the action will be disregarded unless executed again.

How to Reinitialize Table controller list using Jquery datatable

I have used 2 table one with oututField and another with InputFields in my code and using jquery datatable i am constructing a table.
Button Clicks: Edit -- Opens Datatable in Edit Mode (Input Field)
Cancel -- Opens datatable in ReadOnly Mode(OutputField)
Desc: When i click Edit Button, Table is opened in EDIt MODE, if i change some values of input field and click cancel, rendered table in RO mode.
Problem: If again i click Edit button the changes i have made in last step persist.
I want: Table list should be refreshed from DB and should show original list.
Script Tag:
<apex:outputPanel id="DtscriptId">
<script>
var j$ = jQuery.noConflict();
var EditCheck = "{!EditCancelDispCheck}";
var extdisplayPopup ="{!extdisplayPopup}";
console.log('EditCheck'+extdisplayPopup);
var table;
if(EditCheck == 'false' || extdisplayPopup == 'false'){
console.log('Inside Data Table Script1');
document.getElementById("divextdataEditTableId").style.display = "none";
document.getElementById("divextdataTableId").style.display = "block";
table = $('#extdataTableId').DataTable();
}
if(EditCheck == 'true'){
document.getElementById("divextdataTableId").style.display = "none";
document.getElementById("divextdataEditTableId").style.display = "block";
$("#extdataEditTableId").fadeTo(0,1.00);
$('#extdataEditTableId').DataTable().destroy();
$.fn.dataTable.ext.order['dom-select'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('select', td).val();
} );
}
/* Create an array with the values of all the input boxes in a column, parsed as numbers */
$.fn.dataTable.ext.order['dom-text-numeric'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).val().replace(/\s/g,'') * 1;
} );
}
/* Create an array with the values of all the input boxes in a column */
$.fn.dataTable.ext.order['dom-text'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).val().replace( /,/g, "." ).replace(/\s/g,'') * 1;
} );
}
/* Initialise the table with the required column ordering data types */
$('#extdataEditTableId').DataTable( {
"bDestroy" : true,
"columns": [
null,
{ "orderDataType": "dom-select" },
null,
null,
{ "orderDataType": "dom-select" },
{ "orderDataType": "dom-select" },
{ "orderDataType": "dom-text-numeric" },
{ "orderDataType": "dom-text"},
null
]
} );
}
if(extdisplayPopup == 'true'){
$("#extdataEditTableId").fadeTo(0,0.4);
}
function renderFirstTable(){
document.getElementById("divextdataEditTableId").style.display = "none";
document.getElementById("divextdataTableId").style.display = "block";
var dataTable = $('#extdataTableId').DataTable();
dataTable.clear();
<apex:repeat value="{!existingRowList}" var="i">
dataTable.row.add([
'{!i.Product__r.Name}',
'{!i.OS__c}',
'{!opportunitymarket}',
'{!opportunitycountry}',
'{!i.Quarter__c}',
'{!i.Year__c}',
'{!i.Quantity__c}',
'{!i.Total__c}',
'{!opportunitycurrency}'
]).draw();
</apex:repeat>
}
</script>
</apex:outputPanel>
I want: Is there any possibility to refresh Edit Table with DB list using jquery and render the script panel only, because if I render the table panel it looses it's jquery Datatable property.

You do not need JQuery to do what you are trying to do.
I would suggest you create a class Property in your Extension or Custom Controller class to keep the state of the edit mode:
public with sharing class ExampleExtensionClass {
public Boolean editMode {
get {
if (editMode == null) {
editMode = false;
}
return editMode;
}
set;
}
}
Then in your VF page you can bind a Apex Action Function to a Checkbox onchange event to rerender the table in edit mode:
<apex:page standardController="SObject" extensions="ExampleExtensionClass">
<apex:actionFunction name="rerenderTable" reRender="tablePanel"/>
<apex:inputCheckbox value="{!editMode}" onChange="rerenderTable();"/>
<apex:outputPanel layout="block" id="tabelPanel">
<apex:dataTable value="{!sObjectList}" var="sObjectrecord">
<apex:column>
<apex:outputField value="{!sObjectrecord.Name}" rendered="{!NOT(editMode)}"/>
<apex:inputField value="{!sObjectrecord.Name}" rendered="{!editMode}"/>
</apex:column>
</apex:dataTable>
</apex:outputPanel>
</apex:page>

I solved the problem.
Rendering won't solve the problem as inputfield binds the value and to refresh it there are two ways
Refresh the list in jquery(as no matter you refersh in controller or use any other list it won't leave the value)
copy the data of output field to input field on cancel.
function ResetValues(){
var opptid ="{!opptid}";
result = sforce.connection.query("select id, Country__c,Price_Per_Unit__c, Product__r.Name, Quantity__c, OS__c, Quarter__c, Total__c, Year__c from Shipped_Units__c where opportunity__c = '"+opptid+"'");
records = result.getArray("records");
for (i = 0; i < records.length; i++) {
console.log('records1'+records[i].Quantity__c);
var inpos = i +'-inpOS';
var inpqtr = i +'-inpQtr';
var inpyear = i +'-inpYear';
var inpunit = i +'-inpUnit';
var inptotal = i +'-inpTotal';
var osid=document.getElementById(inpos).childNodes[0];
var qtrid=document.getElementById(inpqtr).childNodes[0];
var yearid=document.getElementById(inpyear).childNodes[0];
var unitid=document.getElementById(inpunit).childNodes[0];
var totalid=document.getElementById(inptotal).childNodes[0];
document.getElementById(osid.id).value=records[i].OS__c;
document.getElementById(qtrid.id).value=records[i].Quarter__c;
document.getElementById(yearid.id).value=records[i].Year__c;
document.getElementById(unitid.id).value=parseInt(records[i].Quantity__c);
document.getElementById(totalid.id).value=parseInt(records[i].Total__c);
}
}
or Similar to below line of code
j$(InpIdmodsp).val(document.getElementById(outsp.id).innerText);

How can I kill all my functions after execution?

I have a condition column == 1 and if this is the case, the function MakeCellsEditable and the function myCallbackFunction are initialized:
<script src="https://raw.githubusercontent.com/ejbeaty/CellEdit/master/js/dataTables.cellEdit.js"></script>
$(document).ready(function () {
var table = $('#myTable').DataTable();
$('#myTable tbody').on('mousedown', 'td', function () {
$('#myTable').data('column', table.cell(this).index().columnVisible);
});
if (column == 1) {
table.MakeCellsEditable({
"onUpdate": myCallbackFunction
});
}
});
function myCallbackFunction(updatedCell, updatedRow, oldValue) {
var array = updatedRow.data();
var id = array[0];
var column = $('#myTable').data('column');
console.log("The column is: " + column);
jQuery.ajax({
type: "POST",
url: "update.php",
data: {
updatedCell: updatedCell.data(),
id: id,
column: column,
},
cache: false
});
}
What I want to do is, after the functions are executed, I want to kill them. Because otherwise if I one time clicked column 1, then all my tables are editable (not only column 1).
I tried table.unbind(); or table.die(), but this didn't work out.
I tested at the end of the code:
function destroyTable() {
if ($.fn.DataTable.isDataTable('#myTable')) {
table.destroy();
table.MakeCellsEditable("destroy");
}
}
But it didn't work out

To answer the question in the headline: Yep:
function thiswilljustworkonce(){
alert("once");
this.thiswilljustworkonce=function(){};
}
thiswilljustworkonce();
thiswilljustworkonce();

Use columns option for CellEdit plugin to specify which column needs to be editable. There would be no need to remove event handler.
var table = $('#example').DataTable();
function myCallbackFunction (updatedCell, updatedRow, oldValue) {
console.log("The new value for the cell is: " + updatedCell.data());
console.log("The values for each cell in that row are: " + updatedRow.data());
}
table.MakeCellsEditable({
"columns": [0],
"onUpdate": myCallbackFunction,
"confirmationButton": true
});
See this example for code and demonstration.

How to set search results to pre-selected in select2?

Alright, so I'm trying to use select2's tagging and AJAX functionality in conjunction for my categories selection.
Currently, the user can search for categories to add to their post. One nice thing I noticed is that, select2 won't let you select the same selection twice (it's grayed and nothing happens when you click on it).
Here's my challenge... let's say a user is editing a post and already has categories selected. These categories appear below the select2 search. For example, let's say the user has the category "Life" selected. This will appear below already checked off.
The problem arises though, when the user searches for "Life". They'll be able to select it and add it again. I could just parse the previous selections and negate the selection, but I'd really like to use the built in functionality of select2 for the sake of consistency.
So how do I set incoming AJAX results to be already selected so that they can't be selected again?
Here's a fiddle. Notice how "Experiences" is grayed out when you search for it, but "life" is not even though it's already selected.
http://jsfiddle.net/odLnznct/1/
function formatStuff(stuff) {
if (stuff.loading) return 'Searching...';
markup = "<p>" + stuff.text + "</p>";
return markup;
}
function formatRepoSelection(stuff) {
return stuff.cat_name || $('.js-select').val();
}
function catAdd() {
var addCat = div = clo = label = labelText = null;
cat = $('.js-select').select2('data');
addCat = cat[0].text;
div = $('#categories-cat_name div.checkbox:first');
clo = div.clone();
$('input[type="checkbox"]', clo).val(addCat);
label = $('label', clo);
labelText = label[0].childNodes[label[0].childNodes.length - 1];
labelText.textContent = addCat;
$(div).before(clo);
}
$('.js-select').select2({
tags: true,
ajax: {
url: 'https://api.myjson.com/bins/58uwe',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term
};
},
processResults: function (data, page) {
var select2Data = $.map(data, function (obj) {
obj.id = obj.cat_id;
obj.text = obj.cat_name;
return obj;
});
return {
results: select2Data
};
},
cache: true
},
escapeMarkup: function (markup) {
return markup;
},
minimumInputLength: 1,
templateResult: formatStuff,
templateSelection: formatRepoSelection
});
$('.js-select').on('select2:select', function () {
catAdd();
});

You can try this.
Since your results could be multiple, you need to set your select element's multiple true to enable it and just add selected option as default value.
You can do it either javascript or html.
<div id='select-test'>
<select class="js-select" style="width:90%;" multiple=true>
<option value="Life" selected=true>Life</option>
<option value="Joy" selected=true>Joy</option>
</select>
</div>

Bootstrap Multiselect update option list on flow

I use bootstrap multi-select and I want to update options on flow with ajax
To populate on init my multiselect I do
<select name="model" class="multiselect" multiple="multiple">
<? foreach ($sel_models as $mod) { ?>
<option value="<?= $mod ?>" <?= ($mod == $params['model']) ? 'selected' : '' ?>><?= $mod ?></option>
<? } ?>
</select>
then on event I would like to update my option list with the following ajax
I was trying to use the rebuild method but won't fire the drop-down after creation
$.ajax({
type: 'post',
url: "helper/ajax_search.php",
data: {models: decodeURIComponent(brands)},
dataType: 'json',
success: function(data) {
$('select.multiselect').empty();
$('select.multiselect').append(
$('<option></option>')
.text('alle')
.val('alle')
);
$.each(data, function(index, html) {
$('select.multiselect').append(
$('<option></option>')
.text(html.name)
.val(html.name)
);
});
$('.multiselect').multiselect('rebuild')
},
error: function(error) {
console.log("Error:");
console.log(error);
}
});
With firebug I can see that the list is generated but on select won't show up

In the doc I can read :
.multiselect('setOptions', options)
Used to change configuration after initializing the multiselect. This may be useful in combination with .multiselect('rebuild').
Maybe you can't change your widget data by your initial way. In a correct way you should use setOptions method.
Else : With your way, maybe should you think about destroy your widget .multiselect('destroy') and create it again after.
Update after comment :
In the doc : ( you've linked )
Provides data for building the select's options the following way:
var data = [
{label: "ACNP", value: "ACNP"},
{label: "test", value: "test"}
];
$("#multiselect").multiselect('dataprovider', data);
So :
When you get data from your ajax call, you have to create an array of objects ( it's the options in the select you want to have ) with the format like
var data =
[
{label: 'option1Label', value: 'option1Value'},
{label: 'option2Label', value: 'option2Value'},
...
]
When your objects array is created, then you just have to call the method
$("#multiselect").multiselect('dataprovider', data);
Where data is your array of objects.
I hope I'm clear :/

As an alternative to multiselect('dataprovider', data) you can build the list with jquery append exactly the way you did in your question. The only change you need to make is to delay the rebuild until after the ajax request is complete.
var buildDrivers = $.getJSON('resources/orders/drivers.json', function(data) {
$.each(data, function(i, driver) {
$('#toolbar select[name="drivers"]').append('<option>'+driver+'</option>');
});
});
buildDrivers.complete(function() {
$('.multiselect').multiselect('rebuild');
});
see http://api.jquery.com/jquery.getjson/ for documentation

I've been added the functionality of updating options after filtering and getting them from the server side. This solution relays on the concept of injecting new options, destroying the select and initializing it again.
I took into account:
Considering the existing selected options, which must stay.
Removing duplicate options (might be as a conflict from which that already selected and the new that came from the server).
Keeping the options tray open after the update.
Reassign the previous text in the search text box & focusing it.
Just add the 'updateOptions' as a function after the 'refresh' function along with the two helper functions as follows:
updateOptions: function (options) {
var select = this.$select;
options += this.getSelectedOptionsString();
var selectedIds = select.val(),
btnGroup = select.next('.btn-group'),
searchInput = btnGroup.find('.multiselect-search'),
inputVal = searchInput.val();
options = this.removeOptionsDuplications(options);
if (!options) {
options = '<option disabled></option>';
}
// 1) Replacing the options with new & already selected options
select.html(options);
// 2) Destroyng the select
select.multiselect('destroy');
// 3) Reselecting the previously selected values
if (selectedIds) {
select.val(selectedIds);
}
// 4) Initialize the select again after destroying it
select.multiselect(this.options);
btnGroup = select.next('.btn-group');
searchInput = btnGroup.find('.multiselect-search');
// 5) Keep the tray options open
btnGroup.addClass('open');
// 6) Setting the search input again & focusing it
searchInput.val(inputVal);
searchInput.focus();
},
getSelectedOptionsString: function () { // Helper
var result = '',
select = this.$select,
options = select.find('option:selected');
if (options && options.length) {
$.each(options, function (index, value) {
if (value) {
result += value.outerHTML;
}
});
}
return result;
},
removeOptionsDuplications: function (options) { // Helper
var result = '',
ids = new Object();
if (options && options.length) {
options = $(options);
$.each(options, function (index, value) {
var option = $(value),
optionId = option.attr('value');
if (optionId) {
if (!ids[optionId]) {
result += option[0].outerHTML;
ids[optionId] = true;
}
}
});
}
return result;
},
Demo:
State:
"Option 1"
$('#select').multiselect('updateOptions', '<option value="2">Option 2</option>');
State:
"Option 2"
"Option 1"

I think this is an easier way to add options on the fly (using ajax or any other listener) to an existing Bootstrap MultiSelect.
Following is a simplified example to add options:
function addOptionToMultiSelect(multiselectSelector, value, selected) {
var data = [];
$(multiselectSelector + ' option').each(function(){
var value = $(this)[0].value;
var selected = $(this)[0].selected;
data.push({label: value, value: value, selected: selected});
});
// Add the new item
data.push({label: value, value: value, selected: selected});
$(multiselectSelector).multiselect('dataprovider', data);
}
For simplicity, I have assumed both the label and value are the same in an option. Note that the already selected options are taken care of by reading the selected attribute from the existing options. You can make it more sophisticated by tracking the disabled and other attributes.
Sample:
addOptionToMultiSelect('#multiselect-example', 'new-option', true);