Adding a button into a cell

danielkorzekwa

Hi,

Imagine we create a two column table from array [[userName,userId],[userName,userId]....]
In the first column we display user name whereas in the second column we put a button with a click listener, e.g. call a function showDetails(userId). At the moment to provide a custom rendering for the second column I use

"fnRender" : function(obj) {
var userId= obj.aData[obj.iDataColumn]
return ''
}

and it works, however I wonder if there is a better was to specify custom rendering with onclick listener for a given cell. Ideally I'd like to have:
"fnRender" : function(obj) {
var userId= obj.aData[obj.iDataColumn]
$(document.createElement("button")).click(marketDetails(userId))
}

I will appreciate any help.

Regards.
Daniel Korzekwa

fbas

I'm not an expert javascripter, but I prefer the simplicity of approach 1, especially since it already works.

If you go with path 2, you need to create the element, then add it to the right location, then bind the listener. more code to do the same thing already accomplished in approach 1.

danielkorzekwa

Thanks fbas for you answer.

I'm not a java script expert either and I 'm skilled more in the server side development including some web apps adopting java web frameworks, which do all javascript for you. and maybe it's where my question is coming from.

The advantage of the second solution I opt for, would be:
- You can pass an object function rather than raw javascript text, which may help you to create more object oriented components. e.g. function MyTableComponet(onClickListener). Having that fnRender returns just an html string, you need to know where the function you are going to call actually exists in a DOM object to be able to call it.

- Additionally it's easier to create a button with onClick listener in jquery rather than concatenating it with String, e.g. if a function is named (in my case) placeBet(betSize, betPrice, betType, marketId, runnerId), then concatenating onClick.... from function parameter values doesn't sounds great and also looks pretty ugly.

fbas

gotcha. you can modularize better with approach 2, and separate HTML content from scripted functionality, etc.

I'm a little curious about your site. Is it a gambling site? or futures market/prediction market kind of thing?

danielkorzekwa

I'm doing some research on betting exchange markets. It's not a gambling and it's not a commercial project.

The screenshot of a google gadget I'm referring to in my question is here:
https://picasaweb.google.com/lh/photo/fid2xwi440CHK1SOcRGxEw?feat=directlink

and the sources of this gadget are here:
http://code.google.com/p/betting-exchange-google-gadget/source/browse/trunk/betex_bet_placer/bet_placer_widget.js

Sometimes I write on my research on my blog at blog.danmachine.com

fbas

Thanks, very cool. I'm a little into this topic myself. I've written a few virtual/game stock exchanges and was interested in setting up betting/futures/prediction things as well.

What is being exchanged? The prices seem tied to a user? Is it based on their (perceived) success at predictions/bets?

danielkorzekwa

We are going a bit out of topic for this forum, if you want to chat on exchanges, then you are more than welcome to contact me by linkedin, you will find my profile there.

Cheers.
Daniel

danielkorzekwa

Traversing this forum I found a way to achieve solution 2 I described in my question. Basically instead of returning button html by fnRender I use:

$('#bet_placer_widget_table tbody td').click(function() {
/* Get the position of the current data from the node */
var aPos = oTable.fnGetPosition(this);

/**Column 2 is a hedge action.*/
if (aPos[1] == 2) {
var runnerId = marketDataJson.runners[aPos[0]].runnerId
hedge(marketDataJson.marketId, runnerId)
}
});

I would still prefer a fnRender() function which may return an object rather than html string.