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
>
>

Reply via email to