On Feb 10, 12:05 pm, timothytoe <[EMAIL PROTECTED]> wrote:
> This is worth a little more discussion. You're saying that we can use
> a div to hold variables, then jQuery can naturally deal with them.
> That kinda blows my mind. I'm not sure it would be very speedy, but it
> seems very flexible.

I think, you can actually use any attribute, element or whatever in
DOM to hold variables as long as it doesn't interupt your HTML. in my
previous example, I actually used the 'class' attribute of <a />
element(not DIV) to hold those parameters.. :)

Below is a scenario in my applications[a photo album] (excerpt of my
server-side Perl HTML::Mason code): the first one uses javascript URL
and another goes with jQuery's $a.click(). in the second method, I
used the 'alt' attribute of a <img /> element, which is tightly
related to a specific link(<a />), to deliever parameters. both work
well under my server/browsers: - )

/* use Javascript URL */
<h1 id="photoTitle">My photo album</h1>
<div id="photo"></div>
<div class="photoLinks">
%   foreach my $item ( @data ) {
    <a href="javascript:showphoto('<% $item->{pid} %>','<% $item->{gid}
%>')">
        <img src="/images/icon.gif" alt="" /> <% $item->{title} %> </
a>
%   }
</div>

<script type="text/javascript">
    function showphoto(pid, gid) {
        $.getJSON('/path/to/showphoto.html', { p : pid, g : gid },
function(sdata) {
            $('div#photo').html(sdata.image);
            $('h1#photoTitle').html(sdata.title);
        });
    }
</script>


/* use jQuery $a.click() */
<h1 id="photoTitle">My photo album</h1>
<div id="photo"></div>
<div class="photoLinks">
%   foreach my $item ( @data ) {
    <a href="#"> <img src="/images/icon.gif" alt="{ pid:'<% $item-
>{pid} %>', gid:'<% $item->{gid} %>' }" />
         <% $item->{title} %> </a>
%   }
</div>

<script type="text/javascript">
    $('div.photoLinks a').click(function() {
        var metadata;
        eval( 'metadata=' + $('img', this).attr('alt') );
        $.getJSON('/path/to/showphoto.html', metadata, function(sdata)
{
            $('div#photo').html(sdata.image);
            $('h1#photoTitle').html(sdata.title);
        });
    });
</script>

So, I think:
(1) the parameter-deliverer can be very flexible, either in an
attribute(class, style, alt...) of an element, a hidden HTML
element(i.e. <span />), or whatever else, as long as it's in DOM tree
and doesn't break down the HTML flow.
(2) we can use any string functions(i.e. match, split, et.al) to parse
parameters instead of 'eval', although I guess eval is the easiest way
to handle this. :- )
(3) "eval" is not necessary if there is only one parameter which is a
stand-alone string or number instead of a Javascript data structure
(4) not sure about the speed thing though.

Regards,
lihao(XC)

Reply via email to