We Keep Coding

Django and jQuery.formset, how to manipulate delete button position

I'm trying to set my formset in django, using the famous jQuery plugin
jQuery.formset.js
All works perfectly, but I have some problem to set the right position of the delete button.
Now it is set in the last column of my table, like in the following figure:
But my aim is to replace the delete button in the same line of the the add button (+).
I have found in the code the following instructions, but I don't now how could set it for my aim:
var delButtonHTML = '<a class="' + options.deleteCssClass + '" href="javascript:void(0)">' + options.deleteText +'</a>';
if (options.deleteContainerClass) {
// If we have a specific container for the remove button,
// place it as the last child of that container:
row.find('[class*="' + options.deleteContainerClass + '"]').append(delButtonHTML);
} else if (row.is('TR')) {
// If the forms are laid out in table rows, insert
// the remove button into the last table cell:
row.children(':last').append(deleteButtonHTML);
} else if (row.is('UL') || row.is('OL')) {
// If they're laid out as an ordered/unordered list,
// insert an <li> after the last list item:
row.append('<li>' + deleteButtonHTML + '</li>');
} else {
// Otherwise, just insert the remove button as the
// last child element of the form's container:
row.append(delButtonHTML);
}
How could I get this instruction to achive my aim?

add container class with same class:
deleteContainerClass: 'hapus',
addContainerClass: 'hapus',

highlight row after edit in datatables

I new to Jquery and Javascript.
I am using datatables to show some data
I am trying to highlight specific rows, ie : rows that have been edited after inline edit. I am using the inline edit (from https://github.com/ejbeaty/CellEdit). The code that I have modified in " Advanced.js" is as follows :
function myCallbackFunction (updatedCell, updatedRow, oldValue) {
if (updatedCell.data() == "Bradley")
{
console.log("highlight required for Name Bradley")
$(updatedRow).css( "background-color", "Orange" )
}
console.log("The new value for the cell is: " + updatedCell.data());
console.log("The old value for that cell was: " + oldValue);
console.log("The values for each cell in that row are: " + updatedRow.data());
}
In the callback function I am trying to change the background color for a specific name. I can see the console.log but the color changes seem to have not taken up.

Did not knew this CellEdit plugin before, but it looks to be really nice, decent and straight forward. Instead of copying an example it is sometimes better to produce a small minimal example from scratch. Look at this
var table = $('#example').DataTable({
}).MakeCellsEditable({
onUpdate: function(cell, row, oldValue) {
if (cell.data() != oldValue) {
row.nodes().to$().addClass('highlight')
}
}
})
I forgot .nodes() in the comment, sorry for that - but the above works -> http://jsfiddle.net/Lccju5bq/

try this `
if (updatedCell.data() == "Bradley")
{
console.log("highlight required for Name Bradley")
var updatedRow = document.getElementbyId("updatedRow);
updatedRow.style.background = 'black';
}

Highlighting rows in bootstrap table

I am using bootstrap-table and that's my pen: codepen
I need to highlight rows (in 2nd and 3rd table) with the same ID I have selected in the 1st table.
How can I select/deselect them? I guess I have to add the selected class to the rows? I have tried to do that but it doesn't seems to work unfortunately.
Here is what I have tried:
if ($('tr[class="selected"]')) {
var temp = $('tr[class="selected"]').attr("data-index");
$('tr[data-index="' + temp + '"]').addClass('selected');
}
Furthermore, why is there ascending ordering in the tables? How can I keep the original sequence of json objects?

Update your listeners with the following scripts :
$('#eventsTable').on('check.bs.table', function (e, row, element) {
var id = Number(element.attr('data-index')) + 1;
$('#eventsTable2 tr:eq('+id+')').addClass('selected');
$('#eventsTable3 tr:eq('+id+')').addClass('selected');
});
$('#eventsTable').on('uncheck.bs.table', function (e, row, element) {
var id = Number(element.attr('data-index')) + 1;
$('#eventsTable2 tr:eq('+id+')').removeClass('selected');
$('#eventsTable3 tr:eq('+id+')').removeClass('selected');
});

Populating HTML table with Javascript and retaining CSS style

So far I have the code below working. My only problem is the associated styles of the HTML table are not being applied when the table is inserted into its parent div. What is the best way to resolve this? I am using jQuery in tandem with jQuery mobile.
var tableBase = '<table data-role="table" id="score-table" style="margin-left: auto; margin-right: auto;" class="ui-responsive table-stroke ui-table ui-table-reflow"><thead><tr><th data-priority="1">Event</th><th data-priority="2">Score</th></tr></thead><tbody>';
function buildTable(data) {
var tableCopy = tableBase;
data.forEach(function(element, index, array) {
tableCopy = tableCopy + '<tr><td>' + element.event + '</td><td>'
+ element.points + '<td></tr>';
});
tableCopy = tableCopy + '</tbody></table>';
return tableCopy;
}
I then have have a #('#targetDiv').html(buildTable(myData)) that inserts the tables html into its div. Everything works except the styles are not applied. I am using the responsive/reflow table from jQuery mobile.

I think you have too rerun the plugin for the table after it's inserted to the DOM:
http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/page-dynamic.html
// Pages are lazily enhanced. We call page() on the page
// element to make sure it is always enhanced before we
// attempt to enhance the listview markup we just injected.
// Subsequent calls to page() are ignored since a page/widget
// can only be enhanced once.
$page.page();
// Enhance the listview we just injected.
$content.find( ":jqmData(role=listview)" ).listview();

jqGrid custom input element needs handle to parent table

I'm using jqGrid to build a custom inline entry widget on a page. The relevant part of the jqjGrid setup is:
colModel:[ {
// Other columns removed.
{name:'ship',index:'ship', width:90, editable: true, sortable: false,
edittype: "custom",
editoptions:{ custom_element: customElement,
custom_value: customValue} }
],
And my callback function is:
function customElement(value, options) {
var a = $("<input>").attr({
type: 'text',
size: 2,
value: value,
style: 'float: left'
}).add(
$("<span>").attr({
style: 'float: left; margin-top: 2px;',
'class': 'ui-icon ui-icon-search'
}).click(function() {
// My custom function here.
})
).appendTo($("<div>"));
return a;
}
This all works properly.
However, I'm building a library to manage several jqgrid tables on a page. I'd like to use the same function to build the custom elements on several of those tables. The problem is that this particular click() function needs to know which jquery table it's dealing with.
I can get the table ID through a hacky way at the beginning of customElement and pass it in the closure to the function:
var fieldID = options.id;
var rowID = fieldID.replace(/_.*/, "");
var containingTable = $("#" + rowID + "_id").closest("table");
But this assumes that the column "id" exists in the current jqGrid, and it's an earlier (leftward) column. I can't use the "ship" column because it hasn't been created yet. I can't assume there are other rows in the table that would have a "ship" column either.
How can I, in a custom_element handler, reliably get a handle to the "calling" table?

I agree that it's a problem in the current code of jqGrid. There are no simple and elegant way to get the id of the grid for which the control are created.
One workaround you already suggested. I can suggest you one more version to get the id of "the calling table".
Custom element can be used for every editing mode: inline editing, form editing and cell editing. The click handle receive Event object e
.click(function(e) {
// My custom function here.
})
which you can to detect the id of the "the calling grid". In case of inline editing or cell editing the detection is the most easy. It will be
.click(function(e) {
var $grid = $(e.target).closest('table.ui-jqgrid-btable');
...
})
Inside of click event handler of the form editing you can use
.click(function(e) {
// you can do the following
var $t = $(e.target).closest('table.EditTable'),
tid = $t.attr('id'); // id=TblGrid_list
if (typeof tid === "string" && tid.substr(0, 8) === 'TblGrid_') {
var gridId = tid.substr(8);
}
var grid = $('#' + $.jgrid.jqID(gridId));
// or the following
var $f = $(e.target).closest('form.FormGrid'),
fid = $f.attr('id'); // id=FrmGrid_list
if (typeof fid === "string" && fid.substr(0, 8) === 'FrmGrid_') {
var grid_id = tid.substr(8);
}
var mygrid = $('#' + $.jgrid.jqID(grid_id));
...
})
The code above use the fact that the editing form contains two elements which ids will be constructed based on the id of the grid: the <table> element inside of the editing form has the id="TblGrid_list" if the grid id="list" and the <form> element has the id="FrmGrid_list".
The usage of $('#' + $.jgrid.jqID(gridId)) is more safe as $('#' + gridId) because it gives correct results in case when the grid id contain meta characters. The jqID function is very easy (see here). It makes just escaping of the meta characters used in the jQuery selector.