« Return to Thread: Jquery bind with parameters? Replace inline onclick for server side generated lists, onclick(x, y, z)
Re: Jquery bind with parameters? Replace inline onclick for server side generated lists, onclick(x, y, z)
by lloyd mcclendon
::
Rate this Message:
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
>
>
« Return to Thread: Jquery bind with parameters? Replace inline onclick for server side generated lists, onclick(x, y, z)
| Free embeddable forum powered by Nabble | Forum Help |
