We Keep Coding

Get specific td data, use data in a link, replace td data with the link JavaScript

I have a table generated by open data tables it generates perfectly. I need to isolate the last four cells on each row, store those values in a variable, and then make a link using the text in each cell (url + “/“ + text variable + “>” text variable + “</a>”). This link will be unique to each cell and needs to overwrite current cell text in all of last 4 cells of each row in the table. It will eventually be called on an onload event but onclick event is fine for now (testing etc). This needs to be a JavaScript function or jQuery.
I have searched for a long time trying every possible way to do this and can come close but I can’t seal the deal. Any help would be greatly appreciated. The url for the table I’m working with is: http://mak-a-key.com/wp-content/themes/theme49645/tables/table-links.html

When you create the table, you can use the callback function createdCell and modify the cell's DOM.
cellData: gives you the actual data in the current cell
rowData: gives you the actual array of data in the current row
if you need the last 4 in one, just concatenate :
rowData.nameCell2 + rowData.nameCell3.... and use it in the URL part.
Example:
$('yourTable').DataTable({
columns: [
{data: 'dataCell1'},
{data: 'dataCell2',
createdCell: function(td, cellData, rowData, row, col){
// rowData contains all information for the actual row
// cellData contains information in your actual cell
$(td).html("");
}
}
]
});

Get Value From Cell of a Previous Row using Javascript/JQuery

I have a Bootstrap table that when you click on the right cell, drops down an extra row and cell that links to a separate HTML file. I need to dynamically load data in here based on the value of the row that was clicked. See screen shot below:
I'm passing the value I need as a parameter into the the linked HTML file, but I need to also pass the 'Visit' number into the HTML file, but I'm not sure how to extract it dynamically.
The table is dynamically generated using this JS script
function buildTable($el, cells, rows) {
$el.bootstrapTable({
columns: $('#VisitListTable').bootstrapTable('getOptions', null).columns,
detailView: cells > 1,
url: dataurl,
responseHandler: responseHandler,
pagination: true,
detailView: true,
detailFormatter: detailFormatter,
paginationVAlign: "both"
});
}
But it's outputted HTML is in a fiddle here:
http://jsfiddle.net/W3R3W0LF666/wr0bgs0g/
It's the 'Visit' number that I need to be able to pull out into a variable that I can use as and when I need to, does anyone know how I might be able to extract it so that I use a different one for a different row?

Dojo: for each row in a grid, have a button that when clicked shows more information from the data store

This is proving to be surprisingly difficult.
Suppose I have a grid that displays the name and size of files.
Information is loaded from a JSON file into an instance of dojo/store/Memory and then key attributes presented in the grid. How would I include a button on each row of the grid, that when clicked, displays more attributes about the file? These attributes are stored in the dojo/store/memory.
Right now I have a row like this in the grid:
{name:"More", field:"id", formatter: buttonFormatter, datatype:"string", noresize: true, width: "120px"}
And I attempted to pass the ID to a button using the formatter:
var buttonFormatter = function(inValue){
var newButton = new Button({
label: "Details",
onClick: function(inValue){
alert("More information about " + inValue + " goes here");
}
});
return newButton;
}
This doesn't work however.
The difficulties, as far as I can tell, are:
1) Associating each specific button with a specific file from the store
2) Giving the onClick javascript access to data from the store
Thanks for your help!
Tristan

You can use dojo-data-type-event attach point to do the operation. The corresponding method in the grid widget instance will show your more attributes in different style like tooltip,append,dialog and etc as you need

Not sure if this might helps you, but have a look at it.
In this example there's an onclick-Event on a button to zoom to the clicked row.
https://developers.arcgis.com/en/javascript/jssamples/fl_zoomgrid.html
Regards

YUI Datatable Drag and Drop together with Cell Editor

I have a problem with YUI (2) Datatable and Drag and Drop combo. I have a table of items, one of them is item description which I made editable (and saveable) with YUI's TextboxCellEditor. I also made the rows draggable (so I can drop them to another container).
But I'm stuck with two items:
- I can only get DnD by clicking on the second column (the first one does not work)
- I can only get it to work on the second attempt since initialization.
Here is a snipet from my JS (simplified):
nameFormatter = function (elCell, oRecord, oColumn, oData) {
var link = '/share/page/site/' + Alfresco.constants.SITE + '/document-details?nodeRef=' + oRecord.getData('nodeRef');
elCell.innerHTML = '<span>' + oData + '</span>';
};
descFormatter = function(elCell, oRecord, oColumn, oData) {
elCell.innerHTML = '<pre class="desc">' + oData + '</pre>';
};
columnDefs = [
{key: "name", label: "Name", sortable: true, formatter: nameFormatter, resizable: true}
, {key: "description", label: "Description", sortable: true, formatter: descFormatter, editor: new YAHOO.widget.TextboxCellEditor(), resizable: true}
];
this.mediaTable = new YAHOO.widget.DataTable(this.id + "-media-table", columnDefs, this.dataSource, {
MSG_EMPTY: "No files"
});
// now we want to make cells editable (description)
var highlightEditableCell = function(oArgs) {
var elCell = oArgs.target;
if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) {
this.highlightCell(elCell);
}
};
this.mediaTable.subscribe("cellMouseoverEvent", highlightEditableCell);
this.mediaTable.subscribe("cellMouseoutEvent", this.mediaTable.onEventUnhighlightCell);
this.mediaTable.subscribe("cellClickEvent", this.mediaTable.onEventShowCellEditor);
this.mediaTable.subscribe("editorSaveEvent", this.saveDesc);
this.mediaTable.subscribe('cellMousedownEvent', this.onRowSelect);
The saveDesc function is simple Ajax call to save that items' description.
Here is the onRowSelect function:
onRowSelect = function(ev) {
console.log(" == method onRowSelect");
var tar = Event.getTarget(ev)
, dd
;
dd = new YAHOO.util.DDProxy(this.getTrEl(tar));
dd.on('dragDropEvent', function(e) {
YAHOO.Bubbling.fire('myCustomEvent', { target: e.info, src: tar});
dd.unreg();
});
};
If I just click on desc, I get the text editor, if I click on name, I get the link open.
Like I said, when I mouseDown on the second column (description), in first attempt I get nothing. Then I click and hold the second time, and this time it works (I get a DDProxy and I can Drag and drop it to the target, everything works there).
And the other issue is that when I click and hold on the name column, I don't get the DDProxy (I get my onRowSelect event and the correct row).
What am I doing wrong here?
UPDATE: Resolved the first issue by using Satyams answer - removing the formatter for my cell with link.
The second issue (only on the second click) was resolved because I added the missing dd.handleMouseDown(ev.event) in my onRowSelect function.

Dav Glass, who wrote DD, has this example in his page: http://new.davglass.com/files/yui/datatable4/ I used it in my example: http://www.satyam.com.ar/yui/2.6.0/invoice.html and it works just fine, though it is somewhat more involved than you have there. I'm sorry I cannot help you more precisely with your issue, D&D is not my string point but I hope the examples might help.
One reason for your problem might be that link in the cell. This is not a good idea, whether you have DD or not. In general, the recommended way to deal with this is to listen to the cellClickEvent and if the column of the cell that got clicked is the one that 'navigates', you build the URL based on the information in the record clicked and then navigate or do whatever you want with it. This allows the DataTable to render much faster, as it needs no formatter and, in the odd event that someone does click the cell, then and only then you bother to make the calculations. The size and number of DOM elements on the page also goes down.
Likewise, with the other cell with the pre-formatted tag, you can easily avoid it. The cells in each column in a DataTable gets a CSS class name made from the "yui-dt-col-" prefix and the 'key' value of the column (for example: yui-dt-col-description). Thus, you can simply add a style declaration for that CSS class name and spare yourself the formatter. Likewise, for highlighting the editable cells, how about defining some style for the .yui-dt-editable:hover selector? I've never done it myself but I imagine it should work.

jQuery autocomplete UI Widget- Perform jQuery select event on dynamically created table row element

I have a working jQuery autocomplete being performed on the text input of a table data element, txtRow1. The text data is remote, from a mysql database, and is returned by JSON as 'value' for the text input. The returned data includes another piece of text, which, via a select event within the autocomplete, is populated to the adjacent table data element tickerRow1.
With help from the SO community, the autocomplete is now live and working on all text input elements of a dynamically created table (so txtRow1 to txtRowN). There is javascript code to create and name the table elements txtRoxN + 1 and tickerRowN + 1.
However, I have a problem with the select event for the id of tickerRowN. Because it changes every time I add a row, I don't know how to call the select event for the specific id of the table data in question.
I have done a lot of searching around but as I am new to this, the only functions I have been able to find manipulate the element data when you know the id already. This id is dynamically created and so I don't know how to build the syntax.
Thankyou for your time.
UPDATE: with huge thanks to JK, the following example works. I now know about jsFiddle and will try to use this for all further questions. The following code works for my dynamic example, but I don't know why. Sigh.
jsFiddle working example

function getRowId(acInput){
//set prefix, get row number
var rowPrefix = 'txtRow';
var rowNum = acInput.attr("id").substring((rowPrefix.length));
return rowNum;
}
$("#txtRow1").autocomplete({
source: states,
minLength: 2,
select: function(event, ui) {
var tickerRow = "#tickerRow" + getRowId($(this));
//set ticker input
$(tickerRow).val(ui.item.label);
}
});
http://jsfiddle.net/jensbits/BjqNz/