Jquery bind with parameters? Replace inline onclick for server side generated lists, onclick(x, y, z)

[lloyd mcclendon]

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

[James-279]

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

[lloyd mcclendon]

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

[James-279]

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

[ricardobeat]

You can put data inside the class attribute (like <div
class="someclass { id: 234 }"></div>), it's perfectly valid. The class
attribute is not meant for presentation only according to the HTML/
XHTML specs. http://plugins.jquery.com/project/metadata

Or, use the HTML5 doctype <!DOCTYPE html> (with valid mark-up
obviously) and the new data-xx attribute, that will give you standards
mode in all browsers and perfectly valid attributes:

<td class="trigger" id="trigger_${record.ID}" data-recordID="$
{record.ID}">${record.name}</td>

$('td.trigger').click(function(){
   alert( $(this).attr('data-recordID') );
});

See http://ejohn.org/blog/html-5-data-attributes/ for more info.

cheers
-- ricardo

On Jul 2, 12:45 pm, John Newman <john.newma...@...> 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

[lloyd mcclendon]

James & Ricardo,

Thank you both for the detailed responses, I appreciate it.

I didn't realize HTML 5 can be used NOW without having to wait for
browser quirks.  In that case, it is absolutely the way to go.  I
already have this working and it is great, very clean, the way it
should be IMO.  If for some reason I weren't able to use that, I
probably would use 2 server side loops, one for the html, one for the
js.

Thanks again,
John

On Jul 2, 11:21 pm, Ricardo <ricardob...@...> wrote:

> You can put data inside the class attribute (like <div
> class="someclass { id: 234 }"></div>), it's perfectly valid. The class
> attribute is not meant for presentation only according to the HTML/
> XHTML specs.http://plugins.jquery.com/project/metadata
>
> Or, use the HTML5 doctype <!DOCTYPE html> (with valid mark-up
> obviously) and the new data-xx attribute, that will give you standards
> mode in all browsers and perfectly valid attributes:
>
> <td class="trigger" id="trigger_${record.ID}" data-recordID="$
> {record.ID}">${record.name}</td>
>
> $('td.trigger').click(function(){
>    alert( $(this).attr('data-recordID') );
>
> });
>
> Seehttp://ejohn.org/blog/html-5-data-attributes/for more info.
>
> cheers
> -- ricardo
>
> On Jul 2, 12:45 pm, John Newman <john.newma...@...> 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