Ajax jQuery Best practices: avoid inline script?? then how do I pass variables

Question

I just read in a best practices article for jquery and ajax that I should avoid defining behavior for elements on the page with inline script. That does make sense since it makes the code very readable.

However, I want to ask what should I do then, if I need to pass server-side variables to javascript. Like consider the following code...

<?php foreach($product as $product_id): ?>
<input type="button" value="Delete Favorite" onclick="delete_favorite('<?php echo $product_id; ?>')" />
<?php endforeach; ?>

Should I be using hidden form values for such a case? or may be adding adding the server side variable in the id of element I am defining the behavior for? like so..

<input type="button" value="Delete Favorite" id="button<?php echo $product_id; ?>" />

Any suggestions?

alex · Accepted Answer · 2011-03-04T05:55:38.077

3

There are a few things you could do, one of them would be use a custom attribute such as data-product-id (data- prefix is in HTML5 spec I believe).

Though, you could also give that input an id such as product-343 and then get the id using...

$(this)[0].id.replace(/\D/g, '');

(assume this points to an input element).

edited Mar 04 '11 at 05:55

answered Mar 04 '11 at 05:48

alex

479,566
201
878
984

+1 Very thoughtful. Just the thing I was looking for. Thanks. – vikmalhotra Mar 04 '11 at 06:04

score 2 · Answer 2 · answered Mar 04 '11 at 05:52

2

Use data- prefix attribute. http://jsfiddle.net/zJWfB/

answered Mar 04 '11 at 05:52

aavezel

604
3
10

score 1 · Answer 3 · answered Mar 04 '11 at 05:52

1

Try this:

<?php foreach($product as $product_id): ?>
    <input id="fav-<?php echo $product_id; ?>" class="prod-fav" type="button" value="Delete Favorite"/>
<?php endforeach; ?>

<script type="text/javascript">
    $(function(){
        $(".prod-fav").click(function(){
                    var $this = $(this);
            var id = $(this).attr("id").replace(/[^0-9]/g, "");
            delete_favorite(id); // Call delete_favorite or
                    //delete_favorite.call($this, id); //To retain the calling element context or
                    // implement you delete function right here..
        });
    });

</script>

answered Mar 04 '11 at 05:52

Chandu

81,493
19
133
134

This is how I often do it - just a handy note, `\D` is the same as `[^0-9]` :) – alex Mar 04 '11 at 05:56
Regular expressions that are intuitive? Good luck :P +1 for doing it similar to my suggestion too :) – alex Mar 04 '11 at 05:58
Well to some extent possible I guess :) – Chandu Mar 04 '11 at 06:01

Ajax jQuery Best practices: avoid inline script?? then how do I pass variables

3 Answers3