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-04 05:55:38Z

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 4, 2011 at 5:55

answered Mar 4, 2011 at 5:48

alex

492k205 gold badges891 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vikmalhotra Over a year ago

+1 Very thoughtful. Just the thing I was looking for. Thanks.

aavezel · Accepted Answer · 2011-03-04 05:52:44Z

2

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

answered Mar 4, 2011 at 5:52

aavezel

6043 silver badges10 bronze badges

Comments

Chandu · Accepted Answer · 2011-03-04 05:52:27Z

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 4, 2011 at 5:52

Chandu

83.2k19 gold badges137 silver badges136 bronze badges

3 Comments

alex Over a year ago

This is how I often do it - just a handy note, \D is the same as [^0-9] :)

alex Over a year ago

Regular expressions that are intuitive? Good luck :P +1 for doing it similar to my suggestion too :)

Chandu Over a year ago

Well to some extent possible I guess :)

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related