Search code examples
javascripthtmlajaxmarkup

Passing Arguments via ajax - Correct Markup

I am putting together a front end for a shopping basket, and it uses a Javascript API to communicate with the database. I have methods such as:

  • updatePackageQuantity
  • updateProductQuantity
  • removePackage
  • reinstatePackage

Each of the methods require various arguments to be passed, and I'm currently figuring out the best way of retrieving them from the page and passing them.

For example, I currently use classes like this:

<a href="#" class="updateProductQuantity">Update Quantity</a>

and I'd grab the value from the input field in this instance. I also have 'constants' that I need to pass such as basketID, shopID etc, and I'd like to be able to grab them from the markup somehow.

What would be the ideal way of achieving this? Maybe having a hidden form on the page with a list of inputs, or could I attach the values to attributes, similar to the way its done on twitter bootstrap:

<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>

I notice they use a lot of attributes prefixed with 'data-'. So what's the right way?

Solution

  • Well..

    I believe going with the "data-" attributes would be best, since its a nice little nifty feature of HTML5.

    Also, it'll keep your markup clean.

    So if you think your application would be running on Modern browsers, this should be the way to go.