If you have to store several values, I recommend that you store the
data with Javascript separately, such as in arrays or JSON. The only
downside is that you're doing the loop twice in your server-side code
(one for the Javascript, one for the HTML table rows). But it's more
organized and easier to provide valid HTML markup.
It does go back to storing important values in markup though.
For example:
var data = {
'id_1':{ID:1, paramX:'abcdefg', paramY:'jklmnop'},
'id_2':{ID:2, paramX:'abcdefg', paramY:'jklmnop'},
'id_3':{ID:3, paramX:'abcdefg', paramY:'jklmnop'}
}
<div id="id_1" class="mydiv">blah</div>
$(".mydiv").click(function() {
var id = this.id; // => id_1
var row = data[id];
alert(row.ID);
alert(row.paramX);
alert(row.paramY);
});
On Jul 2, 10:30 am, John Newman <john.newma...@gmail.com> wrote:
> Thanks James, I just found the data() method. I am not a fan of
> squishing a bunch of data into a standard attribute, like id, and then
> using some sort of regexp or a dirty string split on it to read it
> back. In real life there are are arrays etc generated in the
> onclick="", this is hard to read and inline w/ html but.. it works. I
> guess a json string in id="" might work but that is still pretty dirty
> IMO.
>
> Creating my own attributes is *probably fine, but it's not valid
> html. From a practical standpoint that might be the way to go, but I
> am leery of it due to unreliable browser support, so I'd like to stick
> with valid markup. From what I hear though, this works fine.
>
> If I want to use the data() method, does that mean I have to do
> this:
>
> [#list records as record]
> <tr>
> <td class="record" id="record_${record.ID}">
> ${record.name}
> <script type="text/javascript">
> $(document).ready(function() {
> $('#record_' + ${record.ID}').data({
> ID: ${record.ID},
> // 4
> paramX: '${record.paramX}', //
> 'abcdefg'
> paramY: '${record.paramY}' //
> 'jklmnop'
> );
> });
> </script>
> </td>
> </tr>
> [/#list]
> <script type="text/javascript">
> $(document).ready(function() {
> $('td.record').click(function() {
> var data = $(this).data();
> showRecordDetails(data.ID, data.paramX, data.paramY);
> });
> });
> </script>
>
> I am not really fan of this either, but maybe it's the most correct
> way to do it. An script for every row, with lots of rows is pretty
> bad though. Or I could loop over the records twice, one to render the
> <tr>s and another to build one script with the data().
>
> I think I'd prefer simple inline onclick="${}" to this, but that's the
> whole thing I am trying to get away from. Is there a different way to
> do this?! Is json able to help with this somehow?
>
> On Jul 2, 3:59 pm, James <james.gp....@gmail.com> wrote:
>
> > I usually go with the element attribute method if all my content are
> > generated server-side. Either id, or if that's not available, I use
> > class.
>
> > <div id="request_12345" class="mydiv">blah</div>
>
> > $(".mydiv").click(function() {
> > var id = this.id.split('_')[1]; // 12345
>
> > });
>
> > Otherwise if you want to generated it client-side and have a list of
> > recordID's ready, you can use jQuery's .data() method to store data
> > with the element:http://docs.jquery.com/Core/data
>
> > On Jul 2, 5:45 am, John Newman <john.newma...@gmail.com> wrote:
>
> > > Hello
>
> > > First off if this is a double post I apoligize, I sent my first
> > > message an hour ago and it is not showing up. Anyway:
>
> > > I've wondered if there is a way to do this for a while. Perhaps I am
> > > missing something or should use a different approach altogether.
>
> > > Say I have a dynamic page that generates some td elements. The
> > > syntax here is freemarker but you can easily envision your favorite
> > > serverside text generating language instead.
>
> > > <table id="records">
> > > <thead><th>Name</th></thead>
> > > <tbody>
> > > [#list records as record]
> > > <tr>
> > > <td class="trigger" id="trigger_${record.ID}" onclick="showDetails
> > > (${record.ID})">${record.name}</td>
> > > </tr>
> > > [/#list]
> > > </tbody>
> > > </table>
>
> > > <script type="text/javascript">
> > > function showDetails(recordID) {
> > > // normally an ajax post but you get the idea
> > > window.location = '/record?recordID=' + recordID
> > > }
> > > </script>
>
> > > Now I want to get that onclick out of there and bind it using jquery,
> > > but i haven't been able to figure out if there is a way to get the
> > > parameter there. Apart from putting it in some attribute and looking
> > > at it. Is there a cleaner way?
>
> > > <script type="text/javascript">
> > > $(document).ready(function() {
> > > $('#records td.trigger').click(function() {
> > > window.location = '/record?recordID=' + ??? how do i get
> > > that
> > > });
> > > });
> > > </script>
>
> > > I know I could look at the elements attributes, something like
> > > this.attr("id").substring().etc().etc() .. but sometimes there are
> > > many parameters to the javascript fn to generate the post and that
> > > approach doesn't seem to viable. and there isn't really a standard
> > > attribute to use that makes sense for that anyway. So how do I do
> > > this?
>
> > > Thanks
>
>
